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.

18 responses to “Add Social Media Buttons to Posts”

  1. Nancy Avatar

    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?

    1. Graph Paper Press Avatar

      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

  2. Vanessa Fukuyama Avatar
    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

    1. Graph Paper Press Avatar

      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.

  3. Gerald Avatar
    Gerald

    Extremely helpful. Thanks!

  4. A Conscious Life Avatar

    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!

  5. Caffeine Avatar
    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…

  6. Quinn Avatar
    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!

    1. Paul Turner Avatar

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

      1. Quinn Ryan Mattingly Avatar

        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.

    2. Danny Garside Avatar

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

  7. Mike Kircher Avatar
    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.

    1. Mike Kircher Avatar
      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.

  8. Kirsten Douglas Avatar

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

  9. Toufiq Hassan Avatar

    I want share Button without loading any JS, i will load in my post’s hook! Any help?

  10. leivreed Avatar
    leivreed

    Hey Thad! Thanks for sharing. I kinda suspected there would be a better way, like this, to implement these buttons. But what would’ve been extra extra amazing was if you could show us how to make one like you guys have here. The expandable share with counter button. Css and those things is fairly easy to grasp but the php/js stuff is harder.

  11. Steve Avatar
    Steve

    I’m wondering, would it be possible for you to show how to put a large custom facebook share button and a large twitter share button beside each other. The kind that pop open a small java window when you click on them and post to the site? I’ve included an image with the types of buttons i’m talking about.. the two at the end of the post.. ignore the others in the image.. thanks for the share!

  12. ome Avatar
    ome

    Help to marriage a poor girl. If you want to help . please call to this no. 09888705000 . his father is died . mother is very serious condition . please small amount of money help the girl marriage .

Leave a Reply

Your email address will not be published. Required fields are marked *