Enabling FB "Like" button for all posts?

  • Unknown's avatar

    I know WordPress has their own “Like” button that fellow bloggers can click, but I would appreciate the capability to have a Facebook “Like” button appearing on all my posts instead….when I looked into whether or not this would be possible, I hit some dead-ends, unfortunately.

    Here’s the issue:

    I realize the FB “Like” button can be enabled in posts by going into Settings > Sharing and opting to use all the “official” buttons for sharing, but the thing is it winds up looking cluttered/disorganized via this method. The uniformity provided by the “Icon only” sharing option is nice, but then I’m left with no FB “like” button, which is a bummer. Is there a workaround to get a FB “like” button to show up on all posts WITHOUT having to select display “official” sharing buttons?

    FB has developer tools available to generate code for a “like” button, which I was able to gather:

    <div class=”fb-like” data-href=”http://empowereddestiny.com” data-layout=”button” data-action=”like” data-show-faces=”false” data-share=”false”></div>

    However, I’m not sure where to put it. I tried going into Settings > Sharing > Add a new service, but this didn’t seem to work. Help, pretty please?

    I’m new to blogging and not super tech-y, so please keep replies simple and straightforward – I promise not to be offended if you have to spell it out, LOL!

    Many thanks in advance!

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar

    Hi there!

    You can do this through:

    getsociallive.com

    Please note that this will have to be done for each post – there wouldn’t be a way to automate this. Once you create the button, you can add it to the bottom of your post in the Text Editor.

    I did an example one for your post: Mars In Libra Entertainment/Query

    It would look like this:

    <p style="text-align:left;" class="getsocial"><a title="Like This!" href="http://getsociallive.com/gslike.php?likeurl=http%3A%2F%2Fempowereddestiny.com%2F2014%2F03%2F19%2Fmars-in-libra-entertainmentquery&liketitle=http%3A%2F%2Fempowereddestiny.com%2F2014%2F03%2F19%2Fmars-in-libra-entertainmentquery%2F" rel="nofollow ugc" target="_blank"><img style="border:0;margin:0;padding:0;" src="http://getsocialserver.files.wordpress.com/2010/08/gslk6.png" width="49" height="23" alt="Like This!" /></a></p>

    Cheers!

  • Unknown's avatar

    Thanks for the lightning-fast response – you’re the best! I will give your suggestion try and hope this does the trick!

  • Unknown's avatar

    Sounds great! Let me know if run into any issues with it!

    Cheers!

  • Unknown's avatar

    Hmmmm…the code does work, but I’m not sure how keen I am on the fact that when you click the “like” button, it refers the reader to a 3rd party site.

    Is there any other way to bypass this? I tried inserting the code obtained directly from FB instead

    <div class=”fb-like” data-href=”http://empowereddestiny.com” data-layout=”button” data-action=”like” data-show-faces=”false” data-share=”false”></div>

    but it didn’t work. Sorry to bother you again!

  • Unknown's avatar

    I should also mention that I have the CSS upgrade, in case making modifications there would accomplish what I’m looking to do.

  • Unknown's avatar

    Sounds great! If you want to use the official buttons, you can add this CSS to reduce the spacing. Please go to Appearance > Customize > CSS in your Dashboard. Remove the informational content and add this:

    .sd-content ul li.share-facebook, .sd-content ul li.share-twitter {
    	width: 75px;
    }
  • Unknown's avatar

    I’m sorry – I must be doing a bad job of explaining myself – I don’t think we’re understanding each other completely. The CSS modification you just suggested above doesn’t appear to do anything.

    What I want is: To keep my “Icon only” social sharing buttons

    AND

    To have a Facebook “Like” button appear at the bottom of each post as well. The getsocial.com trick does work, but I don’t like the fact that clicking on the button refers readers to a third-party site instead of directly to facebook.com’s login screen. Is there a way to keep that exact button, but have it route directly to Facebook.com’s login screen for a reader to “like” the post?

  • Unknown's avatar

    The CSS code I provided you was to reduce the spacing in between the Official sharing buttons of Facebook and Twitter (there is extra space with those because when translating into other languages it sometimes needs the space). However, the code I provided you would help to look a bit more organized – it would work with the Official button style.

    From my understanding you want to add 2 Facebook like buttons per post? The Icon and the like button? That might be a bit confusing for readers, but, if you want to the getsocial.com would be the only option to directly like the post.

  • Unknown's avatar

    We are misunderstanding one another – if you visit my blog, you will see that I have enabled the Facebook SHARING icon, among others. I prefer the look of these social share buttons the way I have them set right now, as “icon only”.

    What I want to do is create a Facebook “Like” button to add to the end of each post – if you look at my blog, it displays this way now – BUT I do not want the “Like” button to redirect readers to a 3rd party site (such as the getsocial.com fix you suggested earlier) – I would rather have it direct them directly to the Facebook login screen so they can “Like” the post directly from there.

  • Unknown's avatar

    I understand that you want both the Facebook SHARE and LIKE on your posts. However, if you use the ICON only style for Facebook SHARE then the only option would be to use getsocial.com for the Facebook LIKE. Please note that the Icon style only allows you to Facebook SHARE and the Official button style allows you to Facebook LIKE.

    The reason I suggest just using the official button is that you sort of get both without overloading your sharing choices with Facebook likes and shares. When you like the post it will still show up on the reader’s timeline and count the number likes. They just won’t be able to choose the audience they want to post it to or write something about it beforehand.

    However, if you want both the Facebook SHARE and LIKE then you will have to switch to the Official buttons, and create a separate Facebook SHARE button. Please follow the steps found here by one of our volunteers:

    1) Go to your Settings > Sharing in your Dashboard

    2) Under “Available Services” click “Add a new service”

    3) For “Service Name”, type in Share or Facebook Share (whichever you want)

    4 For “Sharing URL”, copy this link:

    http://www.facebook.com/sharer.php?u=%post_url%

    5) For “Icon URL”, copy this link:

    (If you don’t like that icon you can use any other icon that you find on Google Images

    6) Click the “Create Share” button

    7) Drag and drop your Facebook SHARE button to either the “Enabled Services” section below the “Available Services” OR over to the right with the WordPress SHARE button.

    8) Now, simply click the right down arrow on the Facebook button (not the button you JUST created; the other one provided by WordPress) and choose the “LIKE” option, save everything at the bottom of the page and you’re all set.

    You now have both the SHARE and LIKE options available to you at the bottom of your posts.

    It will look something like this:

    Screen Shot

  • Unknown's avatar

    “I understand that you want both the Facebook SHARE and LIKE on your posts. However, if you use the ICON only style for Facebook SHARE then the only option would be to use getsocial.com for the Facebook LIKE. Please note that the Icon style only allows you to Facebook SHARE and the Official button style allows you to Facebook LIKE. “

    I understand – this was the road block I was running into from very the beginning. So despite having the capability to input code into the text editor of my posts and having the custom CSS upgrade, you’re saying there is no option to do what I want to do the way I want to do it.

    Is there a reason why the FB developer’s “Like” button plugin wouldn’t work?

    https://developers.facebook.com/docs/plugins/like-button/

  • Unknown's avatar

    Unfortunately, it uses code that isn’t allowed on WordPress.com for security reasons. Here’s a list of accepted code:

    Add Code to Your Site

    WordPress.com is a type of shared environment, where all users are running off of the same software. This allows us to update millions of blogs at the same time with a single click. It means we can fix bugs or offer new features very quickly, but having all users running on the same software can also be dangerous. If we aren’t careful, one user has the potential to take down the entire site. So this is why we need to limit some of the things you post on your blog.

  • The topic ‘Enabling FB "Like" button for all posts?’ is closed to new replies.