How to Embed Twitter Timeline Widget on your Site

Published On :

Twitter has added a Embeddable Timeline Widget so that site owners can show a custom version of their Twitter timeline to the visitors. This includes search results, favourites and the basic timeline.

Twitter Timeline widget uses the same widget.js script which is currently used by all the other Twitter widgets viz – Follow button, Tweet button & the old Twitter Widget (this version is an update to that)

A few months ago we had seen how to embed tweets in WordPress, similarly today I will show you how to embed the new Twitter timeline widget on your site.

The steps are very basic and the Twitter timeline widget offers good number of customizations. So it won’t be a daunting task to embed it on your site or WordPress blog.

Embedding the Twitter Timeline Widget

Twitter Timeline Widget

Twitter Timeline Widget Configurations

  1. Go to the Create Widget page (you must be logged in).
  2. You’ll see 4 main tabs at the top under the heading ‘Choose a timeline source‘ — User Timeline, Favorites, List & Search.
  3. Select the one you want to put up for display on your site and fill in the required details like username (favourites list/keyword), height of the widget, link color, etc.
  4. If you want tailored suggestions (i.e. who to follow, similar interests, etc) from Twitter then leave the checkbox unchecked.
  5. On the right hand side a preview of the widget will be shown, so you can tinker with the options based on the result from time-to-time.
  6. Finally hit the ‘Create Widget‘ button and copy the HTML code from the textbox.
  7. The code will be similar to this if you are simply creating a widget which shows your timeline,
    <a class="twitter-timeline" href="https://twitter.com/dailyblogorg" data-widget-id="243685325371740161">Tweets by @dailyblogorg</a>
    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
  8. Since this isn’t a PHP code you can directly add it in WordPress as a widget. I don’t think you’ll be required to re-add the script part of the above code if you are already loading the widget.js script for the Tweet/Follow button. As I said earlier the script used is the same.

So that completes the tutorial. Tinker with the options in the Twitter timeline widget and embed it on your site.

Live Example of the Twitter Timeline Widget

If you have any doubts then leave a comment below. Looking forward to your views on this new addition (or rather update) by Twitter.

Share :
Tagged as : 17 Comments
About » Has written 231 Post(s) «

I'm a Web Designer/Developer, SEO'er and a Blogger who gives a few Blogging Tips in the form of posts/tutorials. Follow & Subscribe to my Blog if you feel it's worth it.

HostGator
Loader

17 Comments Comments RSS

  1. #

    This is really good step from Twitter and I like this widget. Its simple and works well to engage with readers. Planning to add one in sidebar of my blog.

  2. #

    Really Awesome Widget Thanks For sharing this :)

  3. #

    I have a few followers, so it would be kind of cool to show part of the timeline on my blogs. Thanks for sharing this tip.

  4. #

    Cool widget, I just created a personal twitter profile (I had profiles for my websites) and this might serve me well to get more followers.

  5. #

    Very cool Twitter Timeline widget! Thanks for sharing with us the step-by-step instructions on how to embed it.

  6. #

    Hi! I can’t seem to make it work. I pasted the script just above the /body tag and the other part on a div where I wanted the tweets to appear but I only get a Tweets by @betogess . Do you know why’s that. My website is andrehess.com

    • #

      Hmm..try placing both the scripts and the code at the same place. I think the widget script isn’t loading properly on the page, that is the reason you see only the text and no styling or javascript function.

    • #

      Well I had the same problem. Remove the “www” from your website url while configuring the widget in the twitter settings :-)

  7. Victor
    #

    I followed all the steps but finally it show only link. what’s wrong with that?

  8. #

    thanks for sharing this widget really useful information :)

  9. #

    Awesome Twitter Timeline widget! Thank you for sharing with us this step-by-step instructions on how to embed it.
    This is really a very useful information.

  10. #

    I am using Blogger blog. Can I use this the desired code into our sidebars too. BTW, it is a nice move by Twitter.

    Best Regards1

  11. #

    Is the old “twitter_update_list” no longer supported at all…? Is it possible to adapt the CSS for the widget?

  12. Paul
    #

    Any way to hack the CSS? That would make it absolutely perfect. Since it’s in its own iframe a local CSS file won’t affect it at all… Why is Twitter denying us this?

  13. Redza
    #

    I followed all the steps but finally it show only link. what’s wrong with that?

  14. #

    Its Informative post since last 4 months i am trying to add twitter widget to my blog. As it was my first blog and i am new to blogging i don’t know thanks for sharing it !

Post a Comment

Your email is never published nor shared. Required fields are marked *

Also, use your Real name in the 'Name' field. Comment names with only keywords will be trashed.