tabalinas / jssocials

Social Network Sharing jQuery Plugin
http://js-socials.com
MIT License
464 stars 104 forks source link

Facebook Like instead of Share Link #4

Open KirbyFox opened 9 years ago

KirbyFox commented 9 years ago

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

tabalinas commented 9 years ago

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);
4n0n1mo commented 9 years ago

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

tabalinas commented 9 years ago

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

gvanto commented 8 years ago

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!

Ruud68 commented 8 years ago

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.

tabalinas commented 8 years ago

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.

Cryde commented 7 years ago

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