preload preload


The Big Social Buttons – Retweet (Twitter) – Part 1

Today is the world of getting social.

Every website owner including me is thriving to get more peoples on-board. Why? More users means more visibility, more traffic and finally more revenues. And the upcoming social sites like Facebook, Twitter, Digg etc are becoming an important media for the website owners to promote their content to the wide audience and attract their loyalty towards their site. Not only us, the social sites has also came up with loads of tools which we guys can utilize to easily share our data with the world.

One easy tool which always come first on our mind when thinking about sharing effectively is -

Social Buttons

Most likely, every social site is having a quick button tool which we can embed on our site to allow us and other peoples visiting us to share and promote our content to the friends.

Starting with this post (part 1), we are going to discuss about the how to use these social buttons on our site effectively to gain attraction of peoples and make them to share using it. I will try to cover about the details of these buttons individually and what are the different options available to embed them. So bear with me….

The Retweet Button

The Tweetmeme retweet button is great and easy way to share the content on the biggest of social site Twitter. People who like the website content can simply click on the button and can add the blog posts or website posts to their twitter stream. Their friends can again retweet the same post by just clicking on the same button. Not only this button gets your users more engaging with your website, it also decides about the trending topics of world wide web and being Twitter penetrated into each and every system, it provides the most visibility.

Anatomy of Retweet Button

Retweet Button

Retweet Button

The retweet button is made up of two sections. The upper section holds the number of twitter users who have tweeted the posts. The lower section is the green button which users can click to tweet the content.

The retweet button is available in two flavors – JavaScript and Image based.

The JavaScript button is intended to be used primarily into websites whereas the image button is more usable for the delivery channels where there is least possibility of executing JavaScript i.e. RSS feeds, emails etc.

The JavaScript edition of the retweet button has a simple java-script to embed in the site. The basic version of javascipt based button will create the button and tweet the current url of page. It even allows certain parameters to customize the behavior of the button. They are:

1. tweetmeme_url : This is the final destination url (not the url shortened one) which you want to be tweeted. This parameter is more suited in the places where you want only the necessary part of url should be included in the link to be tweeted. For e.g. – your url to the page after removing the session parameters or user specific parameters.

2. tweetmeme_source : This parameter allows you to retweet using your twitter account instead of default i.e. tweetmeme.

3. tweetmeme_style : There is also a compact edition of retweet button available which is less than the size of normal retweet button. If tweetmeme_style has been set to “compact“, it will enable the compact edition of retweet button.

4. tweetmeme_service : Sometimes it is required that we would be interested to change the default url shortener of  Tweetmeme (i.e. http://bit.ly) . To do that, we can use this parameter. Setting the value to any other url shortener will override the default setting of Tweetmeme. Also, couple of times there is a service api associated with these url shorteners. In such situations we can define service_api parameter along with tweetmeme_service parameter.

5. tweetmeme_alias : Say we have already created a short url version for our blog or website posts. To use the same url instead of let tweetmeme generate one, we can use this parameter.

6. tweetmeme_hashtags : Using this parameter, we can append hashtags at the end of tweet which retweet button generates. This way, people searching the twitter using the hashtags can quickly locate them. Any number of hashtags can be added using this parameter by listing them as a comma separated value.

7. tweetmeme_width : You can set the retweet button width using this parameter. The value of this parameter should be any nonzero number. Lets take us an example now. The following script shows the demo of all the parameters used in the Javascript retweet button.

<script type="text/javascript">
tweetmeme_url = "http://google.com";
tweetmeme_source = "voidweb";
tweetmeme_style = "compact";
tweetmeme_hashtags = "retweet,twitter";
tweetmeme_width = 500;
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>

Pretty neat huh!!!

Let us now get onto the Image version of retweet button. The Image version is also very simple to embed and it also some few parameters then which we have used for the JavaScript version.

An example format is

<a href="http://api.tweetmeme.com/share?url=<url>"><img src="http://api.tweetmeme.com/imagebutton.gif?url=<url>&alias=<alias>&service=<service>&service_api=<api>" height="61" width="51" /></a>

How to add Twitter Retweet Button on your website?

Practically, it is straightforward to integrate retweet button on our website or blog or emails or RSS feeds without any hassle. We just can add either the JavaScript version or Image version as explained earlier and are ready to flash it on our web pages.

Alternatively, there are also number of plugins available for different platforms to quickly integrate the button on your website.

Wordpress

- TweetMeme Button for Wordpress

- Topsy Retweet Button for Wordpress

Typepad

- Retweet TypePad Widget

Blogger

- Retweet for Blogger

If you have more links to some retweet plugins which I have not included in this post, you can comment them. And btw, I would be interested in knowing too which plugins do you use.

FYI, how I use the retweet button on this site? I dont use any plugins, I have wrapped it around a <div> block and sets its position as fixed. This way it can remain at the same position even when you are scrolling through long posts and provides easy reach to it.

Hope you liked the post. Stay tuned for the Part – 2 though.

Liked the content? Then why not share with your pals

  • Leave a Reply

    * Required
    ** Your Email is never shared