home Twitter RSS feeds

Tutorial: Displaying latest tweets using Javascript

Blogged by: Kitty on Thursday, June 02, 2011  
Commentators: Blogger Eunice Csk, Blogger Kitty, Blogger Eunice Csk, Blogger Kitty, Blogger Eunice Csk, Blogger Kitty, Blogger Eunice Csk, Blogger Kitty, Anonymous Anonymous, Blogger Kitty, Anonymous Anonymous, Blogger Kitty, Anonymous Anonymous, Blogger Kitty, Anonymous Anonymous, Anonymous Anonymous, Blogger Kitty, Anonymous Ben Watson, Blogger Kitty, OpenID syashop.com, Blogger vences, Blogger vences, Blogger Kitty, Blogger vences,
Facebook comments: comments

This tutorial is dedicated especially to Susan since she asked how to add Twitter tweets into the blog.

There are different ways on how to display tweets on your website/blog. The easiest is by making use of the widget that has been provided by Twitter. However, some people prefer to style the tweets in their own way and the Twitter widget sometimes don't blend into the layout nicely (it could look ugly too).

Fortunately, we can make use of the Twitter's twitterCallback Javascript function to generate the tweets.

This tutorial is divided into two, one is for New Blogger and the other for Classic Blogger.

Display tweets on New Blogger

Step 1
Copy the following codes:

<div id="twitter_update_list"></div>
<script src="http://twitter.com/javascripts/blogger.js" type="text/javascript"></script>
<script src="http://twitter.com/statuses/user_timeline/USERNAME.json?callback=twitterCallback2&amp;count=1" type="text/javascript"></script>


Step 2
Open your dashboard and go to Design > Page Elements > Add gadget. Pick HTML/Javascript and paste the codes there. Save!
You can position the gadget wherever you like.


Display tweets on Classic Blogger

Step 1
Copy the following codes:

<div id="twitter_update_list"></div>
<script src="http://twitter.com/javascripts/blogger.js" type="text/javascript"></script>
<script src="http://twitter.com/statuses/user_timeline/USERNAME.json?callback=twitterCallback2&amp;count=1" type="text/javascript"></script>


Step 2
Open your dashboard and go to Template > Edit HTML. Paste the codes anywhere you like. Save.


Now remember to replace USERNAME with your Twitter username.

In the code snippet above, there's this line 'count=1'. The number refers to the number of tweets you want to display. So if you want the latest 3 tweets to be displayed, change it to count=3.

You can style <div id="twitter_update_list"></div> any way you like, but that line must not be removed otherwise the tweets will not be displayed. How this works is that, when the Javascript loads, anything inside <div id="twitter_update_list"></div> will be replaced with the tweets.

If you want more than 1 tweet to be displayed and you want the tweets to be organised into a list, replace div with ul, so that it would look like this instead:

<ul id="twitter_update_list"></ul>

Labels: , ,


Comments to Tutorial: Displaying latest tweets using Javascript:


Hey, I have a prob here, my tweets won't display. :(

Are you sure you have put all the codes in correctly?

Yeap I'm sure, if I'm not wrong. But I don't know what's the problem. You may have a look at my codes at http://i56.tinypic.com/2jayo2.png

I tested the code you shown me and it was working perfectly. On which site do you put the codes?
If you're using the codes on http://twentyonepoints.blogspot.com/ I can see it working nicely. Here's a screenshot: http://i52.tinypic.com/f0uph3.jpg

I paste it on my blogger html template, and use Google Chrome as my browser. Is it chrome's problem? But sometimes it appears and disappear and then appear. :/

I believe it is a cached memory issue. Clear the cached memory from your browser and then restart the browser. It should be visible now.

I think it works, thank you so much! :D

You're welcome. :)

Anonymous Anonymous said on August 28, 2011 at 8:56 PM
it does not work on my blog..coul you help me?

Hello Anonymous, what seems to be the problem? Are you sure you have inserted the codes correctly?

