• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2785

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

  • Try Premium
  • Log in

Install 1 of FaceBooks 13 Social Plugins In Genesis

In this tutorial, i’ll show you the fastest and easiest way to add any one of Facebooks 13 social plugins for users of the Genesis theme framework.

social plugins facebook

Step 1

Login to your Facebook account and create an APP.

Step 2

Choose the plugin you want to add and click get code

get code

Code

plugin code

Step 3

Copy the first block of code into the Genesis > Theme Settings > Header Script box.

1st snippet

Step 4

Copy and paste the second code snippet into any widget on your site.

comments plugin

In this example its the after posts widget however you may choose a sidebar widget depending on which Facebook plugin you choose to use.

Here’s what it looks like on the front end if you chose the Facebook Comments plugin.

facebook comments plugin

Pretty simple to do for Genesis users.

Plugins to choose from:

  1. Like Button
  2. Send Button
  3. Embedded Posts
  4. Follow Button
  5. Comments
  6. Share Dialog
  7. Activity Feed
  8. Recommendations Box
  9. Recommendations Bar
  10. Like Box
  11. Login Button
  12. Registration
  13. Facepile

More Facebook Plugins

  • 3 Facebook Like For Downloads Tools

Reader Interactions

Comments

  1. MarieDenee says

    October 31, 2013 at 4:39 pm

    IT IS Fixed! Thank you!

    Log in to Reply
    • Brad Dalton says

      October 31, 2013 at 5:54 pm

      I knew you’d work it out!

      Log in to Reply
  2. MarieDenee says

    October 29, 2013 at 4:00 pm

    Not sure if I check ed the box for a reply… 🙂

    Log in to Reply
    • Brad Dalton says

      October 29, 2013 at 4:21 pm

      Did that work?

      add_action( 'genesis_after_entry', 'your_function_name', 5 );
      Log in to Reply
      • MarieDenee says

        October 31, 2013 at 4:11 pm

        Hey there! Back, so where it says ‘your_function_name’ I imagine this is something I am to place in? and I am not 100% sure of this direction… I can place in custom function or do i edit it?

        Log in to Reply
  3. MarieDenee says

    October 29, 2013 at 2:50 pm

    BTW, your site is my crack right now! I love your tutorials and more than a few of your other ones saved my life- THANK YOU.

    Log in to Reply
    • Brad Dalton says

      October 29, 2013 at 3:21 pm

      Thanks for the kind words Marie.

      Log in to Reply
  4. MarieDenee says

    October 29, 2013 at 3:07 am

    Hi there! I am trying to figure out how to place this BEFORE disqus… it is driving me insane as I have already created the widget and have added the hook, I am tryingto have this sit AFTER the author box… BEFORE Disqus. any hints here?

    Log in to Reply
    • Brad Dalton says

      October 29, 2013 at 11:54 am

      Change the hook position or add a 3rd parameter for positioning priority.

      Log in to Reply
      • MarieDenee says

        October 29, 2013 at 2:49 pm

        I tried this… to no avail… I guess I need to figure out or if you can help me understand, what is the hook for after the author? before Disqus? Or how do I find this? I have been trying to play and nothing is working…

        Log in to Reply
        • Brad Dalton says

          October 29, 2013 at 3:47 pm

          I tested this and it outputs after the content and before the author box on themes running HTML 5 loop hooks:

          add_action( 'genesis_after_entry', 'your_function_name', 5 );

          Change the name of the function and make sure you use the 3 rd parameter which in this case is 5

          You could ask your theme developer because they have the most amount of knowledge when it comes to your theme.

          If it where a StudioPress theme, i could easily load it up locally and work out the solution for you but i don’t own many non SP themes i’m sorry so its hard to test and provide an accurate solution.

          Log in to Reply
          • MarieDenee says

            October 29, 2013 at 3:59 pm

            Ohhh it is Genesis with the Dynamik Web Builder as the child theme… soooo from scratch… 🙂

  5. Winterburn says

    September 21, 2013 at 6:05 pm

    I try to use the hook:

    /*** Facebook Comment for Single Posts ***/
    add_action(‘genesis_before_comments’, ‘facebook_comments’);
    function facebook_comments() {
    if (is_single()) { ?>
    <div class="fb-comments" data-href="” data-width=”670″>
    <?php }
    }

    But it does not work! Any solution for this Brad!

    Log in to Reply
    • Brad Dalton says

      September 21, 2013 at 6:24 pm

      The code you have written does not work so you will need to create a widget for the FB code.

      I have already linked to a post which shows you 5 ways to code after post widgets.

      Please read the post and click the link.

      Log in to Reply
      • Winterburn says

        September 21, 2013 at 7:19 pm

        Dear Brad,

        I have created widget and past the code as follows:
        <div class="fb-comments" data-href="” data-num-posts=”5″ data-width=”600″>
        But the comment box link still invalid!

        Log in to Reply
        • Brad Dalton says

          September 21, 2013 at 8:22 pm

          The code uses HTML 5 so your site needs to be HTML 5 enabled otherwise please use the other code Facebook offer.

          They provide 4 types of code choices.

          Log in to Reply
  6. Zimbrul says

    September 21, 2013 at 8:51 am

    Pretty straight forward. Is this the preffered method over using plugins?

    Log in to Reply
    • Brad Dalton says

      September 21, 2013 at 10:14 am

      I think so for Genesis users as it works and doesn’t require much code.

      Log in to Reply
      • Michael Borger says

        September 21, 2013 at 8:04 pm

        I was wondering the same thing — how this compares to just installing a straightforward Facebook plugin which only involves installation and then dragging over a widget.

        Is there any performance improvement with this method over using a plugin? Sometimes when I analyze the performance of my site I notice that the social media plugins can contribute the most towards slower speeds.

        Log in to Reply
        • Brad Dalton says

          September 21, 2013 at 8:21 pm

          Exactly and that’s the answer.

          Simple as that.

          Log in to Reply

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.