Adding a Facebook like button in the header

Note : the following code snippet requires advanced WordPress developer skills. There's no guarantee that this snippet works as is with the latest version of our themes, and with the latest version of WordPress. That's why you need to always test any code snippets in a staging environment before implementing it in a production site.

Howdy developer!

I have been asked a few days ago in the forum how to add a Facebook like button next to the social icons.

This is actually very easy to do with the Customizr hook API and you’ll find the necessary code to copy/paste below.


Grab the Facebook code for your button

This is going to be done in four steps.

1 Go to this URL :

2 Set up the parameters of your button. Example below :




3 Click on the Get code and select an App in the dropdown list. Don’t have an App? Check this tuto to create one.

4 In the pop in window (see below), choose the HTML5 option (tab on top) and copy/paste the two sets of code.




Display the FB button next to the social icons in Customizr

Before you copy and paste the following code, if you are not familiar with child themes and hooks in WordPress, I would strongly recommend that you read the snippets below.


How to locate hooks in customizr? Check here


Where to copy/paste this code? In your functions.php file. The best way to customize a theme in WordPress is to create a child theme. Everything you need to know about child theme creation in Customizr here

What is the code below actually doing?

1 the first part adds the javascript code between the tags of your website

2 the second parts actually displays the button on the rights of the header social icons. We add a filter to a Customizr method handling this part of the theme front end.

Note 1 : replace YOUR-APP-ID and YOUR-FB-PAGE-URL by yours in the code

Note 2 : replace en_US by your language. For example fr_FR for French.


And that’s it!


I hope this little piece of code will be useful for you and look forward to read your comments!



Related Snippets you may also like

36 thoughts on “Adding a Facebook like button in the header

  • Igor Smrek


    I am about to combine 2 codes and one is affecting the other. Both of them works nice, no issues. If phone number icon is active and I add Like button, phone icon is not visible.

    Add a custom Phone Number Font Awesome icon to the Social Icons
    Adding a Facebook like button in the header

    And position of menu and basket in mobile view changes as well. Moves to the second line and is not on the right side as usually .

    Help how to combine both options would be very appreciated.
    Thank you.

  • Adrian Bara

    By doing this, my website’s fav icon is not being displayed any longer. I guess there are some conflicts in the head tags… 🙁

  • Ayush

    Sir this is working nicely. But after placing this code the vertical height of the Header has increased consequently the site tagline text has stepped down a bit. How to resolve this problem? I know you’ll help, like always. Thank you. 🙂

  • Isabel

    I was trying to add the code for the like button in functions.php and got the error msg. I erased and updated but now i’m getting the error msg everywhere . Can someone please help me out i’m a little new to this and i need the site back the way it was.

  • Antonio

    Please help me guys with the 2 problems I’ve described in my post above

    I think they are very important questions for many of us.


    • Nicolas Post author

      Hi Antonio, I have taken a look at your website.
      The like button described in this snippet was not intended to behave like this, and it did not by the time the snippet was published.
      This issue requires some CSS coding. May some javascript. You might want to post a new thread in the support forum of the theme :
      You will get a wider audience there.

  • Antonio

    Please help me guys with my post above!

    Those are 2 very big problems for me

    I would be very thankful with you!

  • Antonio

    hey guys, i’ve been working the last days trying to solve some issues to make good matching from the like button on my page. They are the same problems that other guys had, but i didn´t find an answer in here

    1) The first problem is that when i press the like button the box shows down as wide as the button itself

    2) The second problem is that in mobile the button goes under the social icons

    Could anyone help me please? you can visit my site and try it from PC or mobile to see it personally.


  • Thomas Soracco

    I tried this but it really messed up the layout of the title description and the navigation.

    Everything worked, no problem creating the app, code and inserting it. The “like” and “share” buttons appear to the right but the layout is completely messed up.

    The site is being developed locally, so I can’t share the URL, but was wondering if anyone else has run into this problem.

    IDEALLY I would like to simply replace the social icon with an official FaceBook icon, but can’t seem to find an images folder to put it into and to link to. Is this all done in CSS in this theme?

  • Kk Kk

    I created the button and pasted the code in the child theme functions.php. I’m not getting anything and can’t for the life of me why this isn’t working. I’m working on a localhost, but never had issues with other codes working.

  • Peter

    hey guys, i’m finishing up my site with this wonderfull template. also trying to add the facebook button

    seems to work, but one problem when i press the button then a bos shows up that is as wide as the button itself…

    can someone help me out ? just visit my site and press the facebook banner in the header.

    thanks guys !

    • Mikolaj

      Yes, I confirm it. The problem looked the same when i tested it 🙁
      And in my case the “pop-up” “window”/”ballon” also was too narrow so the user could not close it 🙁

  • Mikolaj

    When I placed code given in this article, into functions.php (at the end of the file) my whole WP has crashed 🙁
    What am i doing wrong?

  • Mikolaj

    As expected,
    pasting the above code in functions.php of my child theme gives an error:
    Parse error: syntax error, unexpected ‘}’ in …… /public_html/wp-content/themes/customizr-child/functions.php on line 16

  • jordi pages

    This is the correct one:

    • Jake

      Im using your code, but it spits out an error
      Warning: Missing argument 2 for add_fb_button() in /home/a9926643/public_html/wp-content/themes/customizr/functions.php on line 158

      I am unable to find any midding arguments, but its a frudtrating error nontheless

  • jordi pages

    Hi Nicolas! Is it possible to place this button, not on the header but on the footer?… Because I have deleted the header and placed my social icons on the footer… if you want to take a look (

    Thanks in advance!


    • jordi pages

      Great! I found a solution to make it work! You have to paste the above code just as it is from line 1-17, and then, paste this bit :

    • jordi pages

      Sorry, this is the correct one:
      Great! I found a solution to make it work! You have to paste the above code just as it is from line 1-17, and then, paste this bit :

  • Rune

    I just realized that the bud exists in your own implementation on this site as well 🙂
    At least it does on my machine/browser 🙂

  • Rune

    The issue seems to change with the use of the different button designs ie. “button”, “button_count” and “box_count”
    One of the issues might be that I am not adjustong other properties properly (as described on the dev page as
    ” When I click the Like button, the comment popup window (‘flyout’) doesn’t show. Why?
    If the Like button is placed near the edge of an HTML element with the CSS overflow property set to hidden, the flyout may be clipped or completely hidden when the button is clicked. This can be remedied by setting the overflow property to a value other than hidden, such as visible, scroll, or auto.”

    The other issue I am experiencing, is that the Like button gets moved down to a new row below the social links instead of succeeding them.
    Perhaps this also has to do with sizes, margins or other interactions with other elements?

Comments are closed.