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
IT IS Fixed! Thank you!
I knew you’d work it out!
Not sure if I check ed the box for a reply… š
Did that work?
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?
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.
Thanks for the kind words Marie.
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?
Change the hook position or add a 3rd parameter for positioning priority.
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:
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… š
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!
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.
Pretty straight forward. Is this the preffered method over using plugins?
I think so for Genesis users as it works and doesn’t require much code.
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.
Exactly and that’s the answer.
Simple as that.