How to Create Super Fast Retweet web 2.0 Widgets

How to Create Super Fast Retweet, Delicious and Facebook Share Widgets

Javascript based widgets can slow down your pages to a crawl. Not only they affect the overall page loading time, but sometimes also delay the loading of the real content, which is a major turnoff for your site’s visitors.

There are very good reasons why Javascript widgets are a cause of page slow-down.

1. Unoptimized code. Heavy usage of document.write function. Loading too many external scripts (javascript/css/images).
2. Slow server of widget host. The widget keeps loading and in the process blocks the more important content.

Today, I’ll show you how to create custom retweet, delicious save and facebook share widgets (with share / save count in plain text) using PHP, so your pages load with lightening fast speed.

Apart from the speed benefit, the HTML markup generated by my code is simple and can be styled with CSS the way you want it!.

Retweet widget (with topsy API)
This widget will use topsy otter API to generate a retweet widget. Example on the top right of this post (custom style).

Code:

<?php
   $shareUrl = urlencode(get_permalink($post->ID));
$shareTitle = urlencode($post->title);
$retweetNick = 'wpsplash';
$retweetInfo = json_decode(file_get_contents('http://otter.topsy.com/stats.json?url='.$shareUrl));
?>
<div class='retweet'>
    <a href='<?php echo $retweetInfo->response->topsy_trackback_url; ?>' class='count'>
        <span class='number'><?php echo $retweetInfo->response->all; ?></span>
        <span class='unit'>tweets</span>
    </a>
    <a href='http://button.topsy.com/retweet?nick=<?php echo $retweetNick; ?>&title=<?php echo $shareTitle; ?>&url=<?php echo $shareUrl; ?>' class='button'>Retweet</a>
</div>

1. shareURL: url of the page
2. shareTitle: title of the page which will be used as retweet text
3. retweetNick: twitter username that will appear in retweet message of the text

PHP5 requirement since it uses json_decode function.
Delicious Save Widget
This will generate a delicious widget as seen on the bottom of this post. You can however style it as per your choice with CSS.

Code:

<?php
   $shareUrl = urlencode(get_permalink($post->ID));
   $shareTitle = urlencode($post->title);
   $deliciousStats = json_decode(file_get_contents('http://feeds.delicious.com/v2/json/urlinfo/data?url='.$shareUrl));

?>
 
<a onclick='window.open("http://delicious.com/save?v=5&noui&jump=close&url=<?php echo $shareUrl; ?>&title=<?php echo $shareTitle; ?>", "facebook", "toolbar=no, width=550, height=550"); return false;' href='http://delicious.com/save?v=5&noui&jump=close&url=<?php echo $shareUrl; ?>&title=<?php echo $shareTitle; ?>' class='delicious'>
<?php
if($deliciousStats[0]->total_posts == 0) {
    echo 'Save';
} elseif($deliciousStats[0]->total_posts == 1) {
    echo 'One save';
} else {
    echo $deliciousStats[0]->total_posts.' saves';
}
?>
</a>

1. shareURL: url of the page
2. shareTitle: title of the page

PHP5 requirement since it uses json_decode function.

Facebook Share Widget
This will generate facebook share widget as seen on the bottom right of this post. Like delicious widget, you can style it with CSS.

Code:

<?php
   $shareUrl = urlencode(get_permalink($post->ID));
   $shareTitle = urlencode($post->title);
   $fbLinkStats = simplexml_load_file('http://api.facebook.com/restserver.php?method=links.getStats&urls='.$shareUrl);

?>
 
<a onclick='window.open("http://www.facebook.com/sharer.php?u=<?php echo $shareUrl; ?>&t=<?php echo $shareTitle; ?>", "facebook", "toolbar=no, width=550, height=550"); return false;' href='http://www.facebook.com/sharer.php?u=<?php echo $shareUrl; ?>&t=<?php echo $shareTitle; ?>'  class='facebookShare'>
 
<?php
if($fbLinkStats->link_stat->total_count == 0) {
    echo 'Share';
} elseif($fbLinkStats->link_stat->total_count == 1) {
    echo 'One share';
} else {
    echo $fbLinkStats->link_stat->total_count.' shares';
}
?>
</a>

1. shareURL: url of the page
2. shareTitle: title of the page

PHP5 requirement since it uses simplexml library.

This is it! You got customizable Retweet, Delicious, and Facebook share widgets with share count and all, that do not slow down your page

What icon pack are you using on WPSplash?
We are using Social Media Netework Icons Pack by Komodo Media. They are beautiful!
http://www.komodomedia.com/blog/2009/06/social-network-icon-pack/
How do I optimize X widget?
se the API offered by the widget’s site with your favourite server-side language, PHP in case you’re using WordPress. Also, post your requests in comments. We’ll make updates to this post and send status updates via twitter. Follow WPSplash on Twitter, and subscribe to RSS feed.
http://twitter.com/WPSplash

http://www.feedburner.com/