Adding a Facebook Like Box in place of a featured page in the Customizr theme

Let’s say you need to feature your Facebook fans on your home page, and display it like one of your featured pages.

I am assuming that you have generated your Facebook code for the lite box here : https://developers.facebook.com/docs/plugins/like-box-for-pages.

Now, here’s a quick snippet to replace one of your featured page by your Facebook like box.

To use this snippet you’ll need to set two parameters :

1) the id of your featured pages : choose “one”, “two” or “three”. In the following example, I have choosen the third one.

2) your Facebook page URL. For example https://www.facebook.com/my-page-name. In the following snippet you will need to replace YOUR-FACEBOOK-PAGE-URL by your Facebook page url.

Note: Featured Pages Unlimited happy users ? The filter is different for you : use ‘fpc_single_display’ instead of ‘tc_fp_single_display’

//FIRST ADD THE SCRIPT PROVIDED BY FACEBOOK RIGHT AFTER THE BODY TAG
add_action('__before_header' , 'my_fb_box_script');
function my_fb_box_script() {
	if ( ! tc__f('__is_home') )
		return;
	?>
		<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/en_US/sdk.js#xfbml=1&version=v2.0";
			fjs.parentNode.insertBefore(js, fjs);
			}(document, 'script', 'facebook-jssdk'));
		</script>
	<?php
}

//THEN ALTER THE DEFAULT FEATURED PAGE RENDERING FUNCTION WITH YOUR GENERATED FACEBOOK LIKE BOX CONTENT 
add_filter('tc_fp_single_display' , 'my_custom_fp_content' , 10, 2);
function my_custom_fp_content ($html, $fp_single_id ) {
	if ( 'three' != $fp_single_id ) // <= set the id of your featured page here : one, two or three
		return $html;
	ob_start();
	?>
		<div class="fb-like-box" data-href="YOUR-FACEBOOK-PAGE-URL" data-colorscheme="light" data-show-faces="false" data-header="false" data-stream="true" data-show-border="false"></div>
	<?php
	$html = ob_get_contents();
    if ($html) ob_end_clean();
    return $html;
}

See How to customize the Customizr WordPress theme for more information on how to set up a functions.php file in a child theme.