back to top
shopping basket

View your basket

Memory DVD

What our customers are saying:

I thought the image on the CD is also a great touch for archiving.

Read more...

Show Your Latest Tweets on Your Website With Javascript

Show Your Latest Tweets on Your Website With Javascript

PiciScan Web Design Blog RSS Feed

Posted on: Friday, 1 May 2015

Credit for the creation of the JavaScript that runs this, must go to Jason Mayes. He became frustrated with the fact that Twitter's own API for displaying your latest tweet(s) stopped working. I myself was faced with a similar problem and turned to the internet for help. After a LOT of searching, I eventually found Jason's elegant JavaScript solution. As I say, I can take no credit for the creation of the code, but wanted to share how I made use of it.

But, before I launch into that, I'd just like to let know why you might like to use this solution over any other. Whenever you tweet, and have this code running on your site, your homepage, or wherever you decide to use this code, will be updated. This means that Google's 'robots', 'spiders' or whatever else you want to call them will find new content on your site on a regular basis. Make your tweets relevant to your page content overall and it can only help your rankings in search engines.

There's another excellent reason why you should use this solution. I try and tweet every day. But, sometimes, for whatever reason, I might not tweet for a couple of weeks. One of the solutions I have used in the past would not display any tweet older than about five days. Jasons solution doesn't seem to have an expiry date. So, evern if you decide to display your last 20 tweets on your site - I wouldn't recommend it - you can always be sure that they will all be displayed.

And how Jason's solution drops your tweets on your site is within a div as an un-ordered list. An that is it. Simple. Elegant. Easy to implement. Wish I'd written it myself.

Right, let's get on with it ... Even before downloading the code, you'll need to visit Twitter to create a widget. Doing so will give you an 18-digit number that you will need in the implementation of the code on your own site.

To creat the widget

1. Visit twitter.com and sign in as usual.

2. In the top-right of the screen, click on the icon for your username and then on 'Settings'.

3. In the left-hand column, click on widgets, and click on 'Create New'.

4. Staying in the 'User timeline' tab, set the username you wish to use (presumably your own), and select whatever other options you wish.

5. Click 'Create widget'.

6. Back in the Widgets screen click on 'Edit'. This will allow you to edit your settings, but you don't want to do that. Instead, look at the address bar. You'll see something like https://twitter.com/settings/widgets/440077523309711360/edit. The only information you need from Twitter to make this work is the 18-digit number that follows /widgets/ in this address. Copy this number and keep it somewhere for later.

Now that your widget has been created, go ahead and download the files by following the links from Jason Mayes' own site. The file I decided to use was the twitterFetcher_min.js, but you could use the twitterFetcher.js instead. Either works fine. Now you've downloaded the JavaScript file, you'll need to UPLOAD it to your own server. I uploaded the file to a folder entitled 'js' within the site's parent directory.

To make your site display your latest tweets, open up whatever page you want to have them show up in, with your favourite text-editor. I decided to have them shown-off on the homepage. Now, scroll down to somewhere between the body tags and insert the following:

<div class="twitter-container">
<h2>What PiciScan is saying on <a href="https://twitter.com/piciscan" class="scanning" target="_blank">twitter</a>:</h2>
<div class="tweets">
<div id="twitter_feed"></div>
<script type="text/javascript" src="js/twitterFetcher_v10_min.js"></script>
<script>twitterFetcher.fetch('440077523309711360', 'twitter_feed', 5, true);</script>
</div>
</div>

It's up to you if you include the heading, it won't affect the functioning of the code, but, don't forget to amend it for your own details. The <div class="tweets"> is also optional. All I use it for is to style the box that contains our latest tweets. I'll discuss the CSS later. What you must change is these two lines:

<script type="text/javascript" src="js/twitterFetcher_v10_min.js"></script>
<script>twitterFetcher.fetch('440077523309711360', 'twitter_feed', 5, true);</script>

In the first line, make sure you reference the JavaScipt you've uploaded correctly. It may be that you've done the same as me and don't need to change this line. But, it is the next line that really affects how the twitterFetcher will work on your site. Replace the 18-digit code in this line with the one you copied and saved earlier. Replace twitter_feed for the name of the div that the tweets will be displayed in (it's probably safest to leave this as-is). And, change the number '5' for however many of your latest tweets you wish to display on the page.

The Styling

The real beauty of Jason's script is the way it can be styled to fit in with your own design. I've always thought Twitter's own widget was a little clunky. You can download and just use Jason's provided CSS as it is, and to be fair to him, it may ALREADY be responsive, but at the time I downloaded it, it wasn't. (Well, if it was, I wanted to fiddle with it anyway.) The CSS I have shown below is mobile first, with break points designed to affect how the tweets will display on increasingly wider screens. Using this CSS will, in most cases, keep the individual parts of the tweet seperate. This may not work if the usernames are quite long, but, as far as I can work out, there's not a lot you can do about this. Use it as shown, or change it to match your own design, it's up to you:

