Add a Tweet This Button On WordPress and Blogger Without Using any Plugin

Twitter is great for spreading the word about your blog and win traffic. If you have a blog, you should definitely add a Tweet this button across all your posts so that the readers can tweet your blog posts easily.

There are a lot of WordPress plugins which lets you add a Twitter button in your blog’s theme. But why use another Plugin when you can just copy and paste a simple code to get the job done.

Add a Tweet This Button in your WordPress Theme

1. Login to WordPress administration area and go to “Theme editor”. Select the current theme of your blog and paste the following code before the </head> tag.

<script type=”text/javascript” charset=”utf-8″
src=”http://bit.ly/javascript-api.js?version=latest&login=tweettrackjs&apiKey=R_7e9987b2fd13d7e4e881f9cbb168f523″></script>
<script type=”text/javascript” charset=”utf-8″
src=”http://s.bit.ly/TweetAndTrack.js?v=1.01″></script>

In most of the cases, you have to edit the header.php file of your WordPress theme to find the </head> tag.

2. Open the single.php file and paste the following code where you want the “Tweet this post” link to appear:

<a rel=”nofollow” href=”#” onclick=”return TweetAndTrack.open(this, ‘<?php echo get_permalink();?>’);”>
<span style=”display:none;”><?php the_title();?></span>Tweet This Post</a>

3. Save both the files and open your blog to see the button in action.

Example: You can see a similar button working in this blog placed just under the post content.

Add Tweet this button in Wordpres without any plugin

Add a Tweet this Button in Blogger template

1. First, create a backup of your Blogger template to revert to older design in case something goes wrong.

2. To add the “Tweet this post” link go to Layout > Edit Html and select the checkbox “Expand widget templates”.

Add tweet this button in Blogger template

3. Copy the entire content of the template in a notepad file and use “Find” from the menu to find

<div class=’post-footer’>

add-tweet-this-code-blogger

4. Paste the following code just above the “post-footer” class.

<b:if cond=’data:blog.pageType == &quot;item&quot;’>
<script charset=’utf-8′ src=’http://bit.ly/javascript-api.js?version=latest&amp;login=tweettrackjs&amp;apiKey=R_7e9987b2fd13d7e4e881f9cbb168f523′ type=’text/javascript’/>
<script charset=’utf-8′ src=’http://s.bit.ly/TweetAndTrack.js?v=1.01′ type=’text/javascript’/>
<a expr:onclick=’&quot;return TweetAndTrack.open(this, \&quot;&quot; + data:post.url + &quot;\&quot;);&quot;’ href=’#'>
<span style=’display:none;’><data:post.title/></span>Tweet This Post</a>
</b:if>

Customizing the Link with an Image

Now that you have added the link successfully, you can customize the link by adding a Twitter icon just before the link. Add the following code before </a> tag:

<img border=”0″ src=”source of image file” width=”xx” height=”yy”></a>

Both the above codes work with the most popular URL shortener Bit.ly and thus you can easily track important statistics about the performance of your blog posts on Twitter.

Tip: Add a Bookmark this page link in your WordPress theme.

Email this article

Written by on Thursday, March 25th, 2010

  1. Reader Comments

  2. cathy

    hi. i did this to the T, but it didn’t work. I got this instead:
    Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: Open quote is expected for attribute “{1}” associated with an element type “cond”.
    any suggestions?

    April 12th, 2010
    • Amit Banerjee

      @ctachy: Try to copy the code in notepad and then copy from the notepad file into the blogspot template. The error has occured due to single quotes wrongly parsed. Hope that helps. Thanks for your comment

      April 12th, 2010
  3. cathy

    oh by the way, i’m using blogspot

    April 12th, 2010
  4. James

    nice sharing….

    July 22nd, 2010

Add Your Comment

All Comments are Moderated.

YOUR COMMENT

About This Site

Ampercent is a technology blog on computer tutorials, software guides, how to tricks and web tools. The blog is updated daily and written by two computer science students from India. Read More »

Tip Us »

Have a great tip which you want to share with fellow readers? Send in your ideas to tips@ampercent.com