How to add a tweet this button with auto TinyURL or Bit.ly shortening

Article Last Updated: 5^th Dec 2009
Posted by Ruhani Rabin in Wordpress | Comments | |

How to add a Tweet This button to your wordpress posts without using any plugin or widget? Well there are few sites allow you to do that. But for instance I want the control to be in my hand and it’s pretty much no point of using a plugin or widget to do this kind of job. Why? because each time a plugin/widget loads, it takes away cpu and ram resources from server. So let me show you a nifty simple way to add a cool Tweet This button to your wordpress posts including automatic creation of TinyURL/Bit.ly url for your post. The automatic TinyURL creation for wordpress post already published at WPRecipes website but it was not implemented in their Tweet This post options. Additionally I’ve added Bit.ly API usage code by my own. Bit.ly dynamic creation of urls offers statistics and usage information (free registered account). Let me show you the implementation of that in a more useful manner.

First of all in your wordpress theme directory you should have a functions.php file which contains common functions to be used inside your themes. In case you don’t have one, create a file called functions.php inside your favorite wordpress theme directory. Now open the functions.php file and add this function which will allow you to create TinyURL.com urls on demand.

Code to generate tinyurl inside your themes functions.php:

// Ondemand function to generate tinyurl
function getTinyUrl($url) {
     $tinyurl = file_get_contents("http://tinyurl.com/api-create.php?url=".$url);
     return $tinyurl;
}

or you can add bit.ly JSON API to create dynamic bit.ly urls on the fly. Bit.ly offers tracking features for the urls generated. This is a little bit more tricky (Note: this requires an user account at http://bit.ly and a API key, Once you login to your Bit.ly account you can find it here). The sample code below (don’t forget to change the login name and api key)

// Ondemand function to generate dynamic bit.ly urls
function getBitlyUrl($url) {
    // fill up this 2 lines below with your login and api key
    $bitlylogin = 'yourlogin';
    $bitlyapikey= 'yourapikey';

    // you dont need to change below this line
    $bitlyurl = file_get_contents("http://api.bit.ly/shorten?version=2.0.1&longUrl=".$url."&login=".$bitlylogin."&apiKey=".$bitlyapikey);  

    $bitlycontent = json_decode($bitlyurl,true);

    $bitlyerror = $bitlycontent["errorCode"];

    if ($bitlyerror == 0){
        $bitlyurl = $bitlycontent["results"][$url]["shortUrl"];
    }
    else $bitlyurl = $url;

    return $bitlyurl;
}

Ok once you are done with the code, save and close the functions.php file and open your single.php file which is your wordpress single post view template. Now you can add the piece of code underneath the function called the_content(). Add this sample code underneath there to generate an image with the link to post to twitter and additionally append the post title and post tinyurl along with it. See below.. here is the sample of a single.php file.

<!-- looking for the_content() -->
<?php the_content(); ?> 

<div class="SocialIcons">
<!-- Note Below -->
<a target="_blank" title="Share this article with your Twitter followers" href="http://twitter.com/home?status=Reading%3A+<?php the_title(); ?> - <?php
 $turl = getTinyUrl(get_permalink($post->ID));
 echo $turl;
 ?> (via @ruhanirabin)" rel="nofollow" class="social-bookmark"><img alt="Tweet this!" src="<?php bloginfo('template_directory'); ?>/twitter.png"/></a>

</div>

Note that the above code must have the proper image file (twitter.png file in your theme directory) to display it properly. Also you can switch the function names to getTinyUrl to getBitlyUrl.

Now this is how it looks like when you click on the button and it opens twitter to post the status entry. The entire line is generated from the button itself including the tinyurl link.

As you can see above that you don’t really need any 3rd party widget or plugin to accomplish the Job because it’s pretty fast to do and you are in control of the look and feel, not to mention you can save your resources. For a live example you can use the Twitter icon from my Social media icons bar.

Alternative Reading

There is another good post about this at labnol.org. It’s the javascript based chiklet implementation of this similar topic.

• Integrate social networking in wordpress using facebook connect api and wordpress plugin tutorial
• How to style the latest post in wordpress
• How to Change Wordpress Permalinks without affecting Google
• How to display the latest post from each category using wordpress query_posts
• Easier way to add facebook connect to your blog using WP-FacebookConnect plugin
• WP-Optimize Database Cleanup and Optimization Plugin for Wordpress
• Secrets of How to ReTweet Effectively Better
• Easy steps to Facebook Connect Comment Box [How to]

About Ruhani Rabin

Ruhani Rabin is the original owner and author of this blog. He also reviews web 2.0 startups at Tech2all.com. Largely interested in web 2.0 apps & Social Media. Currently the Vice President of MOL Access Portal (MOL is owner of Friendster.com). Also he is Web 2.0 & Social Media Researcher and a Total fun Geek!.. There you have it ;)

Twitter Profile: http://twitter.com/ruhanirabin