WP SITES

2892

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

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

Reader Interactions

Comments

  4. 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?

      • 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…

        • 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.

          • Ohhh it is Genesis with the Dynamik Web Builder as the child theme… soooo from scratch… šŸ™‚

  5. 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!

    • 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.

      • 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!

      • 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.

Leave a Reply