How to Add a Live Facebook Share Button to Your WordPress
You have probably seen the famous retweet button by tweetmeme on various blogs. We have written a tutorial in the past about how to add a retweet button on your blog. Now fbshare.me introduces a live Facebook share button that keeps count of the link shared on Facebook, and it allows people to share links through this link just like tweetmeme button. In this tutorial, we will show you how to add a facebook share button to your WordPress.
There is a widget that you can download to make the process easy and automated.
For code junkies, and those who do not like to use plugins here is the code you would need to add in your theme file.
<script src="http://widgets.fbshare.me/files/fbshare.js"></script>
This code will most likely be placed in your single.php. Make sure that you use the appropriate styling to make it fit your needs. The code mentioned above is a general code, and it will show a large button with the count, but if you want to know the parameters that you can use, here they are:
- size – The size of the button: ‘large’ OR ‘small’ (if not specified, defaults to ‘large’)
- url – The URL of the page you want shared on Facebook (if not specified, defaults to that of the page on which the button is displayed)
- title – The name of the page you want shared on Facebook (if not specified, defaults to that of the page on which the button is displayed)
- google_analytics – If no awesm_api_key specified, sets whether fbshare.me links have Google Analytics parameters added: true OR false (if not specified, defaults to false)
- awesm_api_key – For existing awe.sm customers only (if not specified, will use fbshare.me links)
So an advanced code will look like:
<script>var fbShare = {
url: 'http://www.wpbeginner.com',
size: 'small',
google_analytics: 'true'
}</script>
<script src="http://widgets.fbshare.me/files/fbshare.js"></script>
Feel free to customize it to fit your needs. We are planning to add this on our next design update as well.
Comments
7 Responses to “How to Add a Live Facebook Share Button to Your WordPress”Share Your Opinions
Tell us what you're thinking...
and if you want a pic to show with your comment, then get gravatar!
Please make sure that you have read our Comment Policy.
Good idea to make the button similar to Tweetmeme, more bloggers will be more apt to use it.
Yes, we are planning on adding it in our site as well in the coming site update.
Few Days back facebook also released an official facebook share count button.. Though if I compare fbshare.me and facebook official button.. My vote will go for fbshare.me one…
Thanks for this. Offering the facility to share on Facebook should be a good way of generating more traffic for a blog.
I put both FB Share & TweetMeMe on my site manually(without the plugin) as suggested here for my single.php. How should the code go if I want it in my index.php? I tried it and the data doesnt show correctly that way. If I want to share a post from the index.php they all show the same info for each post and they all link back to my index page instead of the post. I’ve seen it work correctly on other sites but I dont know if they’re using the actual plugin or not. I didnt want to use the plugin bc it wasnt validating. Does anyone know what I should do? Any help would be most appreciated!
You would have to add the code manually inside the >> loop << for it to work on your index.php file.
the official FB “Share” widget works fine, but intermittently the counter section will “hide itself” for some reason. This is annoying when I have a Retweet button, Buzz, StumbleUpon, etc. and there’s the FB Share button about 1/4 the height of the rest.
SO, I tried the fbshare.me plugin… my issue with this: when testing it out, it doesn’t match the current number of shares in the official FB “Share” widget that’s already on the page… like, a 2,200+ share was only 450 with the fbshare.me plugin. what gives?!