New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Facebook Like button support #176

Closed
joshkerr opened this Issue Sep 25, 2011 · 8 comments

Comments

Projects
None yet
6 participants
@joshkerr

joshkerr commented Sep 25, 2011

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

@imathis

This comment has been minimized.

Owner

imathis commented Sep 25, 2011

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

This comment has been minimized.

joshkerr commented Sep 25, 2011

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

This comment has been minimized.

Burnsoft commented Sep 25, 2011

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

This comment has been minimized.

Burnsoft commented Sep 25, 2011

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

This comment has been minimized.

joshkerr commented Sep 26, 2011

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

@Burnsoft

This comment has been minimized.

Burnsoft commented Sep 26, 2011

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

@boamaod

This comment has been minimized.

boamaod commented Jun 24, 2012

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

briansimmons pushed a commit to briansimmons/octopress that referenced this issue Aug 20, 2013

Merge pull request imathis#210 from xdworks/294accde545a7213b274c5b62…
…5b44a17ed72e0f3

Facebook Like button integration, fixes imathis#176
@spasticninja

This comment has been minimized.

spasticninja commented Jul 29, 2014

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment