Nov 19 2008

20 Twitter Status Design Tutorials, Icons & WP Plugins

Advertisement

Twitter has their own method for displaying your Twitter status on your website but they rely on Twitter-hosted scripts and generally hold up the page load. That’s why i would like to showcase some of the best tutorials and WordPress plugins that will display your twitter status on your blog or website. Also you will find high quality twitter icons to spice up your status area.

Below, we present 20 Brilliant Twitter Status Design Tutorials, beautiful twitter icons & WP Plugins to display your twitter status easily.

You might be interested to check this amazing collection of 25 Useful Twitter Tools and Firefox Plugins

I’ve been enjoying the Twitter thing more and more lately. Here is my Twitter page nourayehia if anyone wants to follow.

1. Customizing Twitter Status on Your Blog

1.1 Tweet

twitter status


Put twitter on your website with tweet!, an unobtrusive javascript plugin for jquery. Features includes: will not slow down or pause your page while tweets are loading, display up to 100 tweets, optionally display your avatar, automatic linking of URLs and many more…

1.2 jQuery plugin for Twitter

twitter status


A simple, unobtrusive and customisable client-side method for easily embedding a Twitter feed into a web page. The plugin is based on the Twitter Badge Customizer.

1.3 How To Make a Unique Website For Your Twitter Updates

twitter status


Twitter offers an API which you can use to pull information from twitter for your own uses. Even easier, they offer a little javascript widget which automatically uses this API and returns simple HTML of your recent tweets. This tutorial covers the design in Photoshop, to including the javascript stuff provided by Twitter to the markup, to the CSS to style the page.

Here is CSS-Tricks Video Screencast takes you through the creation of simple webpage to display your recent ‘Tweets’ from Twitter from start to finish. This covers the design in Photoshop, to including the javascript stuff provided by Twitter to the markup, to the CSS to style the page.

  • Demo can be found here.
  • Download files here
1.4 Stammy Script: RSS to Twitter using PHP

twitter status


One of the best ways to carry out RSS to Twitter involved a Jabber bot package for Ruby. Not too many people have access to a Ruby-enabled server so here is a simple PHP script to get the job done.

1.5 Create a Twitter Style Bird Mascot

twitter status


How to create a Twitter mascot for your blog or website.

