Intro

As you can guess, this chapter will teach you how to create Facebook Simple Share button. At first, we must talk about creating a Facebook App. When you create an App, you will get its Id (App ID) and will use it on 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 needs 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="http://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="http://www.w3docs.com/uploads/media/book_gallery/0001/01/066705b46be05dfdde77a1bc60c120b76257b553.png"/>

Now let's see how to customize button. Here are 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

Practice Your Knowledge

What is the purpose of the Simple Share JavaScript library mentioned in the URL?

Quiz Time: Test Your Skills!

Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.

Do you find this helpful?