What's WP
Find Everything Related to WordPress - Best Tutoriasl on WordPress!
How to Add a Custom Facebook Share Button on WordPress

How to Add a Custom Facebook Share Button on WordPress

There are numerous social websites releasing their shared buttons such as LinkedIn Share Button, Tumblr Share Button and Twitter Share Button. We have written about how to embed the former two in detail. Now, we are going to tell you how to embed a custom Facebook Share Button on WordPress.

Compared with LinkedIn and Tumblr, Facebook is more casual, closer to daily life, and posses more users. On the one side, Facebook can be used to share daily lives, make new friends, and interaction with old friends. One the other side, because of its popularity, Facebook becomes one of the most popular promotion tools for business and commercial use for WordPress websites.

Add Facebook Share Button

At the beginning, you need to add the code (in the following)in your theme file and place the file to single.php. Then, go to your WordPress dashboard and you can see Settings on the left side. Click on Settings and there are several choices; you need to choose Sharing.

<script src="http://widgets.fbshare.me/files/fbshare.js"></script>

WordPress Settings

Now, you are in the Sharing window. Scroll down and you’ll see the picture bellow. There is a Facebook icon on Available Services. You need to drag the icon to Enabled Services area as the order suggests.

WordPress Dashboard

Then, expanding Facebook, there are three choices below: Default button, Share button and Like button. You choose Share button among them.

After all these have done, a new format will come out and you need to fill it out. For Service Name, you can fill in whatever you like, for example: Facebook. Next, for Sharing URL, copy this URL https://www.facebook.com/sharer/sharer.php?u=https://whatswp.com/

Add Facebook Share Button

For the icon URL, you need to make a picture for your Facebook Share button. You need to have a Facebook picture at first; then tailor the picture to 16x16px. Back to you WordPress, click on add new media and upload the picture that you made before.

After setting a picture, you can just click on Create Share. Here, the Facebook share button is successfully created and you can see the button on every post.

Customize the Button

CustomizeWhen the button is built, the next concern passes down to how to make it appealing and special. Thus, we’re going to discussing channels to make the button eye-catching. Generally speaking, there are two ways to achieve this: customize the picture and customize the background. No matter what methods you are going to use, the first thing you need to do is going to your dashboard to drag and drop Facebook icon to Enabled service.

To change the icon, you’d better download the official one and make simple changes to it such as add a little flower on the picture or turn it to have a little angel. The official one can be found on Facebook’s official site. https://www.facebook.com/sharer/sharer.php?u=https://whatswp.com/

On the background configuration, you can customize how the button behaves. There are four choices:

Customize the Button

  • Button Style allows you to decide whether you want the button icon only or the text link only or both.
  • Sharing Label ensures you customize the text. If you don’t want this, just leave it blank.
  • Open Links In gives you choices for opening the link in the same page or another one.
  • Show Buttons On means where you want the button shows such as front page, archive pages, search results, posts, pages and media.

Use Facebook Share Button Plugin

If you feel complicated to do this manually, then you can use Facebook Share Button plugin that allows your post or blog to be easily shared with a single click. Besides, it shows the number of times your post and the page has been shared on Facebook. It is fully compatible with Google +1 and Tweetmeme Button, supports for Facebook Shar API and Open Graph API, and has the ability to allow you customize whether displaying some specific pages/posts or showing the count of share. You can put is before, after, before and after on your posts and pages.

Facebook share button


Lucy has been a very experienced SEOer, technical writer, web developer, c# developer since 2002. Now she owns a startup in San Francisco, CA, focusing on running a couple of blogs to share knowledge and experience with global readers and deliver exceptional results to global sponsors by leveraging the power of Internet.