How can I insert the Facebook Like button code in the post-info DIV?

Community Forums Forums Design Tips and Tricks How can I insert the Facebook Like button code in the post-info DIV?

This topic is: resolved

This topic contains 4 replies, has 1 voice, and was last updated by  Chris Moore 1 year, 1 month ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #42946

    Chris Moore
    Participant
    Post count: 136

    Hello,

    I am trying to insert the following code to make the Facebook “Like” button appear after the comments count in the `post-info` `div` of the eleven40 child theme.

    (Imagine this code is wrapped in a `div`…)

    `class=”fb-like” data-send=”false” data-layout=”button_count” data-width=”90″ data-show-faces=”false” data-font=”trebuchet ms”`

    Here is the website in question: ReflectOnThis.com

    I am currently using a very inelegant workaround to get the “Like” buttons to show up on the `single post` pages, but I want to find a better way. (The “Like” buttons don’t show on the homepage, so that is another problem that I am hoping to solve with the proper implementation of this).

    So, how can I get the Facebook Like buttons to output in the loop of each post, on both `single post` pages and the `home` page?

    Thanks!


    Resepctfully, Chris Moore
    Web Dev, CSS Hacks, & Biz Consulting @ MooreCreativeIdeas.com / Blogging @ ReflectOnThis.com

    #42948

    Chris Moore
    Participant
    Post count: 136

    I figured out one thing that I was missing: I needed to explicitly pull the `href` like this:

    `data-href=”‘. get_permalink() .’”`

    Now my issue is how to insert the code I now have (which works!) directly into the right place in the theme template files (or via `functions.php`).

    I would like the code to be inserted exactly after the comments count at the top of each post, in the `post-info` `div`.

    Anyone? :-)


    Resepctfully, Chris Moore
    Web Dev, CSS Hacks, & Biz Consulting @ MooreCreativeIdeas.com / Blogging @ ReflectOnThis.com

    #42951

    Chris Moore
    Participant
    Post count: 136

    Do I basically have to unhook the `genesis_post_info()` function to get rid of the current Post Info and then place my code using the `genesis_before_post_content` hook?

    What would the exact function look like and how would I replace the existing Post Info code, while adding the Facebook Like code snippet as well?


    Resepctfully, Chris Moore
    Web Dev, CSS Hacks, & Biz Consulting @ MooreCreativeIdeas.com / Blogging @ ReflectOnThis.com

    #42952

    Chris Moore
    Participant
    Post count: 136

    Here is my current solution (which actually works):

    I created a shortcode function, like so:

    `// Add a shortcode for Facebook “Like” insertion
    function reflect_fb_shortcode() {
    if ( is_single () || is_home() )
    return ”;
    }
    add_shortcode(‘FB-Like-Shortcode’, ‘reflect_fb_shortcode’);`

    Then I just dropped the newly created shortcode [FB-Like-Shortcode] exactly where I want it using the Genesis Simple Edits plugin.

    Although it works, I would still like to know how I could just do it in the appropriate theme template files or the `functions.php` file.


    Resepctfully, Chris Moore
    Web Dev, CSS Hacks, & Biz Consulting @ MooreCreativeIdeas.com / Blogging @ ReflectOnThis.com

    #42953

    Chris Moore
    Participant
    Post count: 136

    The `return ”;` should actually contain the standard Facebook “Like” `div` code, from here: Link to Facebook Developers Page

    It gets stripped on the site here. (Anyone know how to avoid that?)


    Resepctfully, Chris Moore
    Web Dev, CSS Hacks, & Biz Consulting @ MooreCreativeIdeas.com / Blogging @ ReflectOnThis.com

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.