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.
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?
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
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
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.
Extremely helpful. Thanks!
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!
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…
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!
I’d like to know this too please! did you ever figure it out?
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.
I’d be interested in knowing this too? Any ideas? Thad?
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.
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.
I’ve implemented this code exactly (using modularity theme), but the facebook like is liking actual facebook.com and not my site. Any ideas?
I want share Button without loading any JS, i will load in my post’s hook! Any help?
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.
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!
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 .