Adding a Facebook like button in the header

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 :

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.

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.

//adds the script in the head of your theme
add_action ('wp_head' , 'add_fb_button_script');

function add_fb_button_script() {
	?>
		<div id="fb-root"></div>
		<script>(function(d, s, id) {
		  var js, fjs = d.getElementsByTagName(s)[0];
		  if (d.getElementById(id)) return;
		  js = d.createElement(s); js.id = id;
		  js.src = "//connect.facebook.net/fr_FR/all.js#xfbml=1&appId=YOUR-APP-ID";
		  fjs.parentNode.insertBefore(js, fjs);
		}(document, 'script', 'facebook-jssdk'));
		</script>
	<?php
}

//adds the button on the right to the social icons in header
add_filter ('tc_social_in_header' , 'add_fb_button', 10, 2);
function add_fb_button($html, $resp) {
	$class =  ('resp' == $resp) ? '':'span5' 
	?>
	<div class="social-block <?php echo $class ?>">
		
		<?php if ( 0 != tc__f( '__get_option', 'tc_social_in_header') ) : ?>
       		<?php echo tc__f( '__get_socials' ) ?>
       	<?php endif; ?>

	     <div class="fb-like" data-href="YOUR-FB-PAGE-URL" data-width="50" data-colorscheme="light" data-layout="button_count" data-action="like" data-show-faces="false" data-send="false"></div>
     </div><!--.social-block-->
	<?php
}

And that’s it!

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

Cheers.