Adding a Facebook like button in the header

Note : This snippet applies to Customizr version 3.1.x and below. It may not work with version 3.2+. Use with caution on 3.2+ and check the availability and type of the hooks in the Customizr hooks API.

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 : https://developers.facebook.com/docs/plugins/like-button/

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

 add_facebook_button

 

 

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.

add_facebook_button_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!

Cheers.

 


About Nicolas

My name is Nicolas Guillaume (nikeo). I am the developer of the WordPress Customizr Theme. This website is a discussion platform, your comments are welcome!


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

  • Reply
    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?

  • Reply
    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 (www.laregadora.cat).

    Thanks in advance!

    Jordi.

    • Reply
      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 :

    • Reply
      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 :

  • Reply
    jordi pages

    This is the correct one:

    • Reply
      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

  • Reply
    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

  • Reply
    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?

  • Reply
    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.

    http://www.balans-sieraden.nl

    thanks guys !

  • Reply
    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.

  • Reply
    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?

  • Reply
    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.

    http://juniorproapp.esy.es

    thanks!

  • Reply
    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.

    Thanks!

    • Reply
      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 : http://wordpress.org/support/theme/customizr/
      You will get a wider audience there.
      Thanks

  • Reply
    Isabel

    Hi,
    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.

Leave a Comment

Your email address will not be published. Required fields are marked *

Do you need to share some code? To display it in a nice looking syntax highlighter, wrap your code between the following tags (css code in this example) : <pre class="lang:css">YOUR CODE</pre> ( possible code language acronyms : css, php, xhtml, javascript, sql)

You may also use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">