Add Social Bookmarks to your WordPress Theme

In this short tutorial, we’ll be adding buttons to our WordPress theme to allow visitors to easily submit the current article to social bookmarking sites like Delicious, Reddit, Digg, StumbleUpon, Twitter and Facebook.

All of these sites provide a simple way to create these buttons. For example, to add an article to Reddit, the URL is: http://www.reddit.com/submit?url=THE-URL&title=THE-TITLE. As you can see, we just have to fill in the URL and the title for the submission.

I implemented this functionality into my recent ‘Magazine o’Tuts‘ template:

Getting Started

We’ll be applying this functionality to the default WordPress theme, and will use the Social.me icons by jwloh. Download these icons and place the following icons from the 48×48 folder into /wp-content/themes/default/images/

• delicious.png
• digg.png
• facebook.png
• feed.png
• reddit.png
• stumbleupon.png
• twitter.png

The social bookmarks will be displayed on the single post page, between the content and the comments. So open the default theme’s single.php file and enter the following directly above the line:

<div class="social">
 
 <h3>Share This Post!</h3>
 
 <a href="<?php bloginfo('rss2_url'); ?>" title="Subscribe to our RSS feed.">
   <img src="<?php bloginfo('template_directory'); ?>/images/feed.png" alt="Subscribe to our RSS feed." />
 </a>
 
</div>

Take a look at a post page on the blog, you should see the ‘Share This Post!’ heading, followed by an RSS image linking to your RSS feed:

Twitter, Reddit and StumbleUpon

Now we know everything’s in the right place, let’s create the first three social links; Twitter, Reddit and StumbleUpon:

<a href="http://twitter.com/home/?status=<?php the_title(); ?> : <?php the_permalink(); ?>" title="Tweet this!">
 <img src="<?php bloginfo('template_directory'); ?>/images/twitter.png" alt="Tweet this!" />
</a>
 
<a href="http://www.stumbleupon.com/submit?url=<?php the_permalink(); ?>&amp;amp;title=<?php the_title(); ?>" title="StumbleUpon.">
 <img src="<?php bloginfo('template_directory'); ?>/images/stumbleupon.png" alt="StumbleUpon" />
</a>
 
<a href="http://www.reddit.com/submit?url=<?php the_permalink(); ?>&amp;amp;title=<?php the_title(); ?>" title="Vote on Reddit.">
 <img src="<?php bloginfo('template_directory'); ?>/images/reddit.png" alt="Reddit" />
</a>

The create a Twitter submission, we are using Twitter’s URL API. The link will direct the visitor to their Twitter profile and automatically fill in their ‘Status’ textbox with the title of your blog post, followed by the URL.
All the user has to do, is hit ‘Submit’.

Both StumbleUpon and Reddit’s links are very similar. The link requires the URL for the article, and a title. Each will then take the user to the site’s ‘Submit a Link’ page, with all the fields automatically entered.

Take a look:

Digg, Delicious and Facebook

Just like before, these are also very similar:

<a href="http://digg.com/submit?phase=2&amp;amp;url=<?php the_permalink(); ?>&amp;amp;title=<?php the_title(); ?>" title="Digg this!">
 <img src="<?php bloginfo('template_directory'); ?>/images/digg.png" alt="Digg This!" />
</a>
 
<a href="http://del.icio.us/post?url=<?php the_permalink(); ?>&amp;amp;title=<?php the_title(); ?>" title="Bookmark on Delicious.">
 <img src="<?php bloginfo('template_directory'); ?>/images/delicious.png" alt="Bookmark on Delicious" />
</a>
 
<a href="http://www.facebook.com/sharer.php?u=<?php the_permalink();?>&amp;amp;t=<?php the_title(); ?>" title="Share on Facebook.">
 <img src="<?php bloginfo('template_directory'); ?>/images/facebook.png" alt="Share on Facebook" id="sharethis-last" />
</a>

But, There’s One Problem

Right now, all the links work, but there’s a slight problem with the Twitter one. We’re sending the whole URL to Twitter, which could be very long, and take the tweet over the 140 character limit.

The solution to this is to add in support for one of the many URL shorteners available. We’ll be using TinyURL.com as it is the easiest to incorporate into a site.

Inside the theme’s functions.php file, enter the following below the first line to create a get_tiny_url() function:

function get_tiny_url($url) {
 
 if (function_exists('curl_init')) {
   $url = 'http://tinyurl.com/api-create.php?url=' . $url;
 
   $ch = curl_init();
   curl_setopt($ch, CURLOPT_HEADER, 0);
   curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
   curl_setopt($ch, CURLOPT_URL, $url);
   $tinyurl = curl_exec($ch);
   curl_close($ch);
 
   return $tinyurl;
 }
 
 else {
   # cURL disabled on server; Can't shorten URL
   # Return long URL instead.
   return $url;
 }
 
}

So we start by creating the function and accepting a URL as a parameter. On line 3, we check whether the server running the WordPress installation has cURL enabled – most will, but it’s good to have a fall-back to avoid any errors.

cURL is a PHP function used to interact with other websites. If cURL does exist, we send a request to TinyURL’s API. We provide it with the current URL, and it will return a TinyURL shortened version.

If cURL is disabled, we will have no choice but to use the full-length URL instead.

To implement this function, edit the Twitter link to:

<a href="http://twitter.com/home/?status=<?php the_title(); ?> : <?php echo get_tiny_url(get_permalink($post->ID)); ?>" title="Tweet this!">
  <img src="<?php bloginfo('template_directory'); ?>/images/twitter.png" alt="Tweet this!" />
</a>

Finally, add these two styles to the bottom of style.css:

.social {
 text-align: center;
}
 
.social h3 {
 margin-bottom: 10px;
}

Try it out! Click the Twitter button, and you should get a TinyURL (unless your server has cURL disabled).

Dan

This contributor has published 11 articles so far and their bio is coming soon!

• An HTML-Friendly Template System using PHP's Output Buffering
• How to Achieve Cross-Browser @font-face Support
• Deleting Multiple Records with PHP