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.

Written by on Thursday, March 25th, 2010

ADVERTISEMENTS

You may also like to read:

  1. Get The LinkedIn Share Button For Your Website
  2. How to Show Category and Tag Descriptions In WordPress Theme
  3. Add QR Codes To Your Blog Posts For Easy Distribution Of Content [WordPress]
  4. How to Show Adsense Ads Only On Longer Posts in WordPress
  5. How to Implement Adsense Revenue Sharing Using a Single Adsense Account in WordPress and Blogger