Tutorial: Get Facebook Like&Share buttons in Jetpack Sharing

I previously had a tutorial on a now-closed thread and it doesn’t take into account some of the new changes Facebook and WordPress have made. So here’s an updated one.

1. Go to Plugins > Editor
2. Choose “Jetpack by WordPress” from the drop-down menu on the right-hand side of the screen.
3. Find and click to edit the following file in the list that appears:
   “jetpack/modules/sharedaddy/sharing-sources.php“
   (NOTE: You may first have to click on “jetpack/modules/sharedaddy.php” to bring up a new list of files that will include “sharing-sources.php”). If you can’t find it, just put this after your wordpress url: /wp-admin/plugin-editor.php?file=jetpack%2Fmodules%2Fsharedaddy%2Fsharing-sources.php&plugin=jetpack%2Fmodules%2Fsharedaddy.php
4. Search to locate the following “<div class=”like_button”>” — you should find it a little more than halfway down the page.
5. Replace the following block of code:
   return '<div class="like_button"><iframe src="'.$url.'" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:'.( $inner_w + 6 ).'px; height:21px;" allowTransparency="true"></iframe></div>';

   with this block of code:

   return '<div class="fb-like" data-href="" data-width="120" data-layout="button_count" data-action="like" data-show-faces="false" data-share="true"></div>';
   (Other ways to display the button can be found here: https://developers.facebook.com/docs/plugins/like-button/)

You’re also going to need this in your header (after body tag):

<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&appId=******************";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

PLEASE NOTE: The use of the HTML5 version requires you to have an APP id which would replace the asterisks above. For more about this, visit: https://developers.facebook.com/docs/plugins/like-button/

You may or may not need to make CSS adjustments after this. Probably not, though.

And yes, you will have to re-do this every time they update Jetpack.
(I’m sure there’s some way to avoid having to re-add the code but I’m not skilled enough to know how. Please add instructions if you do.)

http://wordpress.org/plugins/jetpack/