Facebook Like button support #176

Activity

1. imathis commented on Sep 25, 2011

   

   imathis

   on Sep 25, 2011

   Owner

   More actions

   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?
2. joshkerr commented on Sep 25, 2011

   

   joshkerr

   on Sep 25, 2011

   Author

   More actions

   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.
3. Burnsoft commented on Sep 25, 2011

   

   Burnsoft

   on Sep 25, 2011

   More actions

   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
4. Burnsoft commented on Sep 25, 2011

   

   Burnsoft

   on Sep 25, 2011

   More actions

   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
5. joshkerr commented on Sep 26, 2011

   

   joshkerr

   on Sep 26, 2011

   Author

   More actions

   I'd prefer if it could be on the same line as the other sharing buttons.
6. Burnsoft commented on Sep 26, 2011

   

   Burnsoft

   on Sep 26, 2011

   More actions

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

   closed this as completedin 13babc6on Oct 11, 2011
8. boamaod commented on Jun 24, 2012

   

   boamaod

   on Jun 24, 2012

   More actions

   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
9. briansimmons

   added a commit that references this issue on Aug 20, 2013

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

   ...

   This issue will close once commit 1743ee4 is merged into the 'master' branch.

   1743ee4
10. spasticninja commented on Jul 29, 2014

    

    spasticninja

    on Jul 29, 2014

    More actions

    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