WordPress.org

Ready to get started?Download WordPress

Forums

Jetpack by WordPress.com
Tutorial: Get Facebook Like&Share buttons in Jetpack Sharing (31 posts)

  1. cozbaldwin
    Member
    Posted 8 months ago #

    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/

  2. Jeremy Herve
    Happiness Engineer
    Plugin Author

    Posted 7 months ago #

    Instead of editing plugin files, I would suggest using Jetpack's built-in custom sharing function. Try following these steps:

    1. Go to Settings > Sharing in your dashboard
    2. Sroll down until the "Button Style" option.
    3. Choose "Official Buttons".

    The Facebook Share button has now changed into a Facebook Like Button. Save your changes, and let's now add a Facebook Share button next to the Like button.

    To do so, click on "Add a new service" next to the list of available services in Settings > Sharing.

    Then, enter the following information:

    • In "Service Name", type in "Facebook"
    • In "Sharing URL", enter http://www.facebook.com/sharer/sharer.php?u=%post_full_url%
    • In "Icon URL", enter http://YOUR_SITE_URL/wp-content/plugins/jetpack/modules/sharedaddy/images/facebook.png

    Save your changes, and drag the new Share button next to your Like button.

    Done! :)
    http://i.wpne.ws/Sfgb

  3. cozbaldwin
    Member
    Posted 7 months ago #

    Thanks, Jeremy.
    Surely that is a much easier way to change and maintain the addition of a FB sharing button.

    However, for me, personally, it doesn't fit the aesthetic I'm going for, which is the current official buttons and their inherent functions.

    You did however remind me that I left out an important part of my tutorial, which is:

    ADDENDUM TO MY ORIGINAL POST:
    The Sharing settings must already be set to have the Facebook Like button set in the Enabled Functions and set the button style to Official Buttons.

  4. cbridges
    Member
    Posted 7 months ago #

    @jeremy,
    I tried doing your steps above to have both the sharing and like button but I do not get a facebook image. Could it be because I have installed the Remove Original Jetpack sharing buttons plugin to be able to use the sharing shortcode?
    Also, wordpress is actually installed in a subfolder in my site but when pointing to the icon in Icon URL field I included the subfolders
    e.g, http://mysite/testing/wordpress/wp-content/plugins/jetpack/modules/sharedaddy/images/facebook.png

    Any ideas?
    Thanks

  5. cozbaldwin
    Member
    Posted 7 months ago #

    @cbridges, if I may...
    When you replace your url within: http://YOUR_SITE_URL/wp-content/plugins/jetpack/modules/sharedaddy/images/facebook.png
    It should be the full url to where your wordpress is installed. So if your wordpress is installed on http://www.cbridges.com/testing/wordpress/ -- then you want to put that whole string into where it says "YOUR_SITE_URL" above.

    However, I don't know anything about the plugin you mentioned, the Remove Original Jetpack plugin... but it sounds like it might totally break the jetpack stuff, so therefore trying to link to the facebook icon may not work.

  6. Jeremy Herve
    Happiness Engineer
    Plugin Author

    Posted 7 months ago #

    @cbridges @cozbaldwin's recommendation should help you get the Facebook icon to be displayed properly.

    If you still experience issues, do not hesitate to post your site URL here, and I'm sure we'll both be happy to take a closer look!
    If you want your site URL to remain private, you can also contact me via this contact form:
    http://jetpack.me/contact-support/

  7. cbridges
    Member
    Posted 7 months ago #

    @cozbaldwin & Jeremy,
    That did work, that you both much!
    Chris

  8. undergroundnetwork
    Member
    Posted 6 months ago #

    Did you guys figure out how to add the code to the settings like Jeremy did but using the original Facebook icon, not the fake one? I've added to this my site and it works great, but I hate the thought of having to re-edit the plugin files each update!

    Thanks!

    Charles

    http://underground.net is my site.

  9. cozbaldwin
    Member
    Posted 6 months ago #

    At this time, I believe your options are what I have above and Jeremy's long-term method.

    It would be very nice if JetPack ShareDaddy added this in as the default, but, for now... this is it (unless there's a way to code up a Function, which is beyond my capabilities).

  10. laura.lee
    Member
    Posted 4 months ago #

    @cozbaldwin, Jeremy, & Barry Carlyon who did the Jetpack Extras plug in, you are wp heroes. Thank you so much for sharing your knowledge. I got my fb share button added, which had been a mystery to me, plus put share both above and below on posts/pages where I wanted. Thanks again.

  11. theasiandude
    Member
    Posted 3 months ago #

    @cozbaldwin

    may I know if there is a way to move the separated facebook like and share above the twitter and google+ buttons and align it with the twitter button?

    thanks in advance for your help

    http://theasiandude.com/2014/04/15/making-a-photobook/#more-359

  12. cozbaldwin
    Member
    Posted 3 months ago #

    @theasiandude,

    I took a look at your blog entry linked above. I'm not positive if this will fix it, but it appears you're not using the "official" buttons. See addendum in my 2nd post in this thread:

    ADDENDUM TO MY ORIGINAL POST:
    The Sharing settings must already be set to have the Facebook Like button set in the Enabled Functions and set the button style to Official Buttons.

    Try that and let me know.

  13. theasiandude
    Member
    Posted 3 months ago #

    @cozbaldwin

    hey sir, I did followed the instruction above and tried the hack sharedaddy method.

    http://theasiandude.com/2014/04/15/making-a-photobook/

    this is what I am getting. The like and share will work alright but the count has been reset. I am thinking if the the counts for sharedaddy is different from the counts for official facebook like and share?

    my only worry is that things will get a reset again when jetpack releases new update. is it safer to say separate out the facebook like and share and use the one officially released by facebook.

    thanks again for your help and kind advice!

    --------------------------

    opps, I have just checked my website, it seems the like and share counts for sharedaddy has synchronized with the counts by facebook official. again, thanks for your help

    now that I have fixed the facebook problem, theres a huge gap in between twitter button and google+, is there anyway I can fix that?

  14. theasiandude
    Member
    Posted 3 months ago #

    Also it seems the counts for the homepage and the subpage is different, I dont know why either.

    http://theasiandude.com/2014/04/15/making-a-photobook/
    http://theasiandude.com/

  15. cozbaldwin
    Member
    Posted 3 months ago #

    OK, I'm glad your original issue has been fixed.

    If the counts are different (they aren't right now) it's because the number is reflecting the times that specific page has been shared/liked. That goes for all the other buttons, too. It's not counting across all pages, just each page at a time.

    As far as the gap between Twitter and Google+, that is a width that's being set by twitter themselves... in the code for their button.

    If you are that concerned with it, you can add this into your Custom CSS (via the jetpack plugin):

    .twitter_button iframe {width: 85px!important}

  16. victordulu
    Member
    Posted 2 months ago #

    @Jeremy Herve

    I added the function to also share not only like the post on the settings.
    How can i make it to open in a new window like twitter does?

  17. cozbaldwin
    Member
    Posted 2 months ago #

    You might as well use Jeremy's suggested method if you want a popup window. Facebook native button uses jquery to reveal/hide the share window. http://wordpress.org/support/topic/tutorial-get-facebook-likeshare-buttons-in-jetpack-sharing?replies=16#post-4930145

  18. debanon
    Member
    Posted 2 months ago #

    @Jeremy Herve, @cozbaldwin

    Many thanks

  19. Okskipper
    Member
    Posted 2 months ago #

    Jeremy,

    Thanks for the fix to make the Facebook Share button work. I have the link opening a new window but it is a full sized window, not a small one like I have seen on other sites. How do I make the new window a small one?

    Site: poweringimagination.com
    Thanks.

  20. Jeremy Herve
    Happiness Engineer
    Plugin Author

    Posted 2 months ago #

    @Okskipper Could you try to switch to a different theme for a few minutes? Your theme seems to bundle an old version of jQuery instead of using the version that comes with WordPress. That can cause a few issues with plugins on your site.

    If switching to another theme fixes the problem, you'll want to look for the function loading jQuery in your theme's header.php file, or in the functions.php file. Once you find that function, you can remove it and enqueue the proper version of jQuery as explained here:
    http://codex.wordpress.org/Function_Reference/wp_enqueue_script

    If the issue is not related to your theme, please try to disable all your plugins, one at a time, until you find the one that causes the conflict. You can then enqueue jQuery using the method I linked to above.

    If you do not feel comfortable editing PHP files, you can also contact the theme or plugin author and ask them to solve the issue.

    If none of this helps, could you contact us via email so we can take another look at your site?
    Thanks!

  21. davidfreibrun
    Member
    Posted 3 weeks ago #

    I'm having the same problem with the plug in. I have tried it on different themes and I get the same issue. The website is http://popbuff.com

    Just goto the most recent blog post and you will see the facebook like and share icons.. When you click on the face book like icon, it will show the skinny but tall form that cuts off the majority of the form area so you can't see what to do.

    This site is using the expound theme.

  22. cozbaldwin
    Member
    Posted 3 weeks ago #

    So, @davidfreibrun, I guess you're using the original method at the top of this thread?

    Looks like you'll need to add a little to your custom CSS. Try this:

    .fb_iframe_widget span {width: 500px !important;}

  23. davidfreibrun
    Member
    Posted 3 weeks ago #

    Hi @cozbaldwin.

    I add this custom CSS and this is an improvement. Woohoo!

    THe problem now though is the "like" pop up box disturbed the alignment of the other share icons.

    Take a look at this link on my blog
    http://popbuff.com/bangles-sold-show-coach-house/

    Any suggestions?

  24. cozbaldwin
    Member
    Posted 3 weeks ago #

    Sorry about that. I used to have all this down but I think FB changed their code and I'm not finding the css classes that need to be adjusted. I can try and look at it tomorrow, but no guarantees my friend.

  25. davidfreibrun
    Member
    Posted 3 weeks ago #

    I appreciate it.

  26. cozbaldwin
    Member
    Posted 3 weeks ago #

    OK, delete the CSS I gave you earlier (.fb_iframe_widget span)

    And replace it with this:
    .fb_iframe_widget iframe {min-width: 550px;}

    Just remember, although you won't have to adjust this css file later, you will have to re-add all the other code in the OP each time the Jetpack plugin is updated, if you want to continue using this method.

  27. davidfreibrun
    Member
    Posted 3 weeks ago #

    That looks much better.

    But now the other social share buttons for twitter and google+ have issue. When you hover over them, they are not linkable unless you move the mouse right to the very top of the icon.

    Take a look on my blog to see what i mean
    at the same link from earlier.

  28. cozbaldwin
    Member
    Posted 3 weeks ago #

    goddangit!!!

    OK, this should really do it:
    edit what I just gave you. Instead of min-width, make it max-width.

  29. davidfreibrun
    Member
    Posted 3 weeks ago #

    Thank you! it works great now. Just a minor issue the social icons next to facebook are slightly above.

  30. cozbaldwin
    Member
    Posted 3 weeks ago #

    You can add this to it: margin-top: -5px;
    So altogether it looks like this:

    .fb_iframe_widget iframe {min-width: 550px; margin-top: -5px;}

Reply »

You must log in to post.

About this Plugin

About this Topic