Simple Share

Intro

As you can guess this chapter will teach you how to create Facebook Simple Share button. At first we must talk about creating Facebook App. When you create an App, you will get its Id (App ID) and will use it in your webpage. Let's see what we must do for the beginning.

Facebook Gives you a script (Javascript SDK), which will help you to work with Facebook and use its APIs. Here is the script.

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

This code need to be connected once, so you don't have to connect it everywhere. Connect it anywhere in your application and you can use Facebook APIs everywhere. So now let's see how we can create a simple share button.

<!DOCTYPE html>
<html>
  <head>
    <title>www.w3docs.com</title>
  </head>
  <body>
    <div class="fb-share-button" data-href="//www.w3docs.com/" data-layout="button_count"></div>

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

Custom Properties

But now there is a question: how to customize the properties of share information? Facebook Simple Share gets all that fields from your webpage meta tags. Here is it.

<meta property="og:title" content="Some Content ..."/> 
<meta property="og:description" content="W3docs Facebook Simple Share Button."/>  
<meta property="og:image" content="//www.w3docs.com/uploads/media/book_gallery/0001/01/066705b46be05dfdde77a1bc60c120b76257b553.png"/>

Now let's see how to customize button.Here is the values of fields.

SettingHTML5 AttributeDescriptionDefault

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_count", "button_count", "button", "link", "icon_link", or "icon".

icon_link

Related Resources ΒΆ