Facebook Page Tab and WordPress

Previously I discussed what I went through to use the generic SSL certificate that came with my ICDSoft hosting service with the Facebook application I set up for my Facebook Page tab. I mentioned at the end that I also had to do a little rejiggering to use a WordPress page for the Facebook app. It’s actually pretty simple and I’m going to share that, too. You may want to review the setup steps for a Facebook app as a Facebook Page tab. Got it? Good, let’s move on.

As you saw, when setting up a Facebook app for use as a Page tab, Facebook asks you to give them a secure (https) URL to point to, which they embed into an iframe on the page. The URL will be sent to the browser to be loaded by the client. Whatever is served up will be viewed in an iframe with a max width of 520 pixels. It is critical to understand that much. If you don’t pay attention to the 520 pixel width limitation, your FB page will look rather ugly and likely have horizontal scrollbars and only partially revealed assets.

You’ll want to make sure that your WordPress site will work when invoked from the https URL. I imagine this will typically be the case. I know for me, simply changing the URL to https was sufficient and I could easily traverse my WordPress driven site via SSL. If this isn’t the case for you and you want to use WordPress to handle your Facebook Page tab content, you are going to have to find some means of getting your WordPress site to respond to https URLs.

Let’s assume for a moment that you do manage to get SSL working for your WordPress site. Next you are going to need to create a page which you want to hit via your FB app. That much is easy, but there are two issues you will likely need to resolve. One is that your new FB app page is going to show up in any list of pages for your WP site which you have and the other is that your new FB WP page is not going to be styled optimally for inclusion as an FB app page.

Starting with the first point, why would it matter that your FB app page on your WP site is going to show up in the list of pages? Frankly, because of the second point, optimizing it for FB app usage. It’s likely going to look quite different because of how it will be used, and so it would be good not to have it navigable under normal browsing situations.  To eliminate this, for starters if you are using the ‘Pages’ widget in your sidebar, go to your WP dashboard and open ‘Appearance->Widgets’ and click to expand the ‘Pages’ widget. By default, WP allows an ‘Exclude’ area which you can enter the page ID of each page, separated by commas, which you do not want to have show up in the ‘Pages’ widget. More tricky are themes which include the pages in the header or other areas. Unless the theme provides the option to not list certain pages, you will find yourself in a bit of pickle, perhaps having to go so far as to custom edit your header in order to not list them. Because that is going to depend on which theme you have installed, it’s beyond the scope of this article to discuss code customization.

The second point, however, will involve some customization in the form of a custom page template. Here is what the WordPress Codex has to say on creating your own page template. It’s a bit barebones, so let me help you out a bit. First, create a new file in your theme’s folder called ‘customfbpage.php’. The contents of the file should look like this:

Template Name: Facebook Page

You can upload this via FTP or your website’s control panel or whatever other means you have of pushing new files up to your template folder. Now, go to your WordPress console and go to the Appearance->Editor link:

On the right you will see a list of files which can be edited for your template. You can see in my snippet I have only a scant few because I’m using a child template. YMMV. Now you need to find the ‘page.php’ for your template. If you are using a child template, you will need to open the parent template’s copy of page.php if you haven’t already overridden it in your child. Otherwise click the child copy. Regardless, just copy all of the text within by highlighting all of it, right clicking, and choosing ‘Copy’. Now go back to the customfbpage.php and edit that. Click below the comment block and paste the contents in by right clicking and choosing ‘Paste’. I’m using the NotesIL theme as my parent theme, so this is what I see:

Template Name: Facebook Page

<?php get_header(); ?>

	<div id="container">
		<div id="content">
			<?php while ( have_posts() ) : the_post(); ?>
			<div id="post-<?php the_ID(); ?>" class="<?php notesil_post_class(); ?>">
				<h2 class="entry-title"><?php the_title(); ?></h2>
				<div class="entry-content">
					<?php the_content(); ?>
					<?php wp_link_pages( 'before=<div class="page-link">' . __( 'Pages:', 'notesil' ) . '&after=</div>' ); ?>
					<?php edit_post_link( __( 'Edit', 'notesil' ), '<p class="edit-link">', '</p>' ); ?>
			</div><!-- .post -->
			<?php comments_template(); ?>
			<?php endwhile; // end of the loop. ?>
		</div><!-- #content -->
		<?php get_sidebar(); ?>
	</div><!-- #container -->
<?php get_footer(); ?>

Click on ‘Update File’ to save your changes to customfbpage.php then click on ‘Pages’ over on the left to list all of the pages including your Facebook app page. Click the ‘Quick Edit’ option for the FB app page and make sure it looks similar to this:

There are several key points here. First, make sure you pay attention to the ‘slug’ field. If you told Facebook to look for your Facebook app content at, then your slug should likely be ‘fbpage’ because that is where WordPress will display that page’s content. Next, make sure the ‘Template’ is set to the ‘Facebook Page’ template which you just saved. Of course, the name will be different if you opted for a different template name. Finally, you probably don’t want to allow comments. Maybe you do. I didn’t, so I have that turned off. Once you are happy with your settings, click ‘Update’. Now go back to the ‘Appearance->Editor’ panel and click on customfbpage.php again. Time to get nitty-gritty!

