Embed your twitter timeline in WordPress

Posts

Inserting your own Twitter timeline into the site might be a good idea, and doing so in WordPress is an extremely quick and easy process.

Personally, I’m not a big fan of the Twitter timelines visible on websites. Unless you’re really not very active and followed on twitter, in my opinion you could do without it. There are many other things that can take place on a website, and Twitter discussions can easily stay on Twitter.

However, if you want to, I’ll show you how to do it with WordPress

Embed the timeline

First, let’s put in the timeline.

From the Appearance -> Widgets menu add a Custom HTML widget to your sidebar (or where you want the Twitter timeline to appear).

The code is extremely simple

<div class="twitter-block">
    <a class="twitter-timeline" href="https://twitter.com/your_username">
Tweets by @Your_Username
    </a>
</div>

Obviously replace your_username with your Twitter username

Add JavaScript

To be able to work you need a very small JavaScript script provided directly by Twitter, which will turn the link into the actual timeline.

window.twttr = (function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0],
        t = window.twttr || {};
    if (d.getElementById(id)) return t;
    js = d.createElement(s);
    js.id = id;
    js.src = "https://platform.twitter.com/widgets.js";
    fjs.parentNode.insertBefore(js, fjs);

    t._e = [];
    t.ready = function(f) {
        t._e.push(f);
    };

    return t;
}(document, "script", "twitter-wjs"));

At this point you should see your timeline!

Customize the timeline

To customize the timeline there are two ways: use the options provided by twitter (quite limited but in some cases sufficient) and javascript.

Let’s see them

Customize with options

We have seen that we use a simple <a> link to insert the timeline. We can pass to the link some parameters to customize the style.

  • data-width and data-height allow us to manage the size of the timeline.
  • data-chrome callows us to manage the other customizations available
    • noheader: removes the header of the timeline
    • nofooter: removes the footer of the timeline
    • noborders: removes the edges around the timeline as well as the edges that divide the tweets
    • noscrollbar: Remove the scrollbar
    • transparent: removes the background color of the timeline making it transparent
  • data-tweet-limit allows you to select how many tweets should be displayed in the timeline

Here is an example of a timeline with all options

<div class="twitter-block">
    <a class="twitter-timeline" 
       href="https://twitter.com/your_username"
       data-width="300px"
       data-height="300px"
       data-chrome="noheader nofooter noborders noscrollbar transparent"
       data-tweet-limit="3">
Tweets by @Your_Username
    </a>
</div>

Customize with JavaScript

There are cases where standard customizations are not enough. At this point, customizing the style simply with CSS becomes complex, as the timeline is inserted into the page in an iframe.

As you may have noticed, in the examples I put the link <a> in a <div> with class="twitter-block", this will allow you to have a minimum of control over the style using CSS and be able to refer us to the timeline using JavaScript.

If you want to change the style of the timeline itself, then you will need to use JavaScript (in this example Jquery).

jQuery('.twitter-block').delegate('#twitter-widget-0','DOMSubtreeModified propertychange', function() {
    
    customizeTweetMedia();
});

var customizeTweetMedia = function() {

    
    jQuery('.twitter-block').find('.twitter-timeline').contents().find('.timeline-Tweet-media').css('display', 'none');
    jQuery('.twitter-block').find('.twitter-timeline').contents().find('.TweetAuthor').css('display', 'none');
    jQuery('.twitter-block').find('.twitter-timeline').contents().find('.timeline-Body').css('border', 'none');
    jQuery('.twitter-block').find('.twitter-timeline').contents().find('img.Avatar').css('display', 'none');
    jQuery('.twitter-block').find('.twitter-timeline').contents().find('span.TweetAuthor-avatar.Identity-avatar').remove();
    jQuery('.twitter-block').find('.twitter-timeline').contents().find('span.TweetAuthor-screenName').css('font-size', '1.5em');
    jQuery('.twitter-block').find('.twitter-timeline').contents().find('span.TweetAuthor-screenName').css('font-family', 'Montserrat');

    jQuery('.twitter-block').find('.twitter-timeline').contents().find('.timeline-TweetList').bind('DOMSubtreeModified propertychange', function () {
        customizeTweetMedia(this);
    });
}

As you can see it’s very simple, in this case I modified the edges, hidden the part related to the author and the profile image, hidden the images from the tweets and modified the font.

I hope this short post will be useful to show on your site your Twitter timeline.


Photo by Szabo Viktor on Unsplash