This code enables you to display any type of Facebook button in any navigation menu of any WordPress theme.
There’s 3 steps :
Step 1 : Copy all the code from the view raw link and paste it at the end of your child themes functions.php file using a code editor & FTP.
The code in the Gist above includes the code below from the Facebook Developers page in a custom function.
Facebook Javascript SDK #
I didn’t add the Javascript SDK because i already have Jetpack installed which includes this code however you will need to add this Javascript if you don’t.
Step 2 : There’s 2 ways to install the FB SDK JS :
1. The easiest way is to paste it into the Genesis > Theme Settings > Header Scripts box :
2. You can also load the js using PHP code. Here’s a post which includes one of many different methods you can use to add the Javascript SDK code manually if your theme doesn’t include a box for loading scripts globally.
CSS – Vertical Align Button #
Step 3 : Here’s some sample CSS you can use in your child themes style.css file for positioning in your nav menu.
.genesis-nav-menu .fb-like {
vertical-align: middle;
}This is what the above CSS produces when using the Genesis Sample child theme by StudioPress.
Swap out .genesis-nav-menu with your parent themes nav menu class if not using Genesis.
I have been using this code many times and it always worked well. However, now I cannot apply it in Wellness Pro. I added the SDK code properly into the header but I cannot display the button it in the Menu. Maybe something has changed in Genesis that make this happen?
It doesn’t display at all or its out of position?
Just tested it in Wellness Pro and it works fine however i am also having problems on my own site with this app so have reported a bug to Facebook.
Note : Its coded to display in the primary nav.
Hi,
Thanks a lot for the guide!
I got the like button to show up on my navigation menu but the positioning is wrong.
Can you tell me where i should place the code in the style.css? What to look for?
Thanks!
this all works fine except that the like button is not right-alighned when used in the header right widget inside a text widget. The like button ends up underneath the nav bar
The tutorial clearly states the nav menu and not the header right widget or anywhere else.
You will need to modify the code to make it work in other situations.
Hello
I am trying to add the Like me on facebook box to my page and it does not work, Same issue with twitter stream I was unable to add it. They are not working
I am looking for widgets to be added to follow me on social media channels
Please help
Thank you
You will need to add the Javascript as well as the PHP code.