How to add Fb share button

This Article covers how we can add a facebook share button on our website using simple methods. Below is the step by step guide to do so :

1. Choose URL or Page

Pick the URL of a website or Facebook Page you want to share.

2. Code Configurator

Paste the URL to the Code Configurator and adjust the layout of your share button. Click the Get Code button to generate your share button code.

3. Copy & Paste HTML snippet

Copy and past the snippet into the HTML of the destination website.

Copy & paste the code example to your website. Adjust the value data-href to your website URL. Next use the og:***meta tags to adjust your link preview. og:url and data-href should use the same URL.

<html>
<head>
<title>Adding WhatsApp Click to chat on web</title>
<meta property="og:url"           content="https://www.your-domain.com/your-page.html" />
<meta property="og:type"          content="website" />
<meta property="og:title"         content="adding-whatsapp-click-to-chat-on-web" />
<meta property="og:description"   content="Ever wonder how to add click to chat functionality on your Webpage" />
<meta property="og:image"         content="https://www.your-domain.com/path/image.jpg" />
</head>
<body>
<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 = "https://connect.facebook.net/en_US/sdk.js#xfbml=1";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));</script>
  <div class="fb-share-button" 
  data-href="http://itgiggs.in/adding-whatsapp-click-to-chat-on-web/" 
  data-layout="button_count">
</div>
</body>
</html>

Settings

Setting HTML5 Attribute Description Default
href data-href The absolute URL of the page that will be shared. XFBML and HTML5 versions default to the current URL.
layout data-layout Selects one of the different layouts that are available for the plugin. Can be one of box_countbutton_countbutton. icon_link
mobile_iframe data-mobile_iframe If set to true, the share button will open the share dialog in an iframe (instead of a popup) on top of your website on mobile. This option is only available for mobile, not desktop. For more information see Mobile Web Share Dialog. false
size data-size The button is offered in 2 sizes i.e. large and small. small

Note : The above Article is Taken from Facebook Developers website

Add a Comment

Your email address will not be published. Required fields are marked *