Anonymous Anonymous said on August 31, 2011 at 10:37 PM
still does not work! i really really sure that i have inserted the codes correctly

Can you send you layout codes over to me then and I'll put it in for you, if you don't mind.

how can i send the layout codes?

Copy your html codes to pastext.net and then send the link to me.Copy your html codes to pastext.net and then send the link to me.

thank u for helping me,, u such a helpful..
here is the link :D
http://pastext.net/6428

here u are,, it still shown the owner of the skin latest tweets although i change the codess or maybe im wrong .. hehe

get hah? what i send to you?

Sorry, I had been busy. I meant, can you please send me your blogskin layout so that I can put in the Twitter codes into your blogskin.

As of today I've noticed that my tweets are not being shown, as well as yours. I believe it may have been due to a update to Twitter API, but I could be completely wrong.

Any help is appreciated.
Thank You

-Ben Watson (Founder - The Illiterate Gamers)

@Ben, thanks for letting me know about that. I've found the solution to that and I'll be posting it up soon.

nice, thanks so much

Can I show the image included in the tweets?

By the way, is putting this in website will be more helpful on google searching (because of update of tweets) compared to Twitter official API tweet box? Or both are the same?

@vences, no you can't show the images in tweets using this method.

On your second question, both would give the same result. The method on this website makes use of Twitter's own callback Javascript.

oh I see... I like this way as the interface looks cleaner but I was worried that both method will give different search impact... Thank you for the codes!

Post a Comment

Commenting policy:
1. Please leave comments that are relevant to the blog post.
2. Comments on posts that are more than 14 days old will be moderated.
3. Do not post advertisements to your own site/products here.
4. Do not post private information, it will be deleted.
5. Refrain from using abusive/vulgar words, if you have personal issues with me, contact me directly through the contact form or my email instead.

Facebook comments to Tutorial: Displaying latest tweets using Javascript:


Tutorial: Displaying latest tweets using Javascript

Blogged by: Kitty on Thursday, June 02, 2011  
Commentators: Blogger Eunice Csk, Blogger Kitty, Blogger Eunice Csk, Blogger Kitty, Blogger Eunice Csk, Blogger Kitty, Blogger Eunice Csk, Blogger Kitty, Anonymous Anonymous, Blogger Kitty, Anonymous Anonymous, Blogger Kitty, Anonymous Anonymous, Blogger Kitty, Anonymous Anonymous, Anonymous Anonymous, Blogger Kitty, Anonymous Ben Watson, Blogger Kitty, OpenID syashop.com, Blogger vences, Blogger vences, Blogger Kitty, Blogger vences,
Facebook comments: comments

This tutorial is dedicated especially to Susan since she asked how to add Twitter tweets into the blog.

There are different ways on how to display tweets on your website/blog. The easiest is by making use of the widget that has been provided by Twitter. However, some people prefer to style the tweets in their own way and the Twitter widget sometimes don't blend into the layout nicely (it could look ugly too).

Fortunately, we can make use of the Twitter's twitterCallback Javascript function to generate the tweets.

This tutorial is divided into two, one is for New Blogger and the other for Classic Blogger.

Display tweets on New Blogger

Step 1
Copy the following codes:

<div id="twitter_update_list"></div>
<script src="http://twitter.com/javascripts/blogger.js" type="text/javascript"></script>
<script src="http://twitter.com/statuses/user_timeline/USERNAME.json?callback=twitterCallback2&amp;count=1" type="text/javascript"></script>


Step 2
Open your dashboard and go to Design > Page Elements > Add gadget. Pick HTML/Javascript and paste the codes there. Save!
You can position the gadget wherever you like.


Display tweets on Classic Blogger

Step 1
Copy the following codes:

<div id="twitter_update_list"></div>
<script src="http://twitter.com/javascripts/blogger.js" type="text/javascript"></script>
<script src="http://twitter.com/statuses/user_timeline/USERNAME.json?callback=twitterCallback2&amp;count=1" type="text/javascript"></script>


