Drupal 8 URL Embed Module

By shane
Tue, 2019-08-27 09:42
comments
Daily Dose of Drupal Episode #223

Share with Others

The Drupal 8 URL Embed Module makes it easy to add embeddable URL’s into your Drupal website. What exactly is an embeddable URL? It’s an easy way to turn your links to popular social sites such as Twitter, YouTube, Facebook, Instagram, Spotify, and more into a nicely formatted embed code that displays a preview of the content directly on your site.

This is a great module to add a blog or business website to embed things that might have been shared on social sites. Check out the module page for more information as there is a large number of supported providers thanks to the URL Embed module using oEmbed and the Embed library.

So you want to turn those plain URL’s into something a little more fancy? Well, you have come to the right place. First make sure you have downloaded and installed the Drupal 8 URL Embed module. It’s recommended to download and install this module using composer so it will download the Embed module and the PHP Embed library automatically. You can do that with

composer require drupal/url_embed

The next step is to customize the embed button, if you want to. To do this, go to Configuration > Content Authoring > Text editor embed buttons.

Essentially, you can change the icon and add additional embed buttons. These buttons will be able to be used within your Text formats. It’s fine to leave these at the defaults for now. By clicking on the Settings link you can change where the button icon files should be stored.

Leave these settings at their defaults as well. Next, navigate to Configuration > Content Authoring > Text formats and editors. Here you will see a list of all the text formats on your website. Click the Configure button on the Basic HTML text format.

This will bring you to a page that will allow you to edit the Toolbar Configuration. Drag the URL Embed button into the Toolbar Configuration. You can place this wherever you want, but it likely makes the most sense in the Media section.

We now need to enable and configure two additional filters. Check the boxes next to Display embedded URLs and Convert URLs to URL embeds.

In the Filter Processing order section, make sure to rearrange the filters so Convert URLs to URL embeds comes before Display embedded URLs. This kind of makes sense as you need to first convert the URL before you can display it! You may also want to drag the Align images below both of these filters if you want to be able to align the embed codes. To use the Align images you will need to make sure you have the alignment buttons added to your toolbar configuration.

Under Filter settings, you now need to allow in the Limit allowed HTML tags and correct faulty HTML section.

Still in the Filter settings section, you can specify an optional prefix which can be used to indicate what URLs to accept. This could be useful if you only wanted Twitter links to be used for example. If you don’t specify anything here, then all of the embed urls from any provider will work.

Click the Save configuration button and now create some content on your site. You can go to Content > Add content > Article and go to the Body field to see your new Embed button in action. Make sure you add some content then click the URL Embed button and paste in a link (the example below used a Twitter link).

Now when you save the page, it will show up exactly like you would expect an embedded Tweet to show up.

Feel free to try out different types of links, the next example uses a Youtube link.

That’s all there is to it! As you can see, it’s incredibly easy to use the Drupal 8 URL Embed module to embed Twitter, Youtube, Instagram, Spotify, and many more types of links directly in your Drupal content. Now go out and start sharing those links on your Drupal site!