Advertisement
Creative Coding

Making WordPress Apps Ready for Facebook

by

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 is apps.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

  1. Change logo / images on Facebook Apps
  2. Create Facebook specific layouts
  3. 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.

Related Posts
  • Code
    Plugins
    The Beginner’s Guide to WordPress SEO by Yoast: On Page SEOThe beginners guide to wordpress seo by yoast 400
    In the last tutorial of The Beginner's Guide to WordPress SEO by Yoast we did the final tweaking, after that comes the part of how to use the On Page SEO meta box when writing a post or a page in WordPress. Today we will explore this panel/meta box and will discuss the some generic factors which help in ranking your content well. Let's start with a deeper look towards elements of this post. Read More…
  • Code
    Plugins
    Displaying Information of a WordPress.org Plugin on Your WebsiteWordpressdotorg plugin api border 400
    In the first part of this article, we discussed how to use built-in functions to communicate with WordPress.org and retrieve plugin details. In this tutorial we will put the theory in action to create a simple plugin which will allow us to display details of any plugin hosted on WordPress.org on our WordPress website using shortcodes.Read More…
  • Code
    Plugins
    Creating a Shortcode for Responsive VideoResponsive video shortcode main image 400
    If you're anything like me, you use YouTube to host any video you add to your WordPress site. It saves worrying about browser or device compatibility, it saves space on your servers, and it can be a lot more reliable.Read More…
  • Code
    Plugins
    Create a Shortcode to List Posts With Multiple ParametersPost listing shortcode main image400
    On many of the client sites I build, I find there are times when I need to include a post listing on a page. I'm not talking about archive pages here, but adding a custom listing to an existing static page. For example, I might want to list some posts on the 'About' page, or the site may require an in-depth page for a topic, with a list of posts and custom post types related to that topic. One way to do this is by creating a custom page template to include the current page content plus the results of a second custom query, but if you want more flexibility over how you list posts, or just want to do it a few times, a shortcode will be a simpler solution. In this tutorial, I'll show you how to create a simple shortcode to list all posts of a custom post type, and then I'll expand on that to create a shortcode with various parameters that users can specify to list posts however they want.Read More…
  • Code
    Plugins
    Multiple Shortcodes With a Single Function: 3 Killer ExamplesMultiple shortcodes with a single function 3 killer examples
    The powerful Shortcode API allows us to create "snippets" and include special content (such as PHP functions or complex HTML code) in our posts. It's extremely common to build separate functions for each shortcode, but is it really necessary? In this post, we're going to see how we can utilize more than one shortcode by building a single function.Read More…
  • Code
    Business
    Making the Best of Google AdSense in WordPressGoogleadsensepreview
    Blog monetization is not a "must", but it's a very important source of motivation. Whether you're blogging alone or along with some authors you gathered, earning even a few bucks a month can change your and/or your authors' approach to your blog. Since Google AdSense is one of the easiest and most popular ways for blog monetization, we're going to see how to use it with a WordPress blog with multiple authors. (Although, this tutorial will also work for single bloggers.) We'll be covering how to set up profile fields for authors' AdSense ads and how to display those ads with a function, with a widget, with a shortcode and automatically inside posts.Read More…