Create a custom Twitter widget for your website

Posted by Libby Fisher on Friday, April 15th, 2011 in Useful Scripts and Codes, Web Design
NOTE: As of Oct. 11, 2012, this line of Javascript that we were using for this widget no longer works:

<script src="http://twitter.com/statuses/user_timeline/YOURUSERNAMEHERE.json?callback=twitterCallback2&count=4" type="text/javascript"></script>

If you built a Twitter feed following the instructions in this post and it no longer pulls in tweets as it should, please update the line above to now read:

<script src="https://api.twitter.com/1/statuses/user_timeline/YOURUSERNAMEHERE.json?callback=twitterCallback2&count=4" type="text/javascript"></script>

____________________________________________________________________

Creating your own custom Twitter widget for your website is a lot quicker and easier than you might think. Here are all the codes you need to do it.

Note: once you have the Twitter feed up and running, you can find several several different styles of custom Twitter widgets that are all ready to put on your website here.

To create your own Twitter feed from scratch, first you will want to insert the Javascript that makes the whole thing work. Copy and paste this line of code into your website, preferably just before the closing <body> tag:

<script src="http://twitter.com/javascripts/blogger.js" type="text/javascript"></script>
<script src="https://api.twitter.com/1/statuses/user_timeline/YOURUSERNAMEHERE.json?callback=twitterCallback2&count=4" type="text/javascript"></script>

Replace the words YOURUSERNAMEHERE in the above example with your own Twitter username. Change the number 4 after “count” to the number of tweets that you want to display.

Next, copy and paste the following html into the web page where you want the Twitter widget to display:

<div id="twitter">
<div id="twitter_t"></div>
<div id="twitter_m">
 <div id="twitter_container">
 <ul id="twitter_update_list"></ul>
 </div>
</div>
<div id="twitter_b"></div>
</div>

And, finally, copy and paste the following CSS into your website’s stylesheet:

#twitter {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
width:430px;
border:1px solid #c9c9c9;
}
#twitter_t {
width:405px;
height: 44px;
background:#c68aeb url(yourimagehere);
color:#fff;
text-shadow:.5px .5px #333;
font-size:18px;
font-family:Candara;
padding-top:20px;
padding-left:25px;
}
#twitter_m {
width: 400px;
padding: 0 15px;
background:#f7effc;
}
#twitter_container {
min-height:45px;
height:auto !important;
height:40px;
padding-bottom:5px;
padding-top:5px;
}
#twitter_update_list {
width: 413px;
padding: 0;
overflow: hidden;
font-family: Georgia;
font-size: 14px;
font-style: italic;
color: #31353d;
line-height: 16px;
font-weight:bold;
margin-left:-13px;
}
#twitter_update_list li {
width: 400px;
list-style: none;
padding:15px;
border-bottom: dotted 1px #ccc;
}
#twitter_update_list li a {
color:#631891;
text-decoration: none;
}
#twitter_update_list li a:hover {
color: #31353d;
}
#twitter_b {
width: 430px;
height: 29px;
background:#c68aeb url(yourimagehere);
}

Of course, you will probably want to edit the CSS codes for your Twitter widget.

And that, my friends, is all it takes to create a custom Twitter widget for your website! :) Have fun, and let me know if you run into any issues.

If you want to remove the time stamp from the tweets in your custom Twitter feed, please check out my post on Icode4you.net – http://icode4you.net/creating-a-custom-twitter-feed-how-to-remove-the-time-stamp-from-tweets.

Make sure you also check out another post I wrote that has the styles for several different custom Twitter widgets that are all ready to incorporate into your website!

UPDATE: You can also find the codes and instructions on how to create a Twitter feed of the search results for a certain term at Icode4you.net.

0
Shares

