How to add facebook share button | Unbounce Hacks

Add facebook share button in website

LATEST TOPICS

How to add facebook share button

Having social connectivity for your business or website is must thing nowdays. 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.

How to add facebook share button to the website


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

By using the following code, you can add share button in your website.

<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

Facebook share with an image

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 for More Tips:

Follow by Email
Facebook
Facebook
Please follow and like us:
0

Leave a Comment:

Leave a Comment:

Enjoy this blog? Please spread the word :)