How to make a horizontal scrolling twitter feed




There are many widgets using twitter feed to display the tweets on blog or site.Most of them are displayed in a vertical widget in the sidebar. But maybe you want the tweets to be displayed horizontal on top or bottom of the post. In the next tutorial I will show you how to create a horizontal scrolling box where it will be displayed your tweets in a nice scrolling effect.




How to create scrolling twitter feed?

1. Log in to your dashboard--> Design- -> Edit HTML

2.  Search "Ctrl+F" and find ]]></b:skin>. Before it paste the code:


/* The container for the module */
   #twitter {
    background: #f1f2f8;
 
    width: 553px; /* Up to you but remember to change the div width below as well if you change it */
    padding: 0 10px;
 
    overflow: hidden; /* clearfix */
 
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -o-border-radius: 5px;
    -ms-border-radius: 5px;
    border-radius: 5px;
   }
 
    #twitter h5 {
     float: left; /* We'll make the heading sit on its own line next to the tweets */
     width: 120px; /* Might wanna change this depending on the text in the heading */
     margin: 0;
     padding: 6px 0; /* I'll set the top and bottom padding here rather than in the container so as not to cut off any text */
 
     font-size: 12px;
     color: #4b9fff;
     line-height: 1;
    }
 
    /* The marquee plug-in turns a marquee element into a div */
    #twitter p,
    #twitter marquee, 
    #twitter div {
     float: right;
     width: 430px; /* Container width - heading width - 10px (for some right padding) */
     margin: 0;
     padding: 6px 0; /* Again we set the padding in here so as not to cut text */
     line-height: 1;
    }
 
     /* All the tweets will be links pointing to your page on twitter */
     #twitter marquee a, 
     #twitter div a {
      margin: 0 10px 0 0;
      color: #333;
      text-decoration: none;
     }
 
      /* The i is used to display the date of the tweet */
      #twitter marquee a i, 
      #twitter div a i {
       font-style: normal;
       color: #999;
      }  

You can play with the colors , borders, background to style the box as you want.

3. Then go to </head> and before it paste the next javascript code:


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'/> 
  <script src='http://artistutorials.googlecode.com/files/jquery.marquee.js'/> 
  <script type='text/javascript'>
      //<![CDATA[ 
   var Twitter = {
    init: function () {
     // Pass in the username you want to display feeds for
   this.insertLatestTweets('ArtisTutorials');
    }, 
 
    // This replaces the <p>Loading...</p> with the tweets
    insertLatestTweets: function (username) {
     var limit = 5; // How many feeds do you want?
     var url = 'https://api.twitter.com/1/statuses/user_timeline.json?screen_name=' + username + '&count=' + limit + '&callback=?'; 
     // Now ajax in the feeds from twitter.com
     $.getJSON(url, function (data) {
      // We'll start by creating a normal marquee-element for the tweets
      var html = '<marquee behavior="scroll" scrollamount="1" direction="left">';
 
      // Loop through all the tweets and create a link for each
      for (var i in data) {
       html += '<a href="http://twitter.com/' + username + '#status_' + data[i].id_str + '">' + data[i].text + ' <i>' + Twitter.daysAgo(data[i].created_at) + '</i></a>';
      }
 
      html += '</marquee>';
 
      // Now replace the <p> with our <marquee>-element
      $('#twitter p').replaceWith(html);
 
      // The marquee element looks quite shite so we'll use Remy Sharp's plug-in to replace it with a smooth one
      Twitter.fancyMarquee();
     });
    }, 
 
    // Replaces the marquee-element with a fancy one
    fancyMarquee: function () {
     // Replace the marquee and do some fancy stuff (taken from remy sharp's website)
     $('#twitter marquee').marquee('pointer')
      .mouseover(function () {
       $(this).trigger('stop');
      })
      .mouseout(function () {
       $(this).trigger('start');
      })
      .mousemove(function (event) {
       if ($(this).data('drag') == true) {
        this.scrollLeft = $(this).data('scrollX') + ($(this).data('x') - event.clientX);
       }
      })
      .mousedown(function (event) {
       $(this).data('drag', true).data('x', event.clientX).data('scrollX', this.scrollLeft);
      })
      .mouseup(function () {
       $(this).data('drag', false);
      });
    }, 
 
    // Takes a date and return the number of days it's been since said date
    daysAgo: function (date) {
     // TODO: Fix date for IE...
     if ($.browser.msie) {
      return '1 day ago';
     }
 
     var d = new Date(date).getTime();
     var n = new Date().getTime();
 
     var numDays = Math.round(Math.abs(n - d) / (1000 * 60 * 60 * 24));
     var daysAgo = numDays + ' days ago';
 
     if (numDays == 0) {
      daysAgo = 'today';
     }
     else if (numDays == 1) {
      daysAgo = numDays + ' day ago';
     }
 
     return daysAgo;
    }
   };
 
   Twitter.init();
   //]]>
    </script>

