Adding a Facebook like button in the header

⚠️ Code snippets might not be compatible with the latest version of your theme. Always use a child theme to customize your theme, and test your code on a staging website before migrating to production.

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.

//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.

 

Leave a comment

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

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