110 Comments

  1. Peter says:

    Doesn’t seem to work for me :(

    • Libby Fisher says:

      Hi Peter,

      Can you post a link to or email me the page that you are working on? I had one other reader mention that it wasn’t working but through email correspondence, we were able to figure it out. My email address is libby@libbyfisher.com. Hope to hear from you!

      Thanks!

      ~Libby

  2. marie says:

    I cannot get this code to validate in http://validator.w3.org. It says Line 149, Column 101: cannot generate system identifier for general entity “count” as the main problem. There are 5 errors with this one line.
    …keyetc.json?callback=twitterCallback2&count=4″ type=”text/javascript”></script…

    Any ideas on how to fix this?

  3. Ross Dunlap says:

    i have the script at the top follow by css then the html code.. I can get the css to work but cannot get the feeds to pull in.. any ideas..

  4. Jessie says:

    Hi Libby,

    Thanks a lot of the above tutorial. It’s exactly what I need. However, I can’t figure out how to make tweet feeds links open in a new window. Can you please help with this?
    Thanks in advance.

    • Libby Fisher says:

      Hi Jessie,

      Good question, I will look into that and get back to you. Thanks!

      ~Libby

    • Libby Fisher says:

      Hi Jessie,

      Ok, here is the script you can add to a javascript file to make the external links in your web pages open in a new window:


      /*
      Kevin Yank
      http://www.sitepoint.com/authorcontact/48
      */
      function externalLinks()
      {
      if (!document.getElementsByTagName) return;
      var anchors = document.getElementsByTagName("a");
      for (var i=0; i {
      var anchor = anchors[i];
      if(anchor.getAttribute("href"))
      anchor.target = "_blank";
      }
      }
      window.onload = externalLinks;

      Just copy and paste that code into a text editor, save it as a javascript file, and then call it in your web page's < head > section. You can also add it directly to your web page's < head > section by putting it inside < script language=javascript > < /script > tags.

      Please let me know if that doesn't work for you. Thanks!

  5. bos says:

    fantastic! Cool! Straight forward and simple. Works for me. Thanks so much.

    Pls how can I make the links in my feed to point to a new tab/new window when the user clicks. Also how can I remove the timestamp and leave only my tweets. Thank you as I wait for your help.

  6. bos says:

    Thanks for the quick assistance. That’s record breaking. The links didn’t open a blank window. Can you point me to anything am missing or I have not done right.

    Please find below the insertion.
    ………
    if (alltags[i].className==”twitter”)
    linksarray[inc++]=alltags[i]
    if (alltags[i].className==”twitter”){

  7. Libby Fisher says:

    Hi,

    Yes, I received your email and I got your Twitter feed working. Here is a link to the working feed – http://libbyfisher.com/Twitter/twitter.html. I think the reason it was not working is because the Javascript to make the links open in a new window was not directly before the closing < body > tag, and also you had not added class=”twitter” to < div id="twitter" >. Once I made those two changes, the feed worked correctly.

    Thanks!

    ~Libby

  8. bos says:

    Thanks libby I got it. Please how I can remove the timestamp. It will be quite sexy you know. Please I hope I’m not asking for too much.

  9. Mark says:

    Thanks man, worked a treat!

  10. Ryan Smith says:

    Love this!!!! Everything thing was working, and I was doing a lot of CSS customization— now the feed isn’t showing up at all—- I deleted everything I did and reset it to above— it the feed never showed up again.. ideas?

    • Libby Fisher says:

      Hi Ryan,

      Could you please send me a link to the page you are working on or copy and paste the source code and send it to me? Then I will take a look at it and try to get it working for you. Thanks! Feel free to email me at libby@libbyfisher.com if you want to.

  11. Hi Libby,

    Thank you very much for this code. It works perfect!

  12. Lori says:

    Thank you so much for this solution! One question: how do I increase the number of tweets displayed (right now it’s pulling in 5 or 6, but I’d like to display more.) Thanks!

    • Libby Fisher says:

      Hi Lori,

      To display more tweets, just change the line of Javascript from this:

      callback=twitterCallback2&count=4

      To this:

      callback=twitterCallback2&count=6

      You just have to change the number after “count.”

      Let me know if that doesnt answer your question. Thanks for commenting!! :)

  13. idham says:

    Are you have demo page?

  14. Rob says:

    Awesome tutorial, got it working & customized in no time. The new site is still under construction so I haven’t uploaded anything yet. One question, is there a way to include your twitter avatar in both the header, and in the tweets as on the actual twitter page?
    Thanks Libby!

  15. James says:

    Hey,

    This isn’t working for me. I’m getting Uncaught TypeError: Cannot set property ‘innerHTML’ of null for twitterCallback2.

    Any ideas?

  16. alessandro says:

    Thank you for this… but doesn’t work with me… hope to wrong. Please help.

    • Libby Fisher says:

      Hi Alessandro,

      What part of it is not working? If you send me a link to your page, I can try and help figure out what’s going on.

      Thanks!

  17. T. C. says:

    Hello,

    I have a small problem with the code. My tweets aren’t contained in the box. What should I change?

    Thanks!

    • Libby Fisher says:

      Hi T.C.,

      I am guessing the problem is a simple CSS issue. Can you send me a link to the page you are working on so I can take a look? You can either post it here or email it to libby@libbyfisher.com. Thanks!

  18. waterpearls says:

    I always wished to have a custom twitter widget for my website and I am happy to find how to create it on this post.

  19. Joost says:

    Great post! I just had one question.
    I would like to put 2 different customized twitter live feeds on my page. Is this possible? (for example from twitter and CNN)
    I was thinking about giving the scripts ID or something but I havent managed to get it working yet.

  20. NS says:

    Was having trouble getting tweets to display on test server, turns out Ghostery was blocking it. I would imagine this would happen with noscript as well?

  21. Kriss says:

    Hi Libby,

    how to get users post image, can you guide me

    Thanks
    Kriss

  22. Breahna says:

    Hi Libby,

    Thanks so much for this! It works perfectly!

  23. Ben says:

    Hi Libby,

    This is a great piece of code thanks!
    I’m just having one bit of trouble – it’s only displaying 1 tweet at the mo, even though the code is set to 4.

    I suspect it’s because the next three tweets in the feed are retweets… any suggestions?

    Thanks,
    Ben

  24. itchy says:

    Hi Libby,

    Works well. thanks for the post.

    Just a question though, can’t seem to make it work on Safari browser. Feeds are not displayed.

    fyi. javascript enabled on my browser

    Thanks!!!

    itchy

    • Libby Fisher says:

      Hi,

      I will take a look at the site in safari later tonight and let you know if it works for me or not.

      Thanks!

  25. itchy says:

    great post!!! thanks!!!

    anyways , having problem getting feeds using safari

    anyone having this problem?

  26. Ray says:

    Hi Libby!

    I was thrilled to have finally found a twitter tutorial that actually works until I discovered that adding the twitter script to my site seems to disable all jquery activity until the twitter feed either loads or fails. Any idea why?

    Ray

    • Libby Fisher says:

      Hi Ray,

      I have never heard of that problem so I dont really know how I would go about fixing it. Is it causing issues or just something that you noticed?

      Thanks!

  27. Heidi says:

    How do i make the #tags linkable?

  28. Ben says:

    Hi Libby,

    I’m trying to implement this code for the 2nd site running – http://www.unclebenmusic.co.uk – this time having trouble with the way it’s displaying the tweets… got to be something to do with my CSS I think, but can’t work out what.

    Everything working correctly, except the tweets seem to be overlapping?

    Any ideas? Thanks so much for your time

    Ben

    • thelibzter says:

      Hi Ben!

      Ok, I figured out the problem, it was your style “display:inline” for li elements that was interfering with the CSS for the Twitter feed. If you add the style “display:block” to #twitter_update_list li in your stylesheet, I believe your problem will be solved. Let me know if not and we will try something else. Thanks!

      • Ben says:

        YES LIBBY!
        Well spotted, thank you so much!!
        I’ve gone around it a bit differently – giving the main li elements their own class and letting your twitter code do what it’s supposed to!

        Smashing once again, you’re brilliant!

  29. ArJhay says:

    It works! THANK YOU!

  30. Logan says:

    This is really helpful. I just have one quick question – is there anyway to display favorited tweets instead of all tweets? Thanks!

  31. nik says:

    hi libby. does this still work for you? it looks like the tweets are no longer displaying using this method (though im sure it *was* working recently)

    see: http://ofourempire.com/twitter.html for (unstyled) example

  32. monisha says:

    hey i tried to use ur twitter widget…it is gr8 but does not fetch the twitter feed..plz help !!

    • thelibzter says:

      Hi Monisha,

      Are you using the updated code for the Twitter feed? (see my note at the beginning of the post). Feel free to send me a link to the page you are working on and I can take a look at it.

      Thanks!

  33. Thank you thank you! This saved so much time for me :)

  34. stuart anderson says:

    Hey, Love the Twitter Feed, seems to work Great.
    My only Question… The only part hyperlinked is the Time, is it possible to allow the whole text/twitter to be hyperlinked??

    Thanks
    Stuart

  35. Cesare says:

    Solved our feed problem. Thanks for the simple explanation. So much more understandable than any other tutorial I’ve seen out there!

  36. Dan says:

    Hi Libby, I just wanted to let you know that as of this morning (16th October 2012) The new script seemed to have stopped working – for me at least. I switched back to the old one and it seems to be working again now. For safe measure, I have included both :)

  37. anonymous says:

    Hi guys,

    My code worked for a while. Then in the last week or so it stopped working. You think it is something to do with twitter?

    Can anyone help?

    Thanks

  38. anonymous says:

    Hi

    I am sorry i was a bit hastey. Managed to get it working with the updated code. Thanks for replying to user comments. Reading them helped a lot.

  39. sarah says:

    hey! thanks for the code, it works great!

    i have a question and maybe you can help. is there anyway to get rid of ? if you look at my twitter feed on the left side of my site, i’d really like to get rid of those bullet points, but I’m not sure how to. i think this might be a problem on my end somewhere.. any help is greatly appreciated as you’ve already helped me a lot by providing the code!

    thanks,
    sarah

  40. anonymous says:

    HI

    Today I noticed that the script stopped working again. It’s on a client websites so they are not going. Is twitter changing or something? This happened before then I tried the new code. Now it happened again :-(

  41. Emily says:

    Been driving me nuts that this stopped working! Fixed with your update – many thanks!

  42. Emily says:

    Spoke too soon, it stopped working again! Now have both bits of the javascript, new and the old and seems to be working so far… although after seeing Dan’s posts I suspect it may fail again! Any help?? Thanks!

    • thelibzter says:

      Hi Emily,

      Is the twitter feed now working for you? if not, and you want to send me a link to it, I can take a look. Thanks!

  43. Anja says:

    OMG! You actually made my day! My twitter feed broke mid October and ever since I have been looking and looking up and down the internet to find an answer, but all I found is people saying that Twitter no longer allows custom twitter feeds and that you have to use their widgets. I was pretty bummed as their widgets are ugly and don’t match the design of my website. Who would have known that it’s such a small fix! Thank you, thank you, thank you!!!!!!

  44. Marc Christopher says:

    Hi,

    I’m having an issue the amount of tweets displayed. It’s only half of the number that I put in.

    Thanks!

  45. Marco says:

    Hi there,

    I followed your instructions but it does not work. I changed the updated line but it does not work nonetheless…Any idea?

  46. allan says:

    Hi, thanks for this, like many others it’s what I was looking for. I am having a slight issue, at times. My site isn’t finished yet, so I still have to go over the coding and make sure it’s all ok.

    The problem I am having, sometimes, is that the feed is pulling in 1 tweet, when I have it set at 2, then if I change it to pull in 3 it pulls in 2 and so on… As I said it’s only sometimes this happens, and somehow seems to sort itself out after a while.

    Just wondering if this has happened to anyone before?

    Thanks.

  47. allan says:

    Ya know, I’d say that’s what it is. I’ll go check that link.

    Thanks :)

  48. allan says:

    Yup, just tried the code from the link you posted and Retweets work perfect.

    Thanks again :)

  49. Libby Fisher says:

    Hi Ben,

    This style in your stylesheet:

    li {display:inline;}

    Is what is causing the issue. I would add:

    display:block;

    to:

    #twitter_update_list li

    in your stylesheet and see if that solves the problem.

    Thanks for commenting!

  50. Libby Fisher says:

    Hi Heidi,

    I would try following the instructions in this tutorial and see if that Twitter feed does what you are looking for – http://blog.grayjunior.com/2011/02/23/create-your-own-twitter-widget/.

    Thanks for commenting!

  51. Leave a response

    Current ye@r *