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); js.id = id;
  js.src = "//connect.facebook.net/fr_FR/sdk.js#xfbml=1&appId=141027616032307&version=v2.0";
  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="http://www.linkstraffic.net"></div>

You can change the url as described in the developer page :
https://developers.facebook.com/docs/plugins/share-button/

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 :
https://developers.facebook.com/docs/sharing/reference/share-dialog

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

<a href="https://www.facebook.com/dialog/share?
  app_id=145634995501895
  &display=popup
  &href=http%3A%2F%2Flinkstraffic.net%2F
  &redirect_uri=http%3A%2F%2Flinkstraffic.net%2F">YOUR OWN BUTTON</a>

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 : linkstraffic.net.

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="http://samples.ogp.me/136756249803614" /> 
<meta property="og:title" content="Chocolate Pecan Pie" />
<meta property="og:description" content="This pie is delicious!" /> 
<meta property="og:image" content="https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/851565_496755187057665_544240989_n.jpg" /> 

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 :
https://developers.facebook.com/docs/web/webmasters/

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

facebook-cracked

Leave a Reply

Want more information?

Related links will be displayed here in this section for you to pick up another good spot to get more details about Web marketing and Search Engine Optimization. There will be some sites which we selected to ease the work of any webmaster or/and web marketer on the Internet.

%d bloggers like this: