pyehouse

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:

<?php
/*
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:


<?php
/*
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>
			</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 https://www.joeswebsite.com/fbpage/, 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 {
width:520px;
}
.page-template-customfbpage-php div#blog-description {
width:520px;
}
.page-template-customfbpage-php div#container {
width:520px;
margin:0; padding:0; border:0;
}
.page-template-customfbpage-php div#content {
width:520px;
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.