Having social connectivity for your business or website is must thing nowadays. Sometimes it is hard for a non technical person to find a easy way to add such functionality to the website without any or less coding required.
You can add Facebook share and like button on your website so user could share about your website on their timeline with just a click.
It is really important because more your website or business is shared on social media, you will more likely to get good traffic and customers.
By using following methods, you can insert Facebook share button on your website. I will go with the easiest first.
Add share button using <a> anchor tag
<a href="https://www.facebook.com/sharer/sharer.php?u=example.org" target="_blank"> Share on Facebook
</a>
You need to update “example.org” with your website URL that you want to share. You can update the text between <a> tag to anything and stylize your button based on your website.
For Facebook share with an image without an API and using a # to deep link into a sub page, the trick was to share the image as picture= The variable mainUrl would be http://yoururl.com/
var d1 = $('.targ .t1').text();
var d2 = $('.targ .t2').text();
var d3 = $('.targ .t3').text();
var d4 = $('.targ .t4').text();
var descript_ = d1 + ' ' + d2 + ' ' + d3 + ' ' + d4;
var descript = encodeURIComponent(descript_);
var imgUrl_ = 'path/to/mypic_'+id+'.jpg';
var imgUrl = mainUrl + encodeURIComponent(imgUrl_);
var shareLink = mainUrl + encodeURIComponent('mypage.html#' + id);
var fbShareLink = shareLink + '&picture=' + imgUrl + '&description=' + descript;
var twShareLink = 'text=' + descript + '&url='+ shareLink;
// facebook
$(".my-btn .facebook").off("tap click").on("tap click",function(){
var fbpopup = window.open("https://www.facebook.com/sharer/sharer.php?u=" + fbShareLink, "pop", "width=600, height=400, scrollbars=no");return false;
});
// twitter
$(".my-btn .twitter").off("tap click").on("tap click",function(){
var twpopup = window.open("http://twitter.com/intent/tweet?" + twShareLink , "pop", "width=600, height=400, scrollbars=no");
Found this post helpful? Let us know your suggestions and queries. We’ll try to help as soon as possible.
More tips and updates here.
FOLLOW US ON:-
