How To Add Recent Tweets Widget In Blogger

Socialize It →

Tweet

16

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.

RECENT TWEETS (DEMO)

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

About the Editorial Team

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