.tweets {
width: 100%;
margin: 5px 0;
}

li.tweet {
margin: 0 0 12px 0;
padding: 0;
list-style-type: none;
}

#twitter_feed h2 {
clear: both;
}

#twitter_feed p, #twitter_feed a {
margin: 10px 0 0 0;
color: #3d3d3d;
}

#twitter_feed a, #twitter_feed a: visited {
color: #427fed;
}

#twitter_feed a: hover {
color: #82afff;
}

#twitter_feed ul li  {
list-style: none;
overflow: hidden;
border:  1px solid #AFAFAF;
margin: 5px 0;
padding: 5px;
}

#twitter_feed ul li: hover {
background-color: #f0f3fb;
}

#twitter_feed .user, #twitter_feed .tweet, #twitter_feed .timePosted {
float: left;
}

#twitter_feed .user {
width: 25%;
clear: left;
margin: 10px 0;
}

#twitter_feed .tweet {
width: 65%;
margin: 10px 0 10px 10%;
}

#twitter_feed .timePosted,#twitter_feed .interact {
display: none;
}

#twitter_feed .user span span {
display: block;
margin-top: 10px;
}

#twitter_feed .user img, #twitter_feed .user a > span {
float: left;
}

#twitter_feed .interact a {
margin-left: 2%;
float: left;
}

#twitter_feed .user a > span {
margin-left: 5px;
}

@media screen and (min-width: 480px) and (max-width: 799px) {
#twitter_feed .user {
width: 21%;
}

#twitter_feed .tweet {
width: 62%;
margin: 10px 2% 10px 2%;
}

#twitter_feed .interact {
float: left;
width: 13%;
margin-top: 0;
display: block;
}

#twitter_feed .interact a {
margin-left: 0;
float: left;
}

}

@media screen and (min-width: 800px) and (max-width: 1100px) {
#twitter_feed .user {
width: 16%;
}

#twitter_feed .tweet {
width: 55%;
margin: 10px 2% 10px 2%;
}

#twitter_feed .interact {
float: left;
width: 10%;
margin-top: 0;
display: block;
}

#twitter_feed .interact a {
margin-left: 0;
float: left;
}

#twitter_feed .timePosted {
display: block;
width: 13%;
margin-right: 2%;
}

}

@media screen and (min-width: 1101px) {
#twitter_feed .user {
width: 16%;
}

#twitter_feed .tweet {
width: 57%;
margin: 10px 2% 10px 2%;
}

#twitter_feed .interact {
float: left;
width: 8%;
margin-top: 0;
display: block;
}

#twitter_feed .interact a {
margin-left: 0;
float: left;
}

#twitter_feed .timePosted {
display: block;
width: 13%;
margin-right: 2%;
}

}

The next bits are going to seem pretty obvious, but I thought I'd point them out anyway:

#twitter_feed .user affects how the username and user's icon is displayed. I chose to always display this, no matter what the screen size.

#twitter_feed .tweet affects how the tweet itself is displayed. Always displayed.

#twitter_feed .interact affects how the interaction section is displayed. I only display this part once the screen-width has exceeded 479px. What this section will allow your website user to do is, if they are signed into twitter, retweet, favourite or reply to tweets. Clicking on the links on your site will take the user to twitter.com, but it does at least add interactivity to your page.

#twitter_feed .timePosted affects how the time the tweet was posted is displayed. I only have this on show once the screen-width has exceeded 800px.

If you're looking for a way to display your tweets on your site, I really hope you chose this method. And for a working version of it, look no further than our home page.

Mark founded PiciScan in 2010, and sold it in October 2015 to Web By Numbers Ltd, who now employ him! He likes Star Wars, playing escape games and looking after his bonsai tree.

comments powered by Disqus

The Latest From our Scanning Blog

Christmas 2015

Christmas 2015

Posted: 14 December 2015

It’s nearly the time of year to be going up into the loft and bringing down all the Christmas decorations, locating the tree and seeing if those lights from last year still work, or if you need to buy any more...

Read more

The Latest From our Web Design Blog

Box Sizing: Border-Box

Box Sizing: Border-Box

Posted: 24 March 2016

I first came across box-sizing: border-box when it cropped up in a temporary colleague's CSS. I found it pretty annoying when I picked up work that he'd started as it seemed to get in the way. This was because, as I said in a previous post on margin ...

Read more