Make embedded tweets in WordPress responsive

WordPress allows you to embed tweets by pasting the tweet URL into your posts. You get a nice card with the tweet and all relevant details. Sadly, this card will not work on responsive sites due to a fix width applied by Twitter. In this post we’ll see how to remove it and also make our embedded tweet properly responsive.

Overview

Before the tweet is processed to show the card with the author, Twitter avatar, follow button and other meta data, it’s displayed as a plain blockquote HTML element with the fixed width attribute set, which by default, is 500px. Of course, this fixed width will break our responsive layout, so basically we need to remove this attribute so the processed tweet card appears with no fixed width.

After removing it, we will apply a simple CSS style so it works responsively with the rest of the site dimensions.

WordPress oEmbed and filters

Our tweet is placed using oEmbed, a technology used by WordPress that allows us to insert content from other sites just by placing the link in our post editor. WordPress will automatically query the provider site (which can not only be Twitter, but YouTube, Vimeo and others) and get the HTML to insert in our site.

The HTML returned by the provider site can be processed using one of the filters WordPress provides to do so and change the markup. We’re going to use the filter oembed_result, which is run after obtaining the HTML from the oEmbed provider and before it’s saved to the cache. The advantage of this is that the filter won’t have to be executed each time the site is visited, resulting in a faster response and of course, faster loading times.

Filtering the tweet

This code should be placed in the functions.php file of your theme

<?php
/** Remove fixed width from embedded tweets. First step to make them responsive. 
 * @param string $html HTML that should be used to embed 
 * @param string $url The URL to the content that should be attempted to be embedded. 
 * @param array $args Optional arguments. 
 * @author Elio Rivero 
 * @link https://startfunction.com 
 */ 
function startfunction_oembed_result($html, $url, $args)
{
    // Check if it's a tweet looking for 'twitter' in the url pasted in the post
    if (stripos($url, 'twitter')) {
        // Before the tweet is processed, it's displayed as a blockquote // with its width attribute set, so let's remove it. 
        return preg_replace('#width="(.*)"#', '', $html);
    }
    // Otherwise return the HTML as is. 
    return $html;
} 
// Filter the result of the oEmbed extraction. 
add_filter('oembed_result', 'startfunction_oembed_result', 10, 3);

The $url parameter is the link to the tweet we’re embedding. We’re checking if it’s from Twitter, since otherwise we don’t want to run this. We’re using str_replace to look for the string width="500" replacing it with a empty string.

Making the tweet card responsive

We still need to add some CSS to make it responsive, so insert the following in your theme (or plugin) stylesheet

#main .twitter-tweet-rendered, #main .twt-border {
    max-width: 100% !important; 
}

and just with this your embedded tweets will be responsive.

9 thoughts on “Make embedded tweets in WordPress responsive”

  1. Hi Michael, this is tested code (of course, in my local and online servers, yours might be different) so maybe you mispelled something or put it outside the tags in function.php??

    1. Yes, you can parse YouTube or other Oembed providers supported by WordPress using for example this code
      [php]
      if( preg_match(‘#youtube|youtu.be|vimeo|dailymotion|blip|hulu|funnyordie#i’, $url) ) {
      return ‘<div class="entry-video">’ . $html . ‘</div>’;
      } elseif( stripos($url, ‘twitter’) ) {
      return str_replace(‘width="500"’, ”, $html);
      }
      [/php]

  2. This is a better way:

    [php]
    add_filter(‘oembed_fetch_url’,’twitter_oembed_no_width’,10,3);
    function twitter_oembed_no_width($provider, $url, $args) {
    if( stripos($provider, ‘twitter.com’) ) {
    $provider = remove_query_arg(‘maxwidth’, $provider);
    }
    return $provider;
    }
    [/php]

    This modifies the initial oembed fetch to not include the “maxwidth” parameter when sending to Twitter. This makes the Twitter response not include the width in the returned result.

    This filter is new to WordPress 3.5, so it won’t work in older versions. Also, because oEmbed results are fetched upon post-save, any pre-existing posts with tweets in them will need to be re-saved one time for their results to be updated from Twitter’s oembed access point.

  3. Hi Samuel, thanks for dropping by and the tip. I wasn’t aware of that new filter introduced in WP 3.5 which is why I initially wanted: a filter to specify parameters sent in oEmbed request. Thanks!

Leave a Reply