Add Facebook, Twitter, Linkedin, Google+ & Pinterest Buttons to WordPress

Ok, you can probably do this easy with a plugin but I’ve over 50 active plugins on this site and it feels like an awful lot sometimes and can it affect the perforamce of my site. You can accomplish a lot of the tasks plugins achieve by using manual code in your template files and it gives you a bit more control over styling, position etc.. Among the easiest things to code into templates are Social Sharing buttons to allow people to share your posts on the big gun Social Networking sites like Facebook, Twitter, Linkedin and now Google+.

I’ll cut to the chase and give you the simple code below. All of these go into the “single.php” file most of the time at a position of your choosing either above or below the content:

Facebook Like Button

<iframe style="border: none; overflow: hidden; width: 95px; height: 21px;" src="http://www.facebook.com/plugins/like.php?app_id=142128822547792&amp;href=<?php echo urlencode(get_permalink($post->ID)); ?>&amp;send=false&amp;layout=button_count&amp;width=95&amp;show_faces=false&amp;action=like&amp;colorscheme=dark&amp;font&amp;height=21" frameborder="0" scrolling="no" width="320" height="240"></iframe>

Get your own Facebook app id from within your own account and plug it in above instead of mine. You can edit some of the parameters above too like width, height, colours, etc..

Tweet Button

<a type="text/javascript" href="http://twitter.com/share" data-count="horizontal" data-via="reverbstudios">

Put your own Twitter username in the ‘data-via’ parameter instead of mine.

Linkedin Share Button

<script type="text/javascript" src="http://platform.linkedin.com/in.js"></script><script type="in/share" data-url="<?php the_permalink(); ?>" data-counter="right"></script>

Google+1 Button

<g:plusone size="standard" href="<?php the_permalink(); ?>"></g:plusone>

And put this in your theme’s ‘footer.php’ file just above the closing tag:

<script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>

Pinterest ‘Pin it’ Button

<a href="http://pinterest.com/pin/create/button/?url=<?php the_permalink(); ?>&media=<?php $thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'thumbnail' ); echo $thumb['0']; ?>&description=<?php the_title(); ?>" count-layout="horizontal">Pin It</a>

And put this in your theme’s ‘footer.php’ file just above the closing </body> tag:

<script type="text/javascript" src="http://assets.pinterest.com/js/pinit.js"></script>

This Pinterest button code takes a post’s featured image to pin.

If you wrap the above codes in divs, you can style/position them quite easily. You can see how the buttons look and perform at the top of this post!

Happy Sharing.

Leon

This Article has had 3,633 views so far.

Posted in How to Guides, Wordpress Tips on May 4th, 2012
Tags: facebook, google, linkedin, pinterest, social networking, social sharing, Twitter, wordpress
Follow responses to this article through the RSS 2.0 feed.
leave a Comment, or Trackback from your own site.