How To Add Recent Tweets Widget In Blogger

Advertisements
Do you want to create a recent tweets widget that displays all the tweets you received from others? It will not only increase your Social exposure, but readers will also take benefits from it. This widget is not like our previous Twitter Slider. Though, the functionality is almost identical, but the styling is entirely different. This Live Tweet widget displays all the recent tweets that a person receives on a certain Twitter username. This widget works on JavaScript and with the help of Twitter API it derives all the tweets, then with the help CSS StyleSheet it becomes a perfect Live Tweets widget. In this article, we will be sharing a Recent Tweets widget for Blogger users, but WordPress users can also implement it on their websites.





How Does Recent Tweets Widget Works:

Since, we believe in simplicity. Therefore, our developers have design this widget with splendid functionalities. It is an automatic Live Tweet widget that displays tweets of different users. For Example, a person selects #mybloggerlab tag from the widget’s setting. Now whenever, any user will use (#mybloggerlab) tag in their tweets. This widget will automatically fetch and display them. Following is the screenshot of Recent Tweets Widget.

Features of MBL Recent Tweets Widget:

  • It will display all the tweets that a person will receive from different users. 
  • This widget is interactive. Therefore, tweets will update instantly.
  • It has a compact look which will surely increase the beauty of a website.
  • It works perfectly on almost each and every browser i.e. Chrome, Internet explorer and etc.
  • This widget is highly compressed. Thus, it not affects a person’s site Speed.

How to Install Recent Tweet Widget in Blogger:

The steps are put into words in such a way that both blogger and any ordinary person can easily integrate this widget in their website. Follow the following instruction. 

  • Go to Blogger >> Template.
  • Take Backup of Template.
  • Then Select Edit HTML >> Proceed.
  • In The Template Search For ]]></b:skin> and above it paste the following Style sheet Code.
#mblfeedtop {
width: 280px;
height: 79px;
margin-bottom:-6px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjw4SY-O6wYtL7qxAmD6VIKCMD9zLLCUNNQn4JJ585H7Pu54NSbWI-QHloV4oxSmU6Xph1KurJ8ieFqg3ES_hbAoB-dWssni_RtNBnuKlAwNhxh2k4mwAoGMvlwafx0fxBu4qHAPxalYcE/s1600/MBL_TOPPER.png) no-repeat;
}

#mblfeedbottom {
width: 280px;
height: 7px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhO12Ahzp39hR4rjDieHDvtC7rvjtp2RbUI_N6ZOwpQwmtvHeyQyUk52j7TS-EBjIA5fTepiFTHOXIZlPsUj6J_MpNLk0u2Em13i2ep3jFMtzLhBPi1zSbsP4jpXVy3GchIB0Efxd5-GEw/s1600/MBL_BOTTOM.png) no-repeat;
}

#mblfeedinner {
     width: 280px;
     font-family: Arial, Verdana, sans-serif;
     font-size: 12px;
     color: #000000;
}

.ttw-date {
     color: #949494 !important;
     display: block;
}

#mblfeedinner a {
     text-decoration: none;
     color: #095f8f;
}

#mblfeedinner ul {
     margin: 0;
     padding: 0;
     list-style: none;
}

#mblfeedinner ul li {
background: #63defa url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjh6UthKjzlhx1cNVlH-PKLSSrU7ZDD2v2PIl2UPlxkFLTBqpsnUw__P8A-cGGiD5sG9QRt5ysZLMFGhlFr0YgitPk-pIkA_6FRrDypa7SE8GH4BsxfPRoJO9-PQx_YlFDOfvUPP_8dkiw/s1600/MBL_DIVIDER.png) repeat-x;
padding: 11px 9px;
min-height: 42px;
}

.ttw-body {
     display: block;
}

#mblfeedinner img {
     margin-right: 10px;
     float: left;
}

#mblfeedinner strong {
     margin-right: 5px;
}
  • Again in the template search for </head> and above it paste the following JavaScript code.
<script type="text/javascript" src="https://mybloggerlab.googlecode.com/files/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="https://mybloggerlab.googlecode.com/files/jquery.jtweetsanywhere-1.3.1.min.js"></script>
 
    <script>
