Adding A Twitter Social Bookmark To Your Blog
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:
- A Twitter Icon: Some nice free (some require attribution) ones can be found here or search Google for ‘free social bookmark icons‘.
- A URL shortening function
- 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 tinyurl.com & 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:
|
1 2 3 4 |
function getTinyUrl($url) { $short = file_get_contents('http://tinyurl.com/api-create.php?url='.urlencode($url)); return $short; } |
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:
|
1 2 3 4 5 6 7 8 9 10 |
function getTinyUrl($url) { $ch = curl_init(); $timeout = 5; // set to zero for no timeout curl_setopt ($ch, CURLOPT_URL, 'http://tinyurl.com/api-create.php?url='.urlencode($url)); curl_setopt ($ch, CURLOPT_RETURNTRANSFER, 1); curl_setopt ($ch, CURLOPT_CONNECTTIMEOUT, $timeout); $short = curl_exec($ch); curl_close($ch); return $short; } |
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:
|
1 |
<a href="#"><img src="/path/to/twitter/icon" /></a> |
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:
|
1 2 3 4 |
<?php $twiturl = urlencode('Reading: '.get_the_title().' - '.getTinyUrl(get_permalink())); ?> <a href="http://twitter.com/home?status=<?php echo $twiturl; ?>" title="Submit This Post To Twitter"><img src="/path/to/twitter/icon" /></a> |
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.