1.6 Use PHP to add your Twitter feed to any page
    $username = %u201Ctimestocome%u201D;
    $tweets = fetch_rss(%u2019http://twitter.com/statuses/user_timeline/%u2019.$username.%u2019.rss%u2019);

    foreach ( $tweets->items as $tweet ){

    print %u201C<hr>%u201D;

    $twit = %u201D %u201C.substr(strstr($tweet['description'],%u2019: %u2018), 2, strlen($tweet['description'])).%u201D %u201C;
    $link = $tweet['link'];

    // hack around php null == 0 ugh!
    $xtwit = %u201Cx%u201D . $twit;
    $mark = strpos( $xtwit, %u201Chttp://%u201D );

    if ( $mark > 0 ){ // we have a link in our tweet perhaps more than one

    $l = substr ( $xtwit, $mark, strlen($xtwit) );
    $l = substr ( $l, 0, strpos( $l, %u201D %u201D ));
    $full_link = %u201C<a href=\%u201D$l\%u201D>$l</a>%u201D;
    $xtwit = str_replace ( $l, $full_link, $xtwit );
    $xtwit = substr ( $xtwit, 1, strlen($xtwit));

    print %u201C<br><p>$xtwit <a href=\%u201D$link\%u201D>#</a></p>%u201D;

    }else{

    print %u201C<br><p>$twit <a href=\%u201D$link\%u201D>#</a></p>%u201D;

    }
    $time = $tweet['pubdate'];
    $time = substr( $time, 0, strlen($time)-6);
    print  %u201D $time %u201C;

    }
1.7 Unique website for your Twitter updates Reloaded

An extended version of the Twitter website. Your own profile information is added, tweets from friends and a couple of random followers. Just check out the demonstration.

2. WordPress Twitter Plugins

2.1 Twitter for WordPress

Twitter for WordPress displays yours latest tweets in your WordPress blog. If you use WordPress widgets, just drag the widget into your sidebar and configure. If widgets are not your thing, use the following code to display your public Twitter messages:

<?php twitter_messages("username"); ?>
2.2 twitterRSS WordPress plugin

This plugin allows you to pull in an rss feed from your twitter account and display it on your site.

2.3 Twitter Tools

Twitter Tools is a plugin that creates a complete integration between your WordPress blog and your Twitter account.

2.4 Twitpress

Submits a user definable tweet to your twitter account notifying any twitter followers or friends that a new blog entry has been published on your blog (or an existing published entry has been edited). Supports inclusion of a permalink to your blog posting in the tweet.

2.5 Twitter Widget Pro

A widget that properly handles twitter feeds, including parsing @username and URLs into links. Requires PHP5.

2.6 Twitter Updater

The Twitter Updater automatically sends a Twitter status update to your Twitter account when you create, publish, or edit your WordPress post. You can specify the text for the updates, and also have the option to turn the auto update on/off for the different post actions in the admin panel.

3. Twitter Icons & Buttons

3.1 31 Logos et boutons pour Twitter

twitter status


31 twitter logos and buttons.

3.2 Twitter Icons For Blogs and Twitter bird

twitter status


A nice collection of twitter icons and twitter bird for using on Blogs.

3.3 The Cutest Freebies: Twitter Bird Icons & Illustration

twitter status


A free Illustration, beautifully made by < a href="http://darkmotion.com/">Pasquale D’Silva, and a couple of Icons which you can use for your twitter status sections of your site. The file is a transparent background PNG, so can easily be imported and scaled into any design.

3.4 FREE Twitter Icons For Your Website/Blog

twitter status


Free twitter icons for your website or blog.

3.5 Practika

twitter status


The icons are available in resolutions 64×64px, 128×128px and 256×256px, in 32-bit transparency PNG.

3.6 (max)Icone Blog – Set #3

twitter status


The icons are available in resolutions 64×64px, 128×128px and 256×256px, in 32-bit transparency PNG.

3.7 Free Hand Drawn Doodle Icon Set for Bloggers

twitter status


Free hand drawn doodle icons

3.8 The Leaves Fall

twitter status


3.9 IconTexto Webdev Social Bookmark

twitter status


3.10 It’s Twitter Time! Free vector icon set

twitter status


3.11 6 Free New Social Icons

twitter status


Now to check some really interesting twitter status designs compiled from some great websites out there, just visit this amazing post.

About the Author

The jungle is alive: Be it a collaboration between two or more authors or an article by an author not contributing regularly. In these cases you find the Noupe Editorial Team as the ones who made it. Guest authors get their own little bio boxes below the article, so watch out for these.

Homepage

Comments and Discussions
  • Marco, 19 November 2008

    Nice article, really rounding up some great Twitter tools / icons. Too bad none of my tools were listed;

    Mass Twitter Action and Retrieve Script
    http://www.marcofolio.net/webdesign/mass_twitter_action_and_retrieve_script.html

    Unique website for your Twitter updates Reloaded
    http://www.marcofolio.net/webdesign/unique_website_for_your_twitter_updates_reloaded.html

    Keep on bloggin’ !

  • Simon, 19 November 2008

    Hmm… this is a really great collection of Twitter tools

    I have a Twitter account with a few followers but rarely use it as it is very time consuming and time is something scarce. but I can see some of those tools really enhancing the “tweeting” experience :)

  • Noupe, 19 November 2008

    @Marco- Didn’t know about your post, thanks for sharing. I just added it to the post.

  • MarketingVeep, 19 November 2008

    Thanks for the list! Now I’ll dress up my blog.

  • Blogsdna, 19 November 2008

    Indeed great article on twitter. Twitter API lets the developer to build creative application, plugins and all of above are result of this creativity.

    Thanks for including post from Blogsdna.

  • James Deer, 19 November 2008

    Check out http://www.addtweets.com as well, it allows you to add tweets to your page really easily with a tiny bit of JS :)

  • James McDonald, 19 November 2008

    Hey thanks for displaying my Twitter icons, appreciated :)!

  • insicdesigns, 19 November 2008

    nice list. thanks for sharing

  • kiran, 19 November 2008

    Thanks for sharing.Great list…very useful.

  • David, 19 November 2008

    Hm, the icons in 3.7 includes the twitterific Icon which is copyrighted bi the iconfactory… Also my icon is not free: http://flickr.com/photos/fruehjahr/3009845447/

  • Webmaster Blog, 19 November 2008

    Thank you. Very nice list.

  • Mark, 19 November 2008

    Great work… again!

  • The Floating frog, 20 November 2008

    Great reference post. I’m very active on Twitter so I found this most useful.

  • Danh ba web 2.0, 20 November 2008

    Great post. Very cool and useful
    Keep up the good work. Thanks you very much !

  • Jon Williams, 21 November 2008

    I’ve been looking for the right twitter icon to put on my page. These are great. Thanks!

  • chanux, 23 November 2008

    What Iwas looking for. GREAT!

  • Andrei, 26 November 2008

    Awesome post. Exactly what I was looking for.

  • TheUssef, 01 December 2008

    Greate post :)
    thank you for the infos ^_^

  • Praveen, 03 December 2008

    woow.. nice birds collection.i could have used a single if i came across this post before i did my site
    :(

  • vanudin, 05 December 2008

    Thanks for Sharing…

  • Christopher Hennis, 06 January 2009

    Is this post of 2008? I don’t see a reason for any of these methods to display someones twitter tweets. Twitter.com offers 3 lines of code for you to cut/paste into your website to automatically do it, and you can style it with CSS. It’s nothing but a ul tag.

  • Alif Rachmawadi, 08 January 2009

    Cool designs and techniques, it makes me excite to tweets and blogs. thanks.

  • Mike, 11 November 2009

    Thank for the useful link.

  • Vladimir, 22 December 2009

    Thank you for very nice tips !

  • lolito, 25 April 2010

    goooood

    • lolito, 25 April 2010

      very good!!

  • Carvell, 18 July 2010

    twitter FTW

  • ANGELA, 15 October 2010

    when i stumbled upon this i thought it was going to be filled with obvious information, but actually it turned out to be quite interesting. good job!

  • morp, 17 October 2010

    wew… nice article dude….

  • Scott Langdon, 27 November 2010

    These are some good Twitter icons! I might use a few of these.

  • hafeesh, 10 January 2011

    Thank you. Very nice and clear list…………

  • Hans, 12 February 2011

    Great work… thx!

  • warcraft, 16 February 2011

    Very Nice site, I just came to know of it yesterday morning. Bookmarked this and also stumbled upon it. Thanks a lot,You had some nice ideas in the article, I enjoyed reading it.

  • Carroll B. Merriman, 18 February 2011

    Have a look at fivesquids – Things people are willing to do for five pounds.

  • Johnathan, 03 August 2011

    Nice work for me, thank for your collecting

  • Techumbrella, 05 April 2013

    Great designs. Thanks you!!

search form
 
image description image description