How to Add Twitter Feeds Widget to Blogger and WordPress

0

Social Medias as we all know have become one of the major source of traffic for blog and website owners but basically I don’t think that is what it was actually created for. What Social Media literally mean from onset is a network or platform where individuals can interact and share ideas. In other to make it easier for website and blog owners to share ideas and information across on the internet, these Social Medias started making available widgets which website and blog owners can use on their web and blog pages.

One of such widgets is the Twitter feed widget which when installed in a web or blog page, displays the most recent tweets in the authors account. The widget contains a follow button at the top right corner of widget and also a feature which users in your blog can use to tweet you without having to leave the blog. To add Twitter tweets widget to your Blogger or WordPress blog, simply follow the procedures as I have outlined below;

How to Get the Twitter Timeline Widget Code:

  • Visit Twitter Publisher page by clicking HERE.
  • Move down the page to ‘Or browse your options below‘ and click on ‘Embedded Timeline‘.

Twitter timeline publish for wordpress and blogger

  • On the new pop up page, copy https://www.twitter.com/TWITTER-HANDLE and paste into the box provided. Make sure you replace TWITTER-HANDLE in the URL above with your Twitter handle. The URL https://www.twitter.com/educativehelper is that for Educative Helper.

Twitter timeline publish for wordpress and blogger 2

  • Once you have entered the URL of the Twitter page you wish to display its timeline, click on ‘Preview‘ to display the preview of the tweets from the Twitter handle.

Twitter timeline publish for wordpress and blogger 3

  • When you click on the Preview button, a code will be generated which you will need to copy and paste where ever you wish to have the Twitter timeline appear in your Blogger or WordPress site. Click on the Copy Code button to copy the code provided.

Twitter timeline publish for wordpress and blogger 5

Customization:

  • The initial code provided actually gives a very lengthy timeline. If you wish to resize the length of the widget and have it appear in a box like form, click on ‘Set Customization Options’ to customize the widget.

Twitter timeline publish for wordpress and blogger 4

  • Add a height and Width to resize the widget to suite your Blogger or WordPress site then click on Update.

Twitter timeline publish for wordpress and blogger 6

Next follow any of the steps outlined below depending on the platform that powers your site.

How to Add Twitter Timeline Widget to Blogger:

  • Login to your Blogger Dashboard.
  • Locate and click on Layout on the Blogger dashboard.

Blogger Layout

  • Next click on Add a Gadget on your Blogger layout. The Add a Gadget link should depend on where you want the Twitter timeline to appear.

Blogger Add a Gadget

  • Select ‘HTML/JavaScript from the pop-up page that will come up.

Blogger HTMLJavaScript

  • Now paste the code which you have copied from How to Get the Twitter Timeline Widget Code above into the HTML/JavaScript box.
  • Click on ‘Save‘ and you are done.

How to Add Twitter Timeline Widget to WordPress:

This can be achieved using a WordPress plugin but if you do not want to make use of a plugin to achieve this result, then follow the instructions below;

  • Login into website’s WordPress dashboard.
  • Navigate to Appearance >>> Widgets.

WordPress Dashboard - Appearance and Widgets

  • On the widgets page, scroll to Custom HTML and click on the drop down arrow besides it.

WordPress Widgets_Custom HTML

  • When the drop down appears, locate and select the side you want the Twitter timeline to appear and then click on Add Widget.

WordPress Widgets_Add WIdget

  • Next paste the Twitter timeline code you copied earlier and paste into the Custom HTML box. You don’t need to add a title but if you want, you can add one in the space provided. Once you are done, click on Save to apply your changes.

WordPress Widgets_Custom HTML_Add code

  • Finally click on Done to confirm that you have finished adding the widget.

WordPress Widgets_Custom HTML_Add Code_Done

Now go to your Blogger or WordPress blog page to see your tweets appearing at the sidebar or where ever it is you dragged the gadget/widget to.

Adding to Other Webpages:

With the code generated, you can decide to add any Twitter timeline of choice without going to your the Twitter publish page. All you need to do is;

  • Copy the code snippet below and paste anywhere you want to the Twitter timeline to appear.
<a class="twitter-timeline" data-width="500" data-height="500" data-theme="light" href="https://twitter.com/TWITTER_HANDLE?ref_src=twsrc%5Etfw">Tweets by WEBSITE NAME</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
Changes to Make:
  • Replace TWITTER_HANDLE by the handle of the Twitter user you want to add his/her time line.
  • Also, replace WEBSITE NAME with the name you want.

Sharing they say is caring. Make sure you share this post with your friends by clicking on the share buttons below.

LEAVE A REPLY

Please enter your comment!
Please enter your name here