pyehouse
6Nov/110

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:

<?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.

4Nov/112

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 www.pyehouse.com but I install it on www.pngsupport.com. When you visit www.pngsupport.com, 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 https://www.pngsupport.com (note the https) you will get a certificate for server261.com, 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 server261.com but you visited pngsupport.com.

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 server261.com. Was there a way to use the server261.com 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 pngsupport.com domain hosted on their server261.com server, you can reach your content at http://pngsupport.server261.com. Even better, you can get an encrypted link with https://pngsupport.server261.com with zero complaints from your browser. So then I went into the Facebook application's settings and replaced www.pngsupport.com with pngsupport.server261.com 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.

8Sep/110

Motorola Facebook Phone?

I have to say that a Motorola Facebook phone (as reported by Techcrunch) was not something I expected to see. Given Google's recent purchase of Motorola Mobility and their launch of Google+ as competitor to Facebook, as well as the ongoing battle for ad revenue and I don't see a bright future for this device. Given the development cycle of these sorts of devices, it was likely in the pipeline well before Google's purchase which explains why it's even seeing what little light of day it is getting at this point. But I foresee a minimal effort to push these devices assuming they remain as currently designed.

7Sep/110

What Went Wrong At Yahoo?

Yahoo is hurting. It's been hurting for some time now. It's growth has been stunted, in fact seeing ad revenue shrink, particularly in the face of fierce competition from Google and subsequently Facebook. According to the Wall Street Journal, an insider source reports the company is willing to consider selling to the right bidder. Taken with the rest of the financial news about the company's woes, it signals a pretty sharp descent from what were once lofty heights. What went wrong?

It is easy to say "Google and Facebook" and leave it at that, but that leaves a lot unsaid. Google, for instance, nominally offered precisely what Yahoo was offering. As has been stated repeatedly of late, the real client of Google (as well as Yahoo) is advertisers. Their real product for sale is the attention of the users of their various services. But in order to create that product, they still have to provide something attractive for those visitors. In other words, a better experience. That is where Yahoo failed against Google. Whether Google has strayed from it's "Don't Be Evil" mantra, it started by focusing on providing quality search results for those using their search engine. The algorithm has been tinkered with and improved over time, but even from the start, users were treated to a very simple and very effective interface. One text field, one button. This was in contradiction to Yahoo's interface which enticed you to drill down through their heirarchy of categories. Of course Yahoo also had a search field, but on top of the relative clutter of their home page, they had yet to really provide a similarly effective search experience. As a result, the core reason people visited either site was better served by going to Google rather than to Yahoo. Yahoo began providing peripheral services to their users before Google did, like Yahoo Mail, still one of the most widely used web-based email services. But monetizing those services was still problematic.

So what of Facebook? Where Google stepped in and did Yahoo's services but better, Facebook offered a completely different service but one that ultimately competed for the same advertisers. Yahoo has had social services and had them in place well before Facebook. But again, they weren't capitalized on and thus lost ground. Moreover, services like Yahoo Groups, Yahoo Personals and Yahoo 360 were all too disparate and never provided a single cohesive experience for the end user. Facebook provided all of the social aspects in one location and has continued to add to them. More importantly, Facebook provided third party developers the opportunity to tap into their ecosystem and make money. This not only increased direct revenue to Facebook, it also allowed additional compelling content to come into Facebook for visitors without Facebook having to lift a finger to create it. Yahoo, in contrast, focused primarily on user created content and again didn't seem to effectively make what services they did have into revenue centers.

What Yahoo lacked was a focused vision of not only where to go but how to get there. It seems like any time a new feature was to be added, it would be bolted on rather than integrated. And with the revolving door policy that is developing in their top spot and now the leadership-by-committee approach that also looks to be developing, Yahoo doesn't look to be breaking out of their slump anytime soon. Still, they are big. They do get traffic. They may not be top dog, but they aren't to be ignored. If the right person is brought in with the right mandate, a lot could be done to turn the company's fortunes around.

I'm just not holding my breath.