-
Recent Posts
Categories
Archives
TAGS
4
Mar
How to add a Twitter feed to your website including retweets
This is a pretty simple one, but if you do a Google search you may find yourself wading through loads of conflicting instructions or different ways of approaching it. You could also go visit the Twitter API docs but this may confuse you even more.
I’m just going to keep it dead simple. Ok let’s get on with it…
Add this container div to your HTML
<div id="twitter_update_list"> </div>
Note: Make sure you leave the div id as “twitter_update_list”. The javascript callback will be looking for this id when it populates the div with your tweets.
Add the following javascript calls before the closing </body> tag
<script src="http://twitter.com/javascripts/blogger.js" type="text/javascript"> </script> <script src="http://api.twitter.com/1/statuses/user_timeline.json?screen_name=webtwibe&include_rts=1&callback=twitterCallback2&count=1" type="text/javascript"> </script>
Adjusting the API call to suit your needs
This is the API call that goes off and grabs our tweets for us.
http://api.twitter.com/1/statuses/user_timeline.json?screen_name=webtwibe&include_rts=1&callback=twitterCallback2&count=1
To update it for yourself, you’ll need to update the screen_name value to the name of your twitter account. As you can see, I’m using webtwibe.
If you want to include retweets, set the value include_rts to 1 or true.
If you want to exclude retweets, set the value include_rts to 0 or false.
The callback value needs to stay put. This is the ‘callback=twitterCallback2‘ reference you see above. This will format the incoming feed for us.
Finally, you can set the number of tweets you want to read in. Adjust the count value to suit your needs. In my example, I’m just pulling in one little tweet.
Filtering the Twitter feed
Each tweet returned in the feed comes with properties that tell us what type of tweet it is. Using these properties we can filter out things like retweets, @replies, tweets that contain certain keywords, etc.
The following example shows how to filter out @replies from your feed.
This code is taken from the Technical Mangroves Blog, it’s a function that performs a filter before passing the results to the original callback twitterCallback2.
Paste this code into your HTML (in the <head> if you like):
<script type="text/javascript">
// <![CDATA[
function filterCallback( twitter_json ) {
var result = [];
for(var index in twitter_json) {
if(twitter_json[index].in_reply_to_user_id == null) {
result[result.length] = twitter_json[index];
}
if( result.length==5 ) break; // Edit this to change the maximum tweets shown
}
twitterCallback2(result); // Pass tweets onto the original callback. Don't change it!
}
// ]]>
</script>
You’ll need to change the callback name in the API call to filterCallback like so:
http://api.twitter.com/1/statuses/user_timeline.json?screen_name=webtwibe&include_rts=1&callback=filterCallback&count=10
You might need to push the value of count up a bit to compensate for filtered tweets. Set the exact amount of tweets you want to display in the filterCallback function where you see the result.length==5. If you want to show 3 tweets, change the 5 to a 3. Easy.
This function could be extended to provide much more comprehensive filtering. When I have time I’ll create a function that can do this.
Thanks for Technical Mangroves for the their work on the function filterCallback.
Thank you WebTribe. This is great!
One thing, excluding retweets isn’t working for me, even with the value set to 0.
Thanks Joshua,
The API docs state that retweets will not be included unless the include_rts parameter is set.
Try dropping it from the call like so and see if it helps:
http://api.twitter.com/1/statuses/user_timeline.json?screen_name=webtwibe&callback=twitterCallback2&count=1
Note: The only issue I’ve found with this is that a blank value is returned where a retweet would normally be. I haven’t spend too much time working out why, but if I figure it out I’ll share it.
Thanks WebTribe.
Works perfectly.
Is there any way that you can add retweets on your twitter feed but no display @replies?
Hi Simone,
I’ve updated the post with a section ‘Filtering the Twitter feed’. Follow the instructions and you should be able to filter out @replies from your feed.
Tom.
Works great! In search to find a solution in showing the retweets this is the only site which have the right answer. Thanks!
Hi Tom,
Unless I’m being particularly dense, and have missed it, is there a way of having the Twitter feed links open in a new window – mine ‘leave’ the site?
Thanks,
Alex
Hi Alex,
There’s two ways you could it.
Save a copy of the file http://twitter.com/javascripts/blogger.js and edit the twitterCallback2 function. Add target=”_blank” to any anchors in the HTML markup within the function. Once you’ve done that, include your blogger.js file in your page and that should be enough.
The other option is to use jQuery (if you have it included in your page) to update the anchors for you.
Try using $(‘#twitter_update_list a’).attr(‘target’,'_blank’);
You may need to edit the above code to suit your own configuration.
Good luck!
Tom.
Hey Tom,
I just wanted to verify for you that the jQuery in your comment works just great!
Here is the full code for those who are curious/new to jQuery:
$(document).ready(function() {
$(‘#twitter_update_list a’).attr(‘target’,'_blank’);
});
I put this right after the second Twitter script mentioned in the post.
Thanks for the feedback Naomi, and thanks for putting up the full code for jQuery beginners.
Hey Tom,
I have something weird going on. I put the code the way you described it, but it won’t filter out the replies. If I have e.g. 20 replies on top of my stream and I want to feed only the regular tweets and retweets to my site, I won’t get anything shown.
Here’s the code. Not sure what I’m doing wrong.
http://pastebin.com/WQPnz5nJ
Hi Iva,
You’re really close. You are missing the parameter callback=filterCallback in your query string.
Your twitter request should look like this:
https://api.twitter.com/1/statuses/user_timeline.json?include_entities=true&include_rts=true&screen_name=jfrusciantesite&count=10&exclude_replies=true&callback=filterCallback
That should fix it.
Tom.
It worked. I actually forgot to put it in the paste I showed you, but the weird thing is that I had it there before, just in a different place. Looks like the order mattered.
Thank you so much and happy New year 2012.
No worries Iva, glad it worked. Good luck in 2012!