Upgrade Your Drupal Skills

We trained 1,000+ Drupal Developers over the last decade.

See Advanced Courses NAH, I know Enough

Drupal 8 URL Embed Module

Parent Feed: 

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!

Author: 
Original Post: 

About Drupal Sun

Drupal Sun is an Evolving Web project. It allows you to:

  • Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
  • Facet based on tags, author, or feed
  • Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
  • View the entire article text inline, or in the context of the site where it was created

See the blog post at Evolving Web

Evolving Web