Site icon StartFunction

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://atomic-temporary-176953424.wpcomstaging.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.

Exit mobile version