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:-
0 Comment(s)