It is becoming increasingly popular for people to integrate their WordPress sites into Facebook applications and fan pages. Although this tutorial is not about how to make an integration, it will explain some smart code techniques that can be implemented for a Facebook-specific view.
Facebook and other websites have specific policies about what not to do on Facebook and this tutorial will show you just exactly how you can obey these policies.
Why Use This Technique? Avoid Getting Banned!
As lovely as it is to create a Facebook App using a WordPress site, many sites include advertising blocks from providers that Facebook does not allow.
Additionally, there is much talk on the net that Google Adsense does not allow the embedding of their ads on Facebook.
For the innocent web developer or blogger, it would be detrimental to get banned because of failure to adhere to either Google Adsense / Facebook policies; therefore, in order to avoid possible problems, the following technique can be implemented.
Facebook has provided a list of providers that they support: Advertising Providers on Facebook Platform
Writing the Function
For the purpose of this tip, we will assume that you are building an adsense-ready WordPress theme. Within the file functions.php, add the following function.
function is_facebook() {
$url = $_SERVER['HTTP_REFERER'];
$parse = parse_url( $url );
$host = $parse['host'];
if ( 'apps.facebook.com' == $host ) {
return true;
}
else {
return false;
}
}
- The line
$url = $_SERVER['HTTP_REFERER'];sets a variable of the Facebook App to the address that the WordPress site is being iframed in. For example:http://apps.facebook.com/my-app-name/ -
$parse = parse_url( $url );creates an array of all components used in the Facebook App address. -
$host = $parse['host'];This line gets the host being used, which in this case isapps.facebook.com - The next lines check to see if the host is from a Facebook App and returns a Boolean.
Using the Function
In places where you would like to display an Adsense block, you can write the following:
if ( is_facebook() ) {
// Display nothing or display AD from Facebook Ad Provider
}
else {
// Display my Adsense Ads
}
Other Uses of the Function
- Change logo / images on Facebook Apps
- Create Facebook specific layouts
- Use Facebook comments while viewing on Facebook
A neat trick with this function is to call different template parts. The snippet below, shows you how you can call a different header file header-facebook.php by using the function.
if ( is_facebook() ) {
get_header( 'facebook' );
}
else {
get_header();
}
Creating a Shortcode
Still assuming that you are working on a theme, open the functions.php file and add the following:
add_shortcode( 'is_fb', 'wp_if_fb' );
function wp_if_fb( $atts, $content = null ) {
if ( is_facebook() ) {
return $content;
}
}
add_shortcode( 'not_fb', 'wp_not_fb' );
function wp_not_fb( $atts, $content = null ) {
if ( ! is_facebook() ) {
return $content;
}
}
The first line creates a shortcode is_fb with a call back function wp_if_fb. Content passed in the shortcode will be displayed only if the WordPress site is wrapped in a Facebook iFrame.
The second add_shortcode function is used to display items in a post not currently viewed via Facebook.
How to Use the Shortcode
Within any textarea that the shortcode filter is applied to, you can use the previously created shortcode there. Below is an example of how to use the snippet.
[is_fb]This is my text that will show up on Facebook[/is_fb] [not_fb]This test will be displayed outside of Facebook[/not_fb]
A more practical example is a welcome message in an about page.
For example:
I would like to welcome you to my [not_fb]Website Portal[/not_fb][is_fb]Facebook Application[/is_fb]
To learn more about creating shortcodes, visit this link: Shortcode API
Conclusion
Again, I can not stress enough about the importance of adhering to Google / Facebook's policies. For guest bloggers that are engaged in revenue sharing sites, it is important to know that their Google Adsense accounts are not at risk of being banned. Therefore, if measures were put in place by using our function, we can minimize the risk.
For Designers, the function we have created would be a perfect solution to creating a Facebook specific design in their themes. Such a design can make the WordPress site look like a well designed Facebook App by removing aspects that would otherwise make it seem more like a website. Like hiding header and footers to display page only, would be great for a simple promotional page tab.
Finally, the Developers can take advantage of the plugin and use it in their WordPress plugins. Developers can use the snippet for custom registration and login scripts, advertisement plugins and so much more.
Comments