Add Any Facebook Social Button In Any Nav Menu of Any Theme

Mar 2, 2014

—

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.

plugin code

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.

Comments

7 responses to “Add Any Facebook Social Button In Any Nav Menu of Any Theme”

verdestamas@

May 26, 2017

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?

Log in to Reply
1. Brad Dalton
  
  May 26, 2017
  
  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.
  
  Log in to Reply
Lars Tronsmoen

October 10, 2014

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!

Log in to Reply
David

June 16, 2014

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

Log in to Reply
1. Brad Dalton
  
  June 16, 2014
  
  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.
  
  Log in to Reply
Esther Coronel de Iberkleid

March 3, 2014

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

Log in to Reply
1. Brad Dalton
  
  March 3, 2014
  
  You will need to add the Javascript as well as the PHP code.
  
  Log in to Reply