Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to make facebook share button on website?

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 1
    • 0
    • 329
    Comment on it

    Hello Reader's if you are developing the Ecommerce based website in which you want to integrate the facebook sharing option, then this blog is very helpful to you.

    So lets start with the html doc. 

    To get Facebook sharing first you need to give Facebook what you need to sharing on Facebook ie images, title and description. Everything is to shared with the meta key. These keys will be written in head section and its code will go like this:-

    <meta property="og:url"           content="http://tajerlee.com/index.php/browse/getSingleListDetails/21" />
        <meta property="og:type"          content="Tajerlee" />
        <meta property="og:title"         content="Mitsubishi Shogun Tipper Truck $97,750.00" />
        <meta property="og:description"   content="Specs: 
    Year: 2004 
    Make: Mitsubishi 
    COF expiry 9/1/ 2016 
    Model: Shogun Fv430k4 
    Rego: CKJ514 
    Rego expiry date:	08/12/2015 
    Kms: 366,250 
    Tare weight:	8,200 kg 
    Axle type:	3-Axle Tandem " />
        <meta property="og:image"         content="http://tajerlee.com/assets/images/listing_images/56ea50abe5630.jpg" />

    In your case just replace my description with your description and assign the thumbnail to it. Thumbnail will identified by og:image tag in the meta key.

     

    In the next step put html in the place you want to appear the sharing icon. And it's code will go like this:-

    <div class="fb-share-button" meta property="og:image" content="http://tajerlee.com/assets/images/listing_images/56ea4d45d0f92.jpg" data-href="/index.php/browse/getSingleListDetails/21http://tajerlee.com/1" data-layout="button_count"></div>

    Now look into the code you can find the url, In this place you just have to put the url which will be open once user will click the post on facebook.

     

    In the last section we will integrate the facebook sharing Js and its code will go like this:-

    <!-- facebook share code -->
    <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&version=v2.5&appId=1647779578806581";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script>
    <!-- facebook share code -->

    Now load this file and click the button and the output will be like as shown in the image attached below:-

    How to make facebook share button on website?

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: