Skip to content
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
Closed

Facebook Like button support #176

joshkerr opened this issue Sep 25, 2011 · 8 comments
Labels

Comments

@joshkerr
Copy link

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

@imathis
Copy link
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
Copy link
Author

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
Copy link

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
Copy link

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
Copy link
Author

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

@Burnsoft
Copy link

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

@boamaod
Copy link

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
…5b44a17ed72e0f3

Facebook Like button integration, fixes imathis#176
@spasticninja
Copy link

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
Labels
Projects
None yet
Development

No branches or pull requests

6 participants