Replace the red line with your own twitter user.

Here is the jQuery marquee scrips used in the tutorial. If you want to host yourself download it from here.

 4. Save the template and go to page elements. Go to Layout and add a New Gadget. Select HTML/JAVASCRIPT and in the content of the widget paste the next code:


<div id="twitter"> 
                        <h5>Latest tweets</h5>
    <p>Loading...</p> 
 
   <noscript>This feature requires JavaScript</noscript> 
 
  </div>

Then drag and drop the new widget above the Blog Post section.




Save the arrangement and see the results.

Get Latest Updates For Free!

Subscribe via Email

44 comments

September 7, 2011 at 9:34 PM

Hey this code is messing up my images for my light box function. They are no longer working? Do you have any suggetions how to fix it.

September 7, 2011 at 11:03 PM

@Amy

Delete the next line from the step 3 code:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'/>

September 8, 2011 at 2:05 PM

nice tutorial my master...
i'll collected too about twitter ;)

September 9, 2011 at 4:53 AM

Thanks it's working now however my the twitter marqee is rolling across my screen quite slow. How do I make it go back to the speed it once was?

September 9, 2011 at 8:43 AM

@AmyYou will find in the code on step 3 this code:

scrollamount="1"

Change the 1 value with other value 2,3,4.....50 for changing the speer of the marquee.

September 10, 2011 at 11:43 AM

okay thanks! It's now working however the marquee fails to stop when on mouseover? How do I fix?

September 10, 2011 at 11:37 PM

@Amy It should work without problems if you copied all the script needed. Check to see if there aren't others scripts in conflict with this one.

September 11, 2011 at 1:01 PM

Can this display more than one twitter users feed?

September 11, 2011 at 1:20 PM

@Payton Wales Well , I didn't try it. Just add multiple twitter users separated by a dash and see if it works. :)

September 11, 2011 at 1:25 PM

Thank you! I'll give it a shot. I have another issue off this topic would you mind helping me out via e-mail for a minute?

September 11, 2011 at 1:44 PM

@Payton Wales Sure, if I can I will help you.

September 14, 2011 at 12:48 AM

What other scripts would?

September 14, 2011 at 5:33 PM

@AmyI don't know what other scripts you have installed on your template.

November 7, 2011 at 5:48 AM

This is exactly what Im looking for but trying to get it to work on a website not blog. Could you give me a hint, all I get is Latest Tweets "Loading.."

November 7, 2011 at 11:22 AM

@LisaPaste the code on step 3 and 4 into the body of the page not like for blogger into the head. Something like this:

<body>
code step 3
.....
.....
code step 4
.....
.....
</body>

November 7, 2011 at 4:13 PM

Hey, nice tutorial. I just have one question though, will it work in a regular website that is not hosted by blogger? (I mean, one I made on my own)

Thank you in advance.

November 7, 2011 at 4:29 PM

@MyloYes it works in a website just the code on step 3 and 4 must be in to the body of the page not on the head.

November 11, 2011 at 6:24 PM

very good tutorial and can hopefully help me in building json in the application that I created for this lecture. thank you

November 26, 2011 at 4:09 PM

thanks for tutorial

Anonymous
December 16, 2011 at 6:52 PM

@RCTI Online TVThank for tutorial

Anonymous
January 7, 2012 at 4:00 AM

@ArtisTutor

I have the same issue as Amy, but when I remove that line, the widget stops working. Any advice?

January 24, 2012 at 6:15 AM

Very nice job! you saved the day

January 24, 2012 at 7:37 PM

Great Tutorial! I am trying to get it to work in my website and I had it working once, but like Amy it messed up my lightbox feature. So I reverted back to the copy before I added the ticker code and didn't save the copy of how I did it right. Now I'm trying to get it working, but I can't remember how I got it working last time. It currently only says 'Last Tweet Loading...'. I have the code in a div at the bottom of my page to run as a footer. Do I put the CSS in the head and the html and the Jscript in the body?

January 24, 2012 at 8:28 PM

How do you change the text size of the tweet without affecting the body text size?

January 24, 2012 at 8:48 PM

@Stephon#twitter h5 {
float: left; /* We'll make the heading sit on its own line next to the tweets */
width: 120px; /* Might wanna change this depending on the text in the heading */
margin: 0;
padding: 6px 0; /* I'll set the top and bottom padding here rather than in the container so as not to cut off any text */

