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.
Step 1
Login to your Facebook account and create an APP.
Step 2
Choose the plugin you want to add and click get code
Code
Step 3
Copy the first block of code into the Genesis > Theme Settings > Header Script box.
Step 4
Copy and paste the second code snippet into any widget on your site.
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.
Pretty simple to do for Genesis users.
Plugins to choose from:
- Like Button
- Send Button
- Embedded Posts
- Follow Button
- Comments
- Share Dialog
- Activity Feed
- Recommendations Box
- Recommendations Bar
- Like Box
- Login Button
- Registration
- Facepile
MarieDenee says
IT IS Fixed! Thank you!
Brad Dalton says
I knew you’d work it out!
MarieDenee says
Not sure if I check ed the box for a reply… š
Brad Dalton says
Did that work?
MarieDenee says
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?
MarieDenee says
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.
Brad Dalton says
Thanks for the kind words Marie.
MarieDenee says
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?
Brad Dalton says
Change the hook position or add a 3rd parameter for positioning priority.
MarieDenee says
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…
Brad Dalton says
I tested this and it outputs after the content and before the author box on themes running HTML 5 loop hooks:
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.
MarieDenee says
Ohhh it is Genesis with the Dynamik Web Builder as the child theme… soooo from scratch… š
Winterburn says
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!
Brad Dalton says
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.
Winterburn says
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!
Brad Dalton says
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.
Zimbrul says
Pretty straight forward. Is this the preffered method over using plugins?
Brad Dalton says
I think so for Genesis users as it works and doesn’t require much code.
Michael Borger says
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.
Brad Dalton says
Exactly and that’s the answer.
Simple as that.