Adding A Twitter Social Bookmark To Your Blog

/ PHP, Wordpress / by Paul Robinson / 0 comments
This post was published back on February 17, 2010 and may be outdated. Please use caution when following older tutorials or using older code. After reading be sure to check for newer procedures or updates to code.

This tutorial is going to show you how to add a Twitter social bookmark icon on your blog. It involves a fair amount of PHP so familiarity with PHP would be nice, but isn’t required. Here is what we need to do this:

  1. A Twitter Icon: Some nice free (some require attribution) ones can be found here or search Google for ‘free social bookmark icons‘.
  2. A URL shortening function
  3. A link to Twitter

First I am going to assume you have sorted a nice Twitter icon. If you haven’t go ahead & do it now, I’ll wait… Done? Good. Next we will create a function that will connect to URL shortening service & return a shortened URL. You can use other services, but tinyurl is the best that doesn’t require an API key to use, in my opinion.

URL Shortening

Let’s write that function. While this is technically a WordPress tutorial you can also use the same principles on a non WordPress blog, just replace the WordPress functions I’ll be using later with the correct equivalent information. Here is the function for shortening URLs with tinyurl:

You must have ‘allow_url_fopen’ enabled for file_get_contents() to work via URL. If it doesn’t work there is a chance it is disabled. If that is the case you can try using a cURL version like this:

If you are using WordPress the best place to put this function is in your themes functions.php file. Now that we have that shortening function sorted we can get onto linking up our twitter icon.

Linking The Twitter Icon

First you just need a traditional image tag with a link around, so something like this:

Once you have that, with the correct link to the image obviously, we can continue. I’ll write the whole thing first & then explain it:

Ok to neaten things up a little we set all the information we want to send to Twitter into a variable. The info consists of a message, in this case ‘Reading:’, the current post title, a separator, and the shortened URL to the post. These are all URL encoded so they can be passed safely via GET (URL) to Twitter. Then we echo all this info onto the end of a link to the home page of Twitter under the status variable. This variable, if detected by Twitter, will pre-fill the status field with the information provided, the user can then just hit the submit button on Twitter et voila.

There you have it. A simple way to add a Twitter social bookmark icon to your WordPress blog (or any other type of site for that matter). The great thing about doing it this way is that no plugins are involved & so you save valuable server resources. As always if you have any questions or just want to say ‘cool tutorial’ drop it in the comments. 😉 If you want to see an example the Twitter icon below (and slightly to the right) uses the same code.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

I'll keep your WordPress site up-to-date and working to its best.

Find out more