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.

  • Pingback: Custom Twitter feeds for your website | The Web Design Blog of TheLibzter.com()

  • Peter

    Doesn’t seem to work for me :(

    • Libby Fisher

      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

      • http://lactuelsurrue.com Thomas

        I was using your script and it was working fine but it stopped pulling in tweets. I tried replacing the javascript like you said but it doesn’t seem to work

        • thelibzter

          Hi Thomas,

          If you send me a link to the page where you have the Twitter feed, I’d be happy to check it out.

          Thanks!

        • Steve Kramer

          The script needs to be after the HTML. This was my problem.

          • thelibzter

            Hi Steve,

            Awesome, glad you were able to get it working. Thanks for letting me know!

  • marie

    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?

  • http://localhtml Ross Dunlap

    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..

    • Libby Fisher

      Hi Ross,

      Can you send me a link to the page you are working with or send me the code of the entire page? You can post it here or send it to libby@libbyfisher.com. I will try to help you get it working. Thanks!!

    • http://itineristravelmag.com Mark

      Thanks man, worked a treat!

      • Libby Fisher

        Glad it worked, thanks for commenting!

  • Pingback: Creating a custom Twitter feed of search results for a specific term « Icode4you – PHP, CSS, HTML, and Javascript coding tips, tricks, help, and more()

  • Jessie

    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

      Hi Jessie,

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

      ~Libby

    • Libby Fisher

      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!

  • bos

    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.

    • Libby Fisher

      Hi,

      In order to open all of the links in the Twitter feed in a new window, you need to add the script from this post – http://icode4you.net/use-javascript-to-open-all-links-within-a-certain-div-in-a-new-window – to the body of your webpage and then change “your-div-class” in the script to “twitter” and then just add class=”twitter” to in the code provided above for your Twitter feed. Please let me know if that doesn’t make sense. Thanks! :)

  • bos

    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”){

  • http://- Ryan Smith

    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

      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.

  • Pingback: Custom Halloween-themed Twitter feeds for your website « Icode4you – PHP, CSS, HTML, and Javascript coding tips, tricks, help, and more()

  • http://www.zeezeebra.nl Jeanne Melchels

    Hi Libby,

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

    • Libby Fisher

      I am glad to hear that, thanks for letting me know! :)

  • Lori

    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

      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!! :)

  • http://www.all-info4you.com idham

    Are you have demo page?

    • http://www.edgesofseven.com Rob

      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!

      • Libby Fisher

        Hi Rob,

        Here is a link to one of my blog posts on how to create a custom Twitter feed which includes avatars – http://icode4you.net/creating-a-custom-twitter-feed-with-avatars-for-your-website. Hope that helps, thanks for commenting! :)

        • http://www.edgesofseven.com Rob

          Cool, Thanks!
          Now one more question…how can I attach a stylesheet to it? I tried following the same guide as above, but because the script is different, it’s not quite working. Is it possible to customize it using a stylesheet like the above tutorial?
          Thanks again!

          • http://icode4you.net Libby Fisher

            Hi Rob,

            Yes, you can just add styles for the different elements into your regular stylesheet. Here is a screenshot so you can see a few of the different classes and other elements that the twitter widget uses, so you can them customize them to fit the design of your site – http://icode4you.net/wp-content/uploads/2012/02/twitter_styles.jpg. Hope that helps!

    • Libby Fisher

      Hi,

      Yes, you can find working demos of the Twitter feed in action at http://libbyfisher.com/custom-twitter-feeds-for-your-website.

  • James

    Hey,

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

    Any ideas?

    • Libby Fisher

      Hi James,

      Can you please send me a link to the page you are working on so I can check it out? You can either post the link here or email it to libby@libbyfisher.com. Thanks!

      • James

        After some sleep and a fresh look I’ve realised my mistake! For anyone else having the same problem, the script needs to run after the html.

        Thanks.

        • http://onclassical.com/blank.htm alessandro

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

          • Libby Fisher

            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!

  • http://thor-sandbox.usask.ca/~tlc824 T. C.

    Hello,

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

    Thanks!

    • Libby Fisher

      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!

  • http://yourlifetube.com waterpearls

    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.

    • Joost

      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.

      • Libby Fisher

        Hi Joost,

        That is a great question – are you able to simply generate the two separate feeds from Twitter’s own website (https://twitter.com/about/resources/widgets/widget_profile) or do you need the feeds to be custom??

        Thanks!

        • Joost

          Hi Libby,

          Generating two seperate feeds is no problem but I would like them both to be custom.

          I managed to get one working but the second one I try to create just uses the same Twiterfeed. Hope you can help me out.

          Kind regards,

          Joost

          • itchy

            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

            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!

        • itchy

          great post!!! thanks!!!

          anyways , having problem getting feeds using safari

          anyone having this problem?

    • itchy
  • NS

    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?

    • Libby Fisher

      Hi,

      I honestly have no idea, sorry.

      Thanks!

    • Ben

      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

      • Libby Fisher

        Hi Ben,

        Here is a post I wrote which explains how to create a Twitter which includes retweets – http://icode4you.net/including-retweets-in-your-custom-twitter-feeds. The only difference is in the Javascript.

        Hope that helps. Thanks!

        • Ben

          Libby, you are a legend! Cheers!

        • http://www.unclebenmusic.co.uk Ben

          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

            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!

          • http://www.unclebenmusic.co.uk Ben

            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!

  • Kriss

    Hi Libby,

    how to get users post image, can you guide me

    Thanks
    Kriss

    • Libby Fisher

      Hi Kriss,

      Are you trying to display avatars in your Twitter feed? I dont understand the question, sorry.

  • Breahna

    Hi Libby,

    Thanks so much for this! It works perfectly!

    • Libby Fisher

      Awesome, glad to hear it! :)

  • Ray

    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

      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!

  • Heidi

    How do i make the #tags linkable?

    • thelibzter

      Hi Heidi,

      I don’t understand your question? Thanks!

  • ArJhay

    It works! THANK YOU!

  • http://loganstahley.com Logan

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

    • thelibzter

      Hi Logan,

      Here is a tutorial which contains instructions on how to display a feed of a user’s favorited tweets – http://tweet.seaofclouds.com/. Hope that helps! Thanks for commenting :)

  • nik

    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

  • monisha

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

    • http://www.kaydee.net Kelly Drewett

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

    • thelibzter

      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!

  • http://www.curioandco.com/ Cesare

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

    • thelibzter

      Glad to hear it, thanks for letting me know :)

  • Dan

    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 :)

    • Dan

      Actually, after the initial success, it appears to have stopped working again. I am very confused :S

      • thelibzter

        Hi Dan,

        Hmm my Twitter feeds, which are using the updated code, are still working – http://libbyfisher.com/wp-content/uploads/2012/10/Purple-Twitter-Feed.htm. Have you tried using just the updated code, rather than both?

        • Dan

          Hi Libby,

          When I look at your link it’s not working either which leads me to believe it must be a problem at my end. I’ll keep looking and let you know if I find anything I deem useful.

          Thanks :)

          • http://n/a anonymous

            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

          • http://n/a anonymous

            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.

          • thelibzter

            Awesome, glad you were able to figure it out :)

  • http://www.xliciousgirl.com sarah

    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

    • http://www.xliciousgirl.com sarah

      i’ve resolved the issue. thanks again for the code!

      • thelibzter

        Awesome, glad you figured it out, thanks for letting me know :)

  • http://n/a anonymous

    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 :-(

  • Emily

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

  • Emily

    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

      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!

  • Anja

    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!!!!!!

    • thelibzter

      Haha, awesome! glad this worked for you!

  • Marc Christopher

    Hi,

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

    Thanks!

    • thelibzter

      Hi Marc,

      If you want to send me a link to the page you are talking about, either here in the comments or by emailing it to libby@libbyfisher.com, I can take a look at it.

      Thanks!

  • Marco

    Hi there,

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

    • thelibzter

      Hi Marco,

      If you want to send me a link to the page you are working on, either by posting it here or emailing it to libby@libbyfisher.com, I’d be happy to take a look for you.

      Thanks!

  • http://www.yoursoccerkit.com allan

    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.

  • allan

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

    Thanks :)

  • allan

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

    Thanks again :)

  • http://erinandthebones.tumblr.com/ Marta

    Do you know if this still working?
    i can see my tweets :(

    thanks

  • http://www.pnr-status.info/ Kimb Via PNR Status

    How to create custom tweet feed like next prev ?

  • Libby Fisher

    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!

  • Libby Fisher

    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!