jssocials icon indicating copy to clipboard operation
jssocials copied to clipboard

Facebook Like instead of Share Link

Open KirbyFox opened this issue 9 years ago • 7 comments

Is the anyway in which the Facebook link can implement a Facebook Like instead of Facebook Share ?

KirbyFox avatar May 13 '15 21:05 KirbyFox

Custom facebook likes are trickier than shares. It's usually done by native facebook like button.

For now you can doing it by opening facebook like button in new browser tab:

Register following share:

jsSocials.shares["facebook-like"]= {
    label: "Like",
    logo: "fa fa-facebook",
    shareUrl: "https://www.facebook.com/v2.3/plugins/like.php?locale=en_US&share=false&show_faces=true&href={url}",
    countUrl: function() {
        return "https://graph.facebook.com/fql?q=SELECT total_count FROM link_stat WHERE url='" + window.encodeURIComponent(this.url) + "'";
    },
    getCount: function(data) {
        return (data.data.length && data.data[0].like_count) || 0;
    }
};

Now you can use it like this:

$("#share").jsSocials({
    shares: ["facebook-like", "twitter", "googleplus", "linkedin", "pinterest"]
});

Also you need to add theming css, e.g. for the flat theme:

.jssocials-share-facebook-like .jssocials-share-link {
  background: #3b5998; }
  .jssocials-share-facebook-like .jssocials-share-link:hover {
    background: #2d4373; }

Or even better to get the src, add the color to _shares.scss, and build with grunt css for all themes:

$share-names: ('twitter', 'facebook', 'googleplus', 'linkedin', 'pinterest', 'email', 'facebook-like');
$share-colors: (#00aced, #3b5998, #dd4b39, #007bb6, #cb2027, #0a88ff, #3b5998);

tabalinas avatar May 14 '15 19:05 tabalinas

@tabalinas, just wanted to say this plugin is awesome, is also the best one currently! Keep up the great work!

4n0n1mo avatar May 30 '15 15:05 4n0n1mo

Thank you for pleasant feedback! I'll do my best to make it better and add new features.

tabalinas avatar May 31 '15 21:05 tabalinas

Btw should be: 'total_count' not 'like_count'

getCount: function(data) {
        return (data.data.length && data.data[0].total_count) || 0;
    }

Thanks for an awesome social sharing script!

gvanto avatar Feb 04 '16 00:02 gvanto

Hi @tabalinas, got a user of my Joomla! plugin requesting this exact feature (Facebook like instead of / next to share). Is there a reason as to why the above code is not in jssocials.js? If there is no reason, I can add it :) regards, Ruud.

Ruud68 avatar May 29 '16 08:05 Ruud68

Hi @Ruud68, I have not added this code because it seems a bit hacky. Don't you think so? Have you tried it yourself? I left the issue opened hoping to find a better way to do it, but now I'm not sure.

tabalinas avatar May 29 '16 20:05 tabalinas

Hello guys :) I've try this but the FQL is deprecated since 2.1 API version ...

Cryde avatar Aug 06 '17 11:08 Cryde