facebookbuttonpluginsfacebook-likeupdown

Facebook Like plugin with big buttons?

I need a social media plugin just for FB. I need big share buttons for FB. I have seen it in several websites but I do not know which one it is.

I leave this link to show you what I am talking about (big FB buttons at the beginning and ending of the article):

http://www.viralnova.com/animals-eating-ice-cream/

Any idea?

Solution

  • There's no secret sauce for making big like (that's not a like button, that's share button) button it all comes down to basic knowledge in Facebook developers tools ...

    Facebook has the Sharer which accept the GET parameter u which is the URL you want to share on your timeline, on a friend's wall or even in a private message ...

    Break Down

    You can create a new element or wrapper for your share button I will just use <a> because they seems quick and easy to use for this purpose. 

    <a class="fsl fsl-facebook" data-href="{URL_to_Share}" href="#">
   <span class="fa-facebook fa-icons fa-lg"></span>
   <span class="sc-label">Share on Facebook</span>
</a>

    pay attention to data-href attribute as you should replace it with the URL you want to share

    next we need some JavaScript (jQuery) to make our share button do something

    $('.fsl-facebook').click(function(e){ // target all elements with fsl-facebook class in the DOM
    e.preventDefault(); // prevent scrolling to top or bottom, because href is set to # 
    var href = $(this).attr('data-href'); // get URL from the data-href 
    window.open('https://www.facebook.com/sharer/sharer.php?u=' + encodeURIComponent(href), "", "width=800, height=350"); // pop up a new window, it's prefered to urlencode the URL because of 2nd & 3rd GET parameter that can be found in some URLs (?a=1&b=2&c=3)
});

    DEMO