font-size: 12px;
color: #4b9fff;
line-height: 1;

change the value of font-size: 12px;

January 24, 2012 at 8:52 PM

@StephonPaste the code on step 3 and 4 into the body of the page not like for blogger into the head. Something like this:

<body>
code step 3
.....
.....
code step 4
.....
.....
</body>

February 29, 2012 at 11:30 PM

HEllo Dude.. Nice tutorial .. Iam just founding tht one.. but dear its not working on my website.. Its works well on my blog but not the site.... means the effect of marquee wont uploads the tweets of mine...

I tried several option to make the tweet scroll but no works.. !!!

If you have some more suggestion then please inform me!!!!

March 1, 2012 at 5:55 PM

@Khawaja Khalid (Nomi Prince)Paste the code on step 3 and 4 into the body of the page not like for blogger into the head. Something like this:

<body>
code step 3
.....
.....
code step 4
.....
.....
</body>

Anonymous
March 29, 2012 at 4:26 AM

This is exactly what I am looking for...any help adding it to an iWeb site?

May 22, 2012 at 7:59 AM

Hi!!! It works very good, but...it works only for 2 seconds, then the page turns white and nothing happens. Do you know whats the problem? (it happens with your demo page too)

Thanks!

Anonymous
May 24, 2012 at 3:04 AM

How do you change the amount of tweets loaded( I dont want all of mine from forever ago loaded)?
Thanks!

Anonymous
June 5, 2012 at 9:24 PM

Does anyone know how to add profile pictures next to the tweets? I thought that I could just add data[i].profile_image_url but I can't get it to work.

Anonymous
June 17, 2012 at 5:26 AM

really make it seem so easy with your presentation but I find this topic to be really something which I think I would never understand. It seems too complicated and very broad for me. I'm looking forward for your next post, I will try to get the hang of it!
Web Site

Anonymous
June 29, 2012 at 1:11 AM

Great bit of code,thanks for sharing... could you change the link to the jquery.marquee.js file on the demo page to the same one as specified in the code sample above, the link has been blocked so the demo no longer works, its just if like me you see the demo and it doesn't work it puts you off looking any further when in fact its an excellent and useful bit of code.
Thanks

June 29, 2012 at 10:22 AM

@AnonymousDone. Now the demo should work.

Anonymous
July 2, 2012 at 4:16 PM

Hi,

I've got it all working great except that it gives me 4 or 5 proper tweets and then gives me "undefined NaN" at the end several times over. I've changed the number of tweets to display but always gives me these errors.

Any ideas?

Many thanks,

Quentin

November 2, 2012 at 2:53 PM

The script stopped working.. do you have any ideia why? the demo isn't working anymore as well

November 7, 2012 at 11:28 AM

demo not working

sweetrobot
November 7, 2012 at 12:15 PM

var url = 'https://api.twitter.com/1/statuses/user_timeline.json?screen_name=' + username + '&count=' + limit + '&callback=?';

November 7, 2012 at 1:50 PM

@sweetrobotThanks for the info, now it's working again.

January 7, 2013 at 2:14 PM

This is awesome! Do you know if there is a way to implement this with something like tinycarousel? I'm looking for a way to give it more of a slider functionality. Thanks so much for posting about this!

January 7, 2013 at 3:12 PM

@Geoff JohnsonYou can take a look here:

http://bobbelderbos.com/2012/01/twitter-widget-show-latest-tweets-carousel-slide/

and here:

http://smallcoders.com/project/tweetslider/

March 22, 2013 at 5:48 PM

This is great! Works perfectly for me.
I'm very new to programming and creating websites so I have to ask:
Do I need to ask for your permission to use the jQuery marquee scripts that you are using in this tutorial or are they to be used freely?
Also I noted that there're two of them:

'http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'
'http://artistutorials.googlecode.com/files/jquery.marquee.js'

and that the second can be downloaded so we can hosted ourselves if we want.
Can I just copy the content of the first one and create a .js in my server to host that one as well?

Thanks in advance!

March 22, 2013 at 8:17 PM

@Hernan JourdanYou are free to use them whatever you want.

Click to Add a New Comment

Leave your comment

- If you're asking a question click the Subscribe By Email link, below the comment form, to be notified of replies.
- Do NOT add links to the body of your comment as they will not be published.
- Only the comments posted in ENGLISH will be approved.
- If you have a problem check first the comments , maybe you will find the solution there.

Read latest articles in your favorite news reader
Sign up for newsletter

Find us on Facebook

Followers