Integrate facebook like and share button on your website

by Posted on

This simple step by step tutorial will help you to integrate facebook like and share button on your website, We all know facebook is one of the great platform to promote our business or products, So if you add facebook like and share button on your website then you can get more referral visitor from facebook.

Step-1: Facebook officially created tool for adding like and share button on websites, So i am going to use this tool.
Hit this url: https://developers.facebook.com/docs/plugins/like-button#configurator

After that you’ll able to see the window.
fb-like

Where
Step-2: URL to Like:- Enter the url of the page where you are going to integrate it.

Step-3: Width:- You can enter custom plugin width in pixel.

Step-4: Layout:- You can choose different different layout for your plugin.

Step-5: Action Type:- You can choose button type between like and recommend.

Step-6: you can also set the option whether you want to display user faces and share
button on page by Show Friends’ Faces and Include Share Button check box.

Step-7: Now finally click on Get Code button

You’ll see the code which have to add on that page where you are going to integrate like and share button



Step-8: > Include the JavaScript SDK on your page once, ideally right after the opening tag.

<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/en_GB/sdk.js#xfbml=1&version=v2.5";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Step-9: Place the code for your plugin wherever you want the plugin to appear on your page.

<div class="fb-like" data-href="http://pincodes.iamrohit.in" data-layout="standard" data-action="like" data-show-faces="true" data-share="true"></div>

If you want to customize the share button link preview then you need to add some meta tags in your web page.

    <meta property="og:url"           content="http://www.your-domain.com/your-page.html" />
    <meta property="og:type"          content="website" />
    <meta property="og:title"         content="Your Website Title" />
    <meta property="og:description"   content="Your description" />
    <meta property="og:image"         content="http://www.your-domain.com/path/image.jpg" />

DEMO

Hope this tutorial will help you to integrate facebook like and share button on your website.

If you like this post please don’t forget to subscribe my public notebook for more useful stuff.

Published by admin