Adding “Tweet This” and “Share This” Links to Your Blog


There are many content sharing sites on the Internet (digg, slashdot, deli.icio.us, reddit) but in order to add their sharing buttons to your blog you, for the most part, need access to the backend programming of the server, need to be able to add javascript (which wordpress for one will strip from your post) or need an account on those sites to be able to send the post.

Each of those sites describes in great detail how to add their links. Some blogs even have widgets or add-ons that enable that for you. I use WordPress as my blog host, it has a widget to allow me to send my blog post to my own Twitter account, but there are no mechanisms to allow my readers (all 4 of them) to share the post with their social circle. I had to dig around a bit but I managed to figure out how to add these links to each blog post without using any javascript, php or other programming steps. It takes a bit of cutting and pasting bu the end result is well worth it.

Step 1:
Grab the icons, I have added a Twitter and Facebook icon below. Upload them to your blog, make them accessible for the next time you make a blog post. I have added links to the images in the media library of my blog here (twitter, facebook). These will form the image portion of the sharing links.

Step 2:
Get the “permalink” of your post. It will likely be displayed where you are creating the blog post. Hopefully before you have to post it but you may have to post first, grab the link and then update the post to add the links.

Here is the link URL to the post I am updating, Small Differences – Freedom.

Step 3:
You will have to put the link to your blog post inside an image link (this is HTML talk ;-). To do this you need to URLEncode the link to your blog post. There are many sites to do this, you can do it in your head if you want, I prefer to let someone else do the hard work. Here is a site that works…URLEncode…or search for your own on Google.

Here is the URLEncoding string to my blog post:

http%3a%2f%2fdanlargo.com%2f2010%2f02%2f09%2ffreedom%2f

The point of this exercise is to ensure no special characters (/-:;) etc are in the URL as it will totally mess up the browser when it tries to parse the link.

Step 4:
URLEncode the title of the blog or whatever you want the Twitter entry to say…keep it short Twitter only allows 140 characters.

In this case I will encode the string “Check it out”, as “Check+it+out”

Step 5:
Add the images for Twitter and Facebook to your post…

<img src=”http://URL_to_your_twitter_image&#8221; alt=”Share on Twitter”>

<img src=”http://URL_to_your_facebook_image&#8221; alt=”Share on Facebook”>

Step 6:

Wrap the image in an html anchor tag, this will turn the image into a link to Twitter. The Twitter link must be properly formatted or Twitter will not understand it. This link will simply kick up the Twitter home page and auto-populate the reader’s Tweet entry, they will still have to option of editing the link or not posting it at all.

The href part of the html anchor is

twitter.com/home?status=Blah+blah+blah%0d%0aURL

The “status=” tag is where you place your URLEncoded title and permalink that we created in steps 3 and 4, place a %0d%0a in between the title and the URL to include a new line.

The anchor link should wrap your Twitter image and does not need any descriptive text.

Paste this into your blog post and test it. It should kick up Twitter and populate the Tweet section, if your reader is not logged into Twitter it will ask for a login.

Step 7:
Wrap the Facebook image in an anchor tag, this will turn the image into a link to Facebook. As before the Facebook link must be properly formatted or Facebook will not understand it. This link will kick up the Facebook home page and auto-populate the reader’s status entry, they will still have to option of editing the link or not posting it at all.

The href part of the html anchor is

http://www.facebook.com/sharer.php?u=URL&t=blah+blah+blah

The “u=” tag is where you place your URLEndcoded permalink that we created in steps 3 and the “t=” tag allows you to place the title we encoded in step 4.

Facebook will allow the reader to included there own comment. Again the anchor tag should wrap the Facebook image.

There you go, now you have provided another way to share your content with a wider readership.

Share Share on Twitter Share on Facebook
Advertisements

3 Comments on “Adding “Tweet This” and “Share This” Links to Your Blog

  1. Excellent post, thanks!

    In step 7, under the facebook URL, I think you mis-spelled “sharer.php” as “sharer.pup”

  2. Pingback: My Blog: 2010 in review « Small Differences

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: