Social Media Links

23. July 2009 | Written by Konstantin Obenland in WordPress | Tags: , , ,

screenshot_social-media-linksI used this grate article by Jeff Starr as an opportunity to make all entries on this website, available for communication through social networks.

At the bottom of each article, the reader is now provided five possibilities to recommend the post to friends his/her online.

There are a lot of plugins available now that will help you with implementing those kind of functions (i.e. Add to Facebook), but I don’t want to jeopardize my website’s performance and stability with third-party code. In the end of the day, these plugins just insert a link after each article dynamically, referring to the post’s URL. But with WordPress template tags like get_the_permalink() and get_the_title(), you can accomplish theses things hassle free in you theme templates.

To do this, you choose the template in which your links are supposed to appear (in my case it was the single.php since I only wanted to display them when a single post is read) and look for the part with the meta information for the article. I would make sense to include icons or links at the end of an article, because the user most likely expects them there and uses them, when finished reading. But you could also use a text widget in your sidebar or write it in the sidebar.php of you theme. This way its always exposed to the user, while navigating the site.

A link which includes the path to the article, the title and an icon could look like this:

<a title="Share on Facebook" rel="nofollow" href="http://www.facebook.com/sharer.php?u=<php the_permalink(); ?>&t=< ?php echo urlencode(get_the_title($id)); ?>">
<img src="<php echo get_bloginfo('template_url'); ?/>/images/social/facebook_share_icon.gif" alt="Share on Facebook" />
</a>

In my case, I created a distinct section underneath the post to make the reader aware of the possibilities at hand.

This is the complete code in the template:

<div>
<a title="Share on Facebook" rel="nofollow" href="http://www.facebook.com/sharer.php?u=<?php the_permalink();?>&t=< ?php echo urlencode(get_the_title($id)); ?>" target="_blank"><img src="<?php echo get_bloginfo('template_url');?/>/images/social/facebook_share_icon.gif" alt="Share on Facebook" /></a>
<a rel="nofollow" href="http://twitter.com/home?status=<?php echo urlencode(get_the_title($id)); ?>" target="_blank">" title="Tweet this!"><img src="<?php echo get_bloginfo('template_url');?/>/images/social/twitter_share_icon.jpg" alt="Tweet this!" /></a>
<a title="Digg this!" rel="nofollow" href="http://digg.com/submit?phase=2&amp;url=<?php the_permalink(); ?>" target="_blank"><img src="<php echo get_bloginfo('template_url');?/>/images/social/digg_share_icon.jpg" alt="Digg this!" /></a>
<a title="Bookmark at Delicious" rel="nofollow" href="http://delicious.com/post?url=<?php the_permalink(); ?>&title=< ?php echo urlencode(get_the_title($id)); ?>" target="_blank"><img src="<?php echo get_bloginfo('template_url');?/>/images/social/delicious_share_icon.jpeg" alt="Bookmark at Delicious" /></a>
<a title="Stumble this!" rel="nofollow" href="http://www.stumbleupon.com/submit?url=<?php the_permalink(); ?>&title=< ?php echo urlencode(get_the_title($id)); ?>" target="_blank"><img src="<?php echo get_bloginfo('template_url');?/>/images/social/stumble_share_icon.ico" alt="Stumble this!" /></a>
<span>< ?php printf(__('Written by %s in ', 'streamline'), the_author('','',false)); the_category(', '); ?></span> < ?php edit_post_link(__('Edit', 'streamline'), '| <span>', ''); ?> < ?php the_tags('| <span>Tags: ', ', ', ''); ?>
<!-- entry_footer ends --></div>

And the corresponding CSS:

.social {
float: left;
margin-right: 5px;
}

Happy Tweeting!

Konstantin Obenland

I've been programming for a couple of years now, and specialized in using Wordpress as a CMS. I put an emphasis on clean and readable code, while being focused on functionality and maintainablity.

Socialize!

If you enjoyed my article, feel free to bookmark and spread the word...

Leave a Reply