First, I’ll just say that for my case, using a NotesIL based theme, my choices were simple. I removed the lines in the template which contained the following:

  • the_title()
  • wp_link_pages()
  • edit_post_link()
  • comments_template()
  • get_sidebar()
  • get_footer()

The title line wasn’t necessary because the embedded content was going to be embedded within a Facebook page, so what was the point in including space to say “By the way, this content is for a Facebook page”? The wp_link_pages() line would have shown links to other pages which I didn’t want to do. The edit_post_link() line would, if I were logged in and an admin, have displayed an ‘Edit’ link allowing me to start editing the content. It wouldn’t have been visible to other users, but I would have seen it and I didn’t want to, so I removed it. I can still edit the page by going through the ‘Pages’ section in the dashboard. The comments_template() shows any attached comments, but I have comments disabled, so that got removed. get_sidebar() and get_footer() show the sidebar and footer respectively, both things I wanted gone to save space. What you have in your page.php is going to determine what you need to remove from your customfbpage.php file.

But that wasn’t it. I still needed to do some CSS customization. I also edited the style.css for my child theme and added the following:

.page-template-customfbpage-php div#header h1 {
.page-template-customfbpage-php div#blog-description {
.page-template-customfbpage-php div#container {
margin:0; padding:0; border:0;
.page-template-customfbpage-php div#content {
margin:0; padding:0; border:0;

This sets pertinent content blocks to a 520 pixel width with no margins, padding or border, something we need in order to make our FB page look alright. Once I had this in place, I was able to load my Facebook page up and load the tab and my content looked right as rain.

Now, there are some other pitfalls. One example is a link I included in the content of the FB page to our contact page. This caused the contact page to load in the embedded iframe, with all of the default look and nasty horizontal scrolling. To fix this, I altered the link to have a target of _top, which caused the link to load into the page as a whole, not just the iframe. So keep in mind that what your content is loading into is an iframe and be cognizant of  all that entails.

I hope you find this helpful. Let me know in the comments below or drop me a line by email.


Facebook Page Tab, SSL and Hosted Websites

Here’s the setup. My company, PNG Support, has a Facebook page and we wanted to be able to set up custom content there rather than just rely on using the wall to post links back to the main site. If you are unfamiliar with how to do this, there is an excellent write up here on setting up an iFrame Application on your Facebook Page. While that page provides some nifty details, for the purposes of our discussion here I will point out that it involves the following:

  • Have a website hosted somewhere
  • Make sure it has SSL enabled
  • Tell Facebook the URL to create the Facebook application
  • Link the application to your Facebook Page

What happens is that when someone visits your Facebook Page, specifically the tab you created for the custom content, Facebook sees it is an app and embeds an iframe linked to your secure (https) URL. At that point, the behavior is entirely determined by the client’s browser. And that is where things can fall down if you are using the default SSL certificate that likely came with your hosted website.

If you are unfamiliar with SSL or https or secure webpages, think of it as a means of determining trust. When you visit a secure webpage, an SSL certificate is given to your browser. Like an actual certificate, it states who you are (e.g. PNG Support or Lynn Pye or Barack Obama or…) but it also states what domain the certificate was issued for. In other words, it not only says who you are supposed to be, but where the content is supposed to be coming from. In addition, these certificates have an expiration date. So the browser checks to see if the certificate is expired or is coming from a website which it is not issued for and alerts you to this. What does that mean? Suppose I get a certificate issued for but I install it on When you visit, your browser can, and should, complain bitterly that the certificate is not valid because of the domain mismatch. In most cases you are given the option of continuing anyway.

This can also come into play on the bulk hosted services. These services have multiple servers with each server configured to host many websites, sometimes several hundred or more. If the hosting provider offers SSL as a default freebie, it means they have a certificate for their server to provide basic SSL encryption when someone uses the https handler for your website. You see, that’s the other part to SSL. Once the certificate is accepted, the browser can have an encrypted conversation with the server, making it far more difficult for someone to snoop on what you are browsing for.

In the case of my company, we use ICDSoft for our hosting provider, whom I highly recommend. In our particular case, we happen to be hosted on server261. This means that if you visit (note the https) you will get a certificate for, your browser will gripe, you will likely be given the option of proceeding anyway and, if you do, you will see the site as it normally looks. That’s because the certificate is issued for but you visited

Now what does this have to do with Facebook Pages and custom iframe apps? Well, for security reasons Facebook requires you to use https links. Like I said, it embeds your link in an iframe on the page. So if the security doesn’t match up, your audience is going to get some nasty security warning embedded in your Facebook page instead of the luscious layout you perfected last night. At this point, you’d be tempted to start investigating purchasing options for your SSL certificate. I know I did. And when I started looking at the price tag (over $100/yr for the cheaper options), I realized I didn’t like that option. Then I had a thought. The certificate covers anything hosted on Was there a way to use the domain to reach our content and therefore get a certificate match and have everything play nice.

As it turns out, there is, at least with ICDSoft. Keep in mind this may not always work if the server is not configured for this. But for ICDSoft, if you have, for example, the domain hosted on their server, you can reach your content at Even better, you can get an encrypted link with with zero complaints from your browser. So then I went into the Facebook application’s settings and replaced with and everything worked flawlessly. The certificate was matching, the content was coming up as desired and all was right with the world.

Of course, then I decided I wanted to link to a WordPress page instead of a hand written bit of PHP. More on that another time.