Step 2
Open your dashboard and go to Template > Edit HTML. Paste the codes anywhere you like. Save.


Now remember to replace USERNAME with your Twitter username.

In the code snippet above, there's this line 'count=1'. The number refers to the number of tweets you want to display. So if you want the latest 3 tweets to be displayed, change it to count=3.

You can style <div id="twitter_update_list"></div> any way you like, but that line must not be removed otherwise the tweets will not be displayed. How this works is that, when the Javascript loads, anything inside <div id="twitter_update_list"></div> will be replaced with the tweets.

If you want more than 1 tweet to be displayed and you want the tweets to be organised into a list, replace div with ul, so that it would look like this instead:

<ul id="twitter_update_list"></ul>

Labels: , ,



Comments to Tutorial: Displaying latest tweets using Javascript:


Hey, I have a prob here, my tweets won't display. :(

Are you sure you have put all the codes in correctly?

Yeap I'm sure, if I'm not wrong. But I don't know what's the problem. You may have a look at my codes at http://i56.tinypic.com/2jayo2.png

I tested the code you shown me and it was working perfectly. On which site do you put the codes?
If you're using the codes on http://twentyonepoints.blogspot.com/ I can see it working nicely. Here's a screenshot: http://i52.tinypic.com/f0uph3.jpg

I paste it on my blogger html template, and use Google Chrome as my browser. Is it chrome's problem? But sometimes it appears and disappear and then appear. :/

I believe it is a cached memory issue. Clear the cached memory from your browser and then restart the browser. It should be visible now.

I think it works, thank you so much! :D

You're welcome. :)

Anonymous Anonymous said on August 28, 2011 at 8:56 PM
it does not work on my blog..coul you help me?

Hello Anonymous, what seems to be the problem? Are you sure you have inserted the codes correctly?

Anonymous Anonymous said on August 31, 2011 at 10:37 PM
still does not work! i really really sure that i have inserted the codes correctly

Can you send you layout codes over to me then and I'll put it in for you, if you don't mind.

how can i send the layout codes?

Copy your html codes to pastext.net and then send the link to me.Copy your html codes to pastext.net and then send the link to me.

thank u for helping me,, u such a helpful..
here is the link :D
http://pastext.net/6428

here u are,, it still shown the owner of the skin latest tweets although i change the codess or maybe im wrong .. hehe

get hah? what i send to you?

Sorry, I had been busy. I meant, can you please send me your blogskin layout so that I can put in the Twitter codes into your blogskin.

As of today I've noticed that my tweets are not being shown, as well as yours. I believe it may have been due to a update to Twitter API, but I could be completely wrong.

Any help is appreciated.
Thank You

-Ben Watson (Founder - The Illiterate Gamers)

@Ben, thanks for letting me know about that. I've found the solution to that and I'll be posting it up soon.

nice, thanks so much

Can I show the image included in the tweets?

By the way, is putting this in website will be more helpful on google searching (because of update of tweets) compared to Twitter official API tweet box? Or both are the same?

@vences, no you can't show the images in tweets using this method.

On your second question, both would give the same result. The method on this website makes use of Twitter's own callback Javascript.

oh I see... I like this way as the interface looks cleaner but I was worried that both method will give different search impact... Thank you for the codes!

Post a Comment

Commenting policy:
1. Please leave comments that are relevant to the blog post.
2. Comments on posts that are more than 14 days old will be moderated.
3. Do not post advertisements to your own site/products here.
4. Do not post private information, it will be deleted.
5. Refrain from using abusive/vulgar words, if you have personal issues with me, contact me directly through the contact form or my email instead.

Facebook comments to Tutorial: Displaying latest tweets using Javascript:


Hire me to design your blog!

I offer designing and re-designing of Classic Blogger templates. Examples of my design can be found on my portfolio website.

