Facebook Like button support

[joshkerr]

It would be nice to see Facebook Like button support on posts.

[imathis]

I looked into adding this, but it seems like you have to go through a somewhat involved process to register for a Facebook developer's account in order to add a like button to your site. I wasn't interested in jumping through all those hoops, to find out how I could add a like button. If you have a developer account and want to help, I'd love to know how I can add support.

Just like with the other sharing plugins, It would be nice if I could just add a generic code snippet and provide a place to enter the configurations in the _config.yml. Is that something you'd like to help with?

[joshkerr]

Its actually really easy.

Just go here and generate some code:

https://developers.facebook.com/docs/reference/plugins/like/

You do not need a developer account to do it.

[Burnsoft]

had a look at this. When I go to the facebook developers page to generate the 'like' button code it embeds my appID.
So I think you do need an app registered. Its easy to do, I generated a new one the other day when adding in the timeline feature for testing.

for this, I added:
# Facebook Like
facebook_app_id: yourappIDhere
to the config.yml file and amended sharing.html to include:

{% if site.facebook_app_id %}
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#appId="+{{site.facebook_app_id}}+"&xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-send="false" data-layout="button_count" data-height="100" data-show-faces="false"></div>
{% endif %}

The height of the like box is not great, so if anyone can assist with that it would be great. cheers Nik

[Burnsoft]

ahh, mine had an appID as I was logged in an recently generated the App!

add this to your sharing.html:

{% if site.facebook_like_button %}
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<div class="fb-like" data-send="false" data-width="450" data-show-faces="true"></div>
 {% endif %}

and this to your config.yml

# Facebook Like
facebook_like_button: true

still needs tweaking. maybe putting in a specific locatio div?

anyway, hope its of use. see how it looks on burnsoft.github.com/blog

[joshkerr]

I'd prefer if it could be on the same line as the other sharing buttons.

[Burnsoft]

agreed. just not sure how to do that ;-)

[boamaod]

To get FB button on the same line as other buttons I added

.fb_iframe_widget span { vertical-align: baseline !important; }

to sass/custom/_styles.scss

[spasticninja]

I was previously having an issue with the alignment of the facebook likes button. Similar to above, I added:

.fb-like{ vertical-align:top; margin-top:0px; }

to sass/custom_styles.scss