WP SITES

2948 Tutorials & 189 Plugins
Quote

Install 1 of FaceBooks 13 Social Plugins In Genesis

—

by

Brad Dalton

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

20 responses to “Install 1 of FaceBooks 13 Social Plugins In Genesis”

  1. MarieDenee Avatar
    MarieDenee

    IT IS Fixed! Thank you!

    Reply
    1. Brad Dalton Avatar
      Brad Dalton

      I knew you’d work it out!

      Reply
  2. MarieDenee Avatar
    MarieDenee

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

    Reply
    1. Brad Dalton Avatar
      Brad Dalton

      Did that work?

      [code]
      add_action( ‘genesis_after_entry’, ‘your_function_name’, 5 );
      [/code]

      Reply
      1. MarieDenee Avatar
        MarieDenee

        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?

        Reply
  3. MarieDenee Avatar
    MarieDenee

    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.

    Reply
    1. Brad Dalton Avatar
      Brad Dalton

      Thanks for the kind words Marie.

      Reply
  4. MarieDenee Avatar
    MarieDenee

    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?

    Reply
    1. Brad Dalton Avatar
      Brad Dalton

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

      Reply
      1. MarieDenee Avatar
        MarieDenee

        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…

        Reply
        1. Brad Dalton Avatar
          Brad Dalton

          I tested this and it outputs after the content and before the author box on themes running HTML 5 loop hooks:
          [code]
          add_action( ‘genesis_after_entry’, ‘your_function_name’, 5 );
          [/code]

          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.

          Reply
          1. MarieDenee Avatar
            MarieDenee

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

  5. Winterburn Avatar
    Winterburn

    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!

    Reply
    1. Brad Dalton Avatar
      Brad Dalton

      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.

      Reply
      1. Winterburn Avatar
        Winterburn

        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!

        Reply
        1. Brad Dalton Avatar
          Brad Dalton

          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.

          Reply
  6. Zimbrul Avatar
    Zimbrul

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

    Reply
    1. Brad Dalton Avatar
      Brad Dalton

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

      Reply
      1. Michael Borger Avatar
        Michael Borger

        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.

        Reply
        1. Brad Dalton Avatar
          Brad Dalton

          Exactly and that’s the answer.

          Simple as that.

          Reply

Was This Tutorial Helpful?