Add Social Media Buttons to Posts


There are hundreds of social media sharing plugins available in the WordPress plugin repository.  But did you know that it’s super duper simple to build your own and have it integrate nicely in your own WordPress theme?  Here is how:

Open up your theme’s functions.php and add this code to the bottom, right above the closing ?>

/**
 * Add Twitter & Facebook Sharing Icon to Posts
 */
function gpp_social_buttons_below($content) {
	global $post;
	$permalink = get_permalink($post->ID);
	$title = get_the_title();
	if(!is_feed() && !is_home() && !is_page()) {
		$content = $content . '<div class="social-links">
	<a href="http://twitter.com/share" class="twitter-share-button" data-count="none" data-url="'.$permalink.'" data-text="'.$title.'">Tweet</a>
	<div id="fb-root"></div><fb:like href="'.$permalink.'" layout="button_count" width="100" show_faces="false" font=""></fb:like>
</div>';
	}
	return $content;
}
add_filter('the_content', 'gpp_social_buttons_below');

Now open up footer.php and paste this code right below <?php wp_footer(); ?>

<script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>

Important: Implementing code snippets can be problematic unless users have basic syntax understanding. In some cases, your functions.php file might not have a closing ?>.  If this is the case, just paste the PHP function above at the bottom of the functions.php file.

If you’ve done everything right, all single posts will show Twitter and Facebook sharing icons at the end of every post.

This entry was posted in . Bookmark the permalink.

Posted by , Founder at Graph Paper Press

Thad is a photographer, designer and developer who embraces the evolution of storytelling on the web. He lives in Brooklyn, NY with his wife Abby.

  • Blog
  • Instagram

  • http://www.npbstudios.com/ Nancy

    I am using Fullscreen 2.5.0 and have looked all through the functions.php and there isn’t a ?> at the end.  Other options for where to place the social media buttons code?

    • http://graphpaperpress.com Graph Paper Press

      Hi Nancy,

      I just updated the post with helpful info at the end.  You should be able to just paste the php function above to the bottom of your theme’s functions.php file.
      Thad

  • Vanessa Fukuyama

    Hi, I’m using Focal Point theme…I had to update the footer.php in the Base, should I add the functions.php code to the Base theme or Focal Point theme?  Thanks! Vanessa

    • http://graphpaperpress.com Graph Paper Press

      I’d recommend adding them to Focal Point. You could also just copy the footer.php file from Base and put it in the Focal Point theme folder and add the two javascript lines to it.

      Always make sure you keep track of which theme files you are modifying because should you ever choose to upgrade, you will loose all theme file modifications.

  • Gerald

    Extremely helpful. Thanks!

  • http://www.aconsciouslife.com.au/ A Conscious Life

    Thank you so much for this!  Just put this on my new site http://www.aconsciouslife.com.au and it works perfectly!  Saved me a heap of time!

  • Caffeine

     If I wanted to use the icons in multiple different places on my site, how would I change the function so that I could just paste it into different templates? And how do I write the function call?

    Basically I want to remove the filter that adds them beneath the content so I can use them elsewhere…

  • Quinn

    Seems to work like a charm, thanks! Quick question though, right now the buttons are stacked, twitter on top, fb on the bottom. I’d like to have them next to each other, in a line. Anyway to do this? 

    Thanks!

    • http://www.facebook.com/paulturner0 Paul Turner

      I’d like to know this too please! did you ever figure it out?

      • http://twitter.com/QuinnRMattingly Quinn Ryan Mattingly

        i did, but not sure how. it was a while ago. you can have a look at the source code from my page, look for ‘rssicon’ in there somewhere and see if that might help.

    • http://www.facebook.com/da5nsy Danny Garside

      I’d be interested in knowing this too? Any ideas? Thad?

  • Mike Kircher

    Hi Thad. I’ve done as instructed. As a test i “liked” one of my posts and an image of my facebook page popped up and refused to go away. Did I copy and paste incorrectly? What would be the fix? Thanks in advance.

    • Mike Kircher

      OK, I see what’s happening now. Only part of the facebook window is coming up on my site when you click on the ‘f’ button. Don’t know what the problem is.

  • http://www.facebook.com/kirsten.douglas1 Kirsten Douglas

    I’ve implemented this code exactly (using modularity theme), but the facebook like is liking actual facebook.com and not my site. Any ideas?