The basic rate for a design starts from $25 USD. The rate is based on the complexity of the design. The more elaborate the design is, the higher the price is.

How to place your order

Send me an email via the contact form and state clearly how you want your design to be. This includes colour scheme, layout (with or without sidebar, number of columns, etc), any extra features, etc.

Your email should be in this format:
Name:
Design: Please give detailed explanation on how you want your template to look like
Preferred payment method: Paypal/Moneybookers/Payza/Bank transfer to Baiduri bank

I shall respond to your email within 3 (three) days. Your order will be placed into a Waiting Queue as orders are processed on a first come, first serve basis.

Payment methods

Payment has to be made to either by PayPal, or Moneybookers.

However, if you choose to pay via (international) bank transfer, be aware that you may be charged for the transfer service.

Other important information

Throughout the designing process, I may need to refer back to you for questions/opinions so do check your email frequently. This is to ensure the design can be done as soon as possible.

Depending on the design, your template make take up to over 1 (one) week to finish. You will be informed once the template is done.

I will send you an email requesting for the payment after the template is done. Once the payment is received, I will email you the complete template along with the necessary files.

All of my designs/templates will come with a credit section. This section must be left intact and you may not remove nor alter them. Resources that come with the designs/templates may not be redistributed or reproduced.

The designer

Kitty

Kitty. 29. Blogger, web design hobbyist, compulsive shopper and bibliophile based in Brunei. Enjoys creating and designing websites, dabbling with HTML, CSS and PHP.

I've been blogging since 2005 (or earlier) though my experience with the internet started back in 2000. My main interest is in web design and development. Other times you can see me wrapped around a book or glued to Astronomy and web design magazines.

The website

This website was created in January 2011 and the domain was purchased by me in late December 2010. Initially the website was intended to house tutorials for Classic Blogger/Blogspot only however over the time it has developed into what you see today.

Several of the tutorials and articles can also be found on Nekonette.com, which is the my main website where I mostly blog about my personal life. Also some of the tutorials here have been moved to that website.

Categories/Labels

Past layouts

These are the layouts that have been used on Codeislove.net previously.

Wooden board

Layout #1

Dark chic

Layout #2

Royal crimson

Layout #3

Articles, Tutorials and Contests

Articles


Please do not copy the articles verbatim and/or redistribute them on your site. And I'd appreciate it if you link back to me.

Tutorials


Please do not copy the tutorials verbatim and/or redistribute them on your site. And I'd appreciate it if you link back to me.

Popular tutorials:

Converting HTML layout to Wordpress series: How to code Classic Blogger template series:

Other tutorials:

Contests

Linkages

On-site navigation

Network

Looking for money-making opportunities? Check out these websites.

Blog Advertising - Advertise on blogs with SponsoredReviews.com

Business 2 Blogger

banner

Contact the webmistress

You can email me your messages/tutorial requests using the contact form:

Advertising

Codeislove: Geek Is Chic is a blog which houses various articles, tips and tutorials on web design as well as a mix of personal insights published by the website owner.

Simple site statistics:
Monthly Unique Visitors: 5000+
Monthly page views: 7,000 ~ 9,000

Also, if you think that you have a good advertisement offer to discuss with me, do contact me and let's discuss about it.

Get reviewed

You can have your website/blog reviewed here on Codeislove. Alternatively, you can also apply to get your website/blog reviewed on my other website, Amalina.org. You can request your review to be public or private. If you choose to have it public, it will be posted here on Codeislove. Similarly, if you want it to be private, I will send the review to you via email.

Please send an email to me in this format and I will get back to you as soon as I can:

Name:
Email:
Website/blog:
Do you want the review to be public/private?

Websites/blogs currently being reviewed:
Aroha - Ashleenah
Twinkle Toes - Eryn - completed
Gadis bermata cokelat - Nurul Nabila - completed

Related Posts Plugin for WordPress, Blogger...