Customize Facebook Share button

Using the default share buttons from the facebook developpers center will make you add some code such as the following :

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); = id;
  js.src = "//";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

The above code is to be added within the page right after the body tag.
Then you need to add this one :

<div class="fb-share-button" data-href=""></div>

You can change the url as described in the developer page :

But if you wish to use your own button and simply redirect the user to sharing a link ?

You need to dig further in the documentation on the following page :

under URL Redirection, you have the code to share a link such as this :

<a href="

You need to fill in the right parameters for the link to work, for instance the app_id is mandatory and in order to generate a application ID, you will need to create a new application on Facebook. No worries, it’s free, easy and quick to achieve.
However there is one step you should to make your url active, you need to add the url of your page under the application parameters (Add platform – Website) and then add the app. domain, ie :

Only one more step and you are done :

Adding facebook meta tags to your page

With that type of code, facebook requires you to prepare your website to be shared among its network. They mention that it will help boost your website traffic.

Following is an example of the tags you should add :

<meta property="og:url" content="" /> 
<meta property="og:title" content="Chocolate Pecan Pie" />
<meta property="og:description" content="This pie is delicious!" /> 
<meta property="og:image" content="" /> 

If you are using WordPress, the WordPress SEO plugin is adding them for you. You may fill the details for each page independently.

For more details about these tags, refer to the url :

The rest is obvious, just add the code to your page along with the right button, for instance :


Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Want more information?

Related links will be displayed within articles for you to pick up another good spot to get more details about software development, deployment & monitoring.

Stay tuned by following us on Youtube.

%d bloggers like this: