How to show recent twitter tweets on your blogger

By : Follow Trends

On : 9/03/2015

In : Blogger Tips

0 comments

1. Log in to blogger and Go to Design >> Edit HTML

2 .Make sure u Click on "Expand Widget Templates"

3. Find this tag by using Ctrl+F </head> 

4. Paste below code before  </head> tag  

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript" charset="utf-8">

function showTweets(elem, username, number)
{
var html = '<ul>';


var tweetFeed = 'http://twitter.com/status/user_timeline/' + username + '.json?count=' + number + '&callback=?'
$.getJSON(tweetFeed, function(d)
{

$.each(d, function(i,item)
{
html+='<li>'+item.text+'</li>';
})
html+="</ul>";

elem.children().fadeOut('fast',function() {
elem.append(html);
})
})
}

$(function() {
$('#error').remove();
$('#preload').show();
showTweets($('#tweets'), 'your twitter username', 5)
});

</script>

<style type="text/css">
#preload {display: none;}

#tweets ul li{
list-style-type:square;
list-style-position:inside;
list-style-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjy4brnoIp8V8tKDyagbW7VO0VbV7byQWPNq-r2kIa2_YxiJUHpyKydLx2ktP6VKHfHOh8yaxbuVelvt4TUgH7htbWP5th5cpcZHy9YzWk3R8PXEh0XzvZ_dSgbLA5Y8xdDnLTWAN_TxjA/s1600/twitter.png');
margin:0 0 0;
padding:0 0 0;
}
</style>

5. Save your template.

6. Now Go to Design >> Page Element

7. Click  'Add a Gadget' and select 'HTML/Javascript'

8.Paste below code.  

<div style="font-size:12px;font-family:Arial;">
<div id="tweets">
<h3 id="error">There was a problem fetching tweets</h3>
<h3 id="preload">Currently loading your tweets...</h3>
</div>
<ul><li style="list-style-type:none;"><a href="http://www.twitter.com/your twitter username">Follow me on twitter</a></li></ul>
</div>

9.Replace your twitter username with you twitter username 

10. Save it . You are done.