/*$(document).ready(function(){
    $('div#mblfeedinner').twitterTrackbacks({
        url:'http://twitter.com/mybloggerlab',
        n:4,
        show_n:0,
        image_width: 42,
        reply: '',
        retweet: '',
        info: '',
        show_author: 1
    });
});
$(document).ready(function(){
      $('div#mblfeedinner').relatedTweets({
         query: 'mybloggerlab',
         realtime:0,
         n:4,
         image_width: 42,
         show_source: 0
      });
   });
*/
$(document).ready(function(){
    $('#mblfeedinner').jTweetsAnywhere({
        username: '',
        searchParams: 'q=mybloggerlab',
        count: 3,
        showTweetFeed: {
            showProfileImages: true,
            showUserScreenNames: true
        },
        showTweetBox: {
            label: '<span style="color: #303030">Spread the word ...</span>'
        }
    });
});
</script>
  • Replace mybloggerlab with your twitter user name.
  • Now Save the template and proceed to the next step.

How To Add Recent Tweet Widget In Blogger:

  • Go To Blogger >> Layout >> Add a Gadget.
  • Now From the List Select Add HTML/JavaScript.
  • Now within the HTML Box paste the following Code.
            <div id="mblfeedtop"></div>
            <div id="mblfeedinner"></div>
            <div id="mblfeedbottom"></div>

All Done: After pasting the above HTML Coding go ahead and save the template by pressing Save Bottom. Now visit your website and enjoy the unforgotten perfection. 

From the Editor’s Desk:

Hope you guys have adored today’s Tutorial. Since, the PageRank Update is near why not get a Dofollow Backlink from Pinterest. According to our estimates, Page Rank will be updated in between 10 November to 5 December. What are your thoughts about this widget? What is your expectation about the Page Rank Update? Don’t forget to leave your precious comment. Take a lot care of your families till then Peace, Blessings and happy tweeting. 
Advertisements

The Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).

Comment With:
OR
Choose Wisely!

15 comments

November 4, 2012 at 5:54 PM

hmm good work bro ... please make it for wordpress also if u can :)

InfoTech Pakistan

November 4, 2012 at 9:03 PM

Great design thanks for sharing this :) cool


Regards
Rahul Kashyap
Blog: SDMMovies.com | Movies4u.us

November 4, 2012 at 10:45 PM

Nice One I was Looking For it.

Get Full Access on Comment Box of Blogger

Thanks & Regards,
Hemant Verma

November 4, 2012 at 11:37 PM

Of course, what a magnificent blog and informative posts, I will bookmark your site.Best Regards! Remove Background .

November 5, 2012 at 2:46 AM
November 6, 2012 at 1:25 AM

Good widget , But I really liked the related post widget which you are using on your blog ! Can you give a tutorial on that !
I Recently Posted
Earn Money by clicking and sharing photos on iPhone

November 6, 2012 at 6:01 AM

thanks for post. I need ur little help again! :P

Please tell me how to remove/delete a label from posts in new blogger other than going to each post and removing.

thanks,
MyPremiumTricks

Editorial Team MOD
November 6, 2012 at 9:17 AM

Dude, I Told you before and I am telling it again that you have to edit labels manually. There is no option to remove them in just one click. Peace

Editorial Team MOD
November 6, 2012 at 9:18 AM

We have already shared it. Check out the following tutorial

http://www.mybloggerlab.com/2012/10/tooltips-related-post-widget-with-thumbnails.html

Peace

IM
December 24, 2012 at 1:28 AM

good tips. how to change the colour?

Editorial Team MOD
December 24, 2012 at 6:49 AM

Replace #63defa With your Personalized Color. Peace

December 30, 2012 at 4:34 PM

Hi, I did this, but only the live tweets bit is showing up, not the actual tweets themselves? thank you

Editorial Team MOD
December 31, 2012 at 12:37 AM

It Displays All the Tweets That a Twitter Account Has Received from different twitter users.

March 20, 2013 at 9:48 PM

Twitter's API Changed Now it Is not Working

Editorial Team MOD
March 21, 2013 at 2:14 AM

Its Working fine mate. Preview: http://mbldummy1.blogspot.com/

Post a Comment

We’re eager to see your comment. However, Please Keep in mind that all comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.

Helping You to do Cool Things With Blogger Since 2012™.

© Copyright 2012 - 2018. MBL Networks, All Rights are Strictly Reserved.