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

⚠️ 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.

You can search the user’s forum or ask the user community by opening a new thread in the Customizr theme forum. Before opening a new topic, you might want to follow the troubleshooting steps..

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

facebook-like-box-in-place-of-customizr-featured-page

 

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;
}

 

Where to copy/paste this code? => in your functions.php file. We strongly recommend you create a child theme. Download a start-up child theme here.

Remember: you shouldn’t edit the theme’s functions.php.

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

Leave a comment

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

6 thoughts on “Adding a Facebook Like Box in place of a featured page in the Customizr theme”