Come on Apple… Amaze Me

So you might have heard about a new phone that’s out now. They call it the iPhone 5 and it is apparently the best phone Apple has ever created.

I don’t disagree. I like that they’ve gone back to a non-glass back. I like even more that it’s smaller, lighter, more powerful and let’s be honest — it has an improved, albeit still proprietary, plug. No more trying to plug it in the wrong way? Yes please. Still, these are evolutionary in nature and really only mildly so. It’s going to sell like hotcakes, I’m sure. Though why people would want to use hotcakes as a cellphone is outside the scope of this post. And if I weren’t already happy with my iPhone 4 (not even a 4S), I would upgrade. I’ll take a pass for now and wait awhile. Still, there are some things I would have liked to have seen.

As I said, I like the new non-glass backing. But perhaps they could go further? With the cash reserves Apple has on hand, they could buy Nokia and make an iPhone capable of surviving a gunshot. At point blank range. With a .50 cal. Seriously, have you seen those things? The Nokias, not the .50 cals. The point being anything Apple can do to ruggedize the iPhone (while still maintaining that famous iPhone design aesthetic) would be much appreciated.

Speaking of an iPhone surviving catastrophes, what about water? I’ve reviewed the Otterbox case for iPhone 4 but have since quit using it because the rubber shell was beginning to tear near the headphone flap and I decided I was going to try using my iPhone au naturale. So far I haven’t had any disasters and I’m doing alright with transporting my iPhone in my pocket but while I would dislike dropping it, I don’t think it would cause the same amount of panic as dipping it in liquid would. To that end, would it be possible to use some sort of liquid repelling construction or substance to at least provide a little peace of mind? It would be nice to know my iPhone could be used in the rain, or on a train, and on a bus, with a friend named Gus… ok, I’ll stop now.

Moving down the wishlist, I’m going to add something that I suspect could be just an iOS feature as opposed to a hardware update. Wi-fi only network mode. Currently iOS presents you the option to either disable all networking (Airplane Mode), only use cell networking (by turning off Wi-Fi) or to use Wi-Fi/cell networking (using Wi-Fi when available and falling back to cell otherwise). But what if I don’t want to use cell networking at all, and just want to make use of Wi-Fi? Apple, can you give me some of that, please? (Look, I just said please. That means you have to now, right? Tim?) Okay, those of you in the know are aware of my failure here. Head over to the Settings app, go to General->Cellular, turn off the cellular data option. Grats, you are now WiFi only. *sigh*

Right now, you might be wondering about the dock connector. There’s been a number of comments about Apple missed a chance to win some points by switching to the ubiquitous micro-USB connector rather than their new proprietary Lightning connector (seriously guys? Thunderbolt and Lightning? really?). If this article is to be believed, there are some solid reasons not to use micro-USB and in fact I think it would be reasonable to offer it as a new standard and to start switching phones to support it. That said, others have commented that while Apple might be justified in using their new connector, they should have offered adapters. That I also disagree with. If you’re buying a new iPhone 5, you’re getting a new Lightning adapter. If you have devices which work with the old Apple dock connector, in many cases an adapter won’t work purely because of the physical layout, not to mention the iPhone 5’s new dimensions. So in this case, my request is simple… Apple, offer your new connector up as a new standard, available for the industry to move to. It does seem to have some keen advantages and it would be nice to have everyone on the same page, widening the availability of third party add-ons that work with any phone, as opposed to having to pick one ecosystem or the other.

That’s all for me. There are other things that could be mentioned (NFC anyone?) but for me personally, this much and I’d be a very happy camper. That’s not to say the iPhone 5 isn’t a nice phone as is. Sure it is. But it could just be that much nicer. Tim? Are you taking requests?

cscreen for Intel

Years ago (2004?) I wrote a little command line utility that allowed users to alter their screen resolutions, bit depths and refresh rates. To be entirely honest I don’t even remember why I did it in the first place. However it seems to have been somewhat useful to a handful of folks over the years. I still see requests for it and occasionally get emails asking if I’ve updated cscreen for the Intel machines. The answer, now, is yes. I even created a page for cscreen for OS X so folks can link to it as needed.

That said… I do not have a Retina display and do not know anyone with a Retina display, so I cannot test it on such devices. If you have a Retina display and wish to give it a whirl, be my guest. In fact, if anyone wants to provide any feedback, please don’t hesitate.

Enjoy!

Unity Hinge Joint Tutorial Project

In the process of getting started on Centripetal 2, I ended up needing to make use of Hinge Joints. I’ve put together a Hinge Tutorial Project project with a sequence of simple scenes that might help explain and demonstrate the various options associated with Hinge Joints. Enjoy!

Centripetal 2

As some of you are aware, I created a little game called Centripetal and had it up on the iPhone/iPad app store. Wait, don’t go trying to download it now. My former company, Phoenix Networking Group, who had rights to the game, has transferred those rights over to me. As a result, the game has been taken off of the app store.

“So what’s this about Centripetal 2, then?” you ask. Well put. I’m rebuilding Centripetal.

For starters, I’m going to be using the Unity Engine this time around. When I first developed Centripetal, I made use of cocos2d for iPhone for sprite management and object handling and box2d for the physics. I was focusing on iPhone (and eventually iPad) development so the fact that this arrangement tied me to these platforms wasn’t a showstopper. And to be clear they are very useful frameworks. But it did mean that some of my friends who do not use iOS devices were unable to play Centripetal.

I had discovered the Unity Engine some time ago and grabbed one of their free copies to tinker with but never really got into it. Recently I took the plunge, grabbed a tutorial, went through it and came out the other side not only impressed with Unity but also confident that I could make good use of it myself. I created a really simple game to become more comfortable with the editor, which I’ll have to post about some time, and then started working on concepts for other games I might pursue. In the back of my mind, I wondered about converting Centripetal but for a number of reasons I put that aside.

That has changed though. I’ve started rebuilding it for Unity, with the goal of making it available for more folks to play (yes Kris, I’m hoping you and the wife and kids will finally get a turn :). I also want to add more to it. Inasmuch as Centripetal represents my first polished and completed game, I know there was more that could have been done. I hope to do that with Centripetal 2.

I don’t imagine the new revision will make much more money, if any, than its predecessor but that’s not really the point. I want to make something fun and keep building on something that began as my own creative endeavour. I’m glad I’m getting that chance.

Animation and Modeling are Non-Trivial

I want to tip my hat to those of you who have taken the time to learn modeling and animation. As a game developer (I suppose I get to call myself that by now) with an emphasis on the coding side of things, I have tended to try to “make do” when it came to visuals and sounds. When I finally splurged and involved an actual artist for the 2-d artwork, it was like night and day. I’ve always known at an abstract level that visuals and music are very important to a successful game. But until recently, I didn’t realize just how much goes into the modeling and animation for 3-d assets.

Some background: thus far, my games have been 2-d, the most recent involving use of cocos2d, an excellent 2-d game framework which I highly recommend. My games have been limited to iPhone development thus far, thus the link to the iPhone specific port of cocos2d. There are others. In any event, they have primarily been sprite based and honestly not terribly complex.

I have known about Unity for some time now, having downloaded and played with it a few times in the past but never really “getting” it. This was before I had tackled cocos2d, so perhaps at the time I felt daunted by jumping straight into 3-d game development. Maybe the concepts didn’t have time to settle. Whatever it was, it wasn’t until this most recent bout with Unity that it finally clicked. As a result, I’ve now created a game (which I haven’t yet released) with Unity and am laying the groundwork for another.

The first game is a simple arcade style game; one of those little time wasters you play when you are standing in line at the grocery store. It was sufficient to use the simple spheres, boxes and cylinders which you can create directly within Unity. The next game is a bit more ambitious and part of the reason is to do with the fact that I plan to use actual models imported for various objects. I want the visuals to take a step up. However, I don’t know anyone with the modeling skills, the time and the inclination to create the models I’m looking for. At least not right now. I knew that Unity can import models from Blender, a free (and powerful) modeling application, however I lacked the knowledge of how to make Blender work for me. Still, I decided that what I could do is learn enough about Blender to create some simple prototype models, import those into Unity and do my development and put off finding someone to make proper models to a later date.

I’m coming to the conclusion here, bear with me.

I’ve since been going through tutorials on Blender. Honestly, I suspect I’m already at the point where I could create the simple prototypes I need to get started on working further on my game concept, but I plan to finish the tutorials out. What I’m finding is that modeling is more approachable than I first feared and more complex than I first imagined. Much like drafting, once you learn the basics of how to accomplish certain tasks (creating a solid from a series of points on a Bezier curve, concepts of box modeling, etc.), there is as much science as there is art to building your model. To be sure, some things will require an artist’s appreciation to achieve certain effects, but getting from point A to point B isn’t quite the boogeyman I first expected it to be.

At the same time, modeling and animation are also more complex than I first thought they would be. I’m not sure what exactly it is that I expected, but seeing how different parts interact, seeing how one minor change in dimension can adversely affect an entire model, how losing track of one key frame in an animation sequence can suddenly cause a smooth animation to break all known laws of physics and require you to start over… there is a lot more going on behind the scenes.

While I never dismissed modeling and animation as being simple, I think in some ways I gave them short shrift, thinking that the amount of time and effort put into such things wouldn’t likely be on the same level as, say, the time spent coding the game. Well, no more. This one’s for you Mr. (or Miss) Modeling-and-Animation-Guy (or Gal)!

Interviewing for Your Next Tech Job

For those unaware of such trivialities, I recently found myself needing to find a new employer. This weekend caps my first week with my new employer, Resource Data, Inc. As was recently (minutes ago!) pointed out to me, “You never quite know if you’ve made the right decision until the first few days have passed.” I am happy to report that after my first few days, I’m content in the choice I’ve made. Everyone has been very welcoming and I’m looking forward to becoming a productive member of a good group of people doing quality work. That said, as I’ve discussed the process of bringing me aboard with my project manager, it was stressed to me how important interviewing is and how frequently it seems that tech candidates have problems with the interview step. I want to share my approach to interviewing for anyone who may find it helpful.

[Read the rest of this entry…]

Data Access with .NET Framework 4 (Exam 70-516)

I passed my 70-516 exam yesterday with a score of 860. Not as great as I would have liked but not nearly as bad as I had feared. Overall I’m pleased. For what it’s worth, I followed the same route many others have followed in preparing for the exam. I started with the MCTS Self-Paced Training Kit (Exam 70-516): Accessing Data with Microsoft .NET Framework 4 which I obtained through the O’Reilly Safari Books Online. The nice thing is you also get access to the CD contents which includes a copy of the MeasureUp testing software so you can take practice exams. I imagine it isn’t as up to date as what you would get if you went straight to MeasureUp or if perhaps the included copy of the software has a smaller question pool, but it was still helpful.

In any event, once I had finished going through the book and making sure to actually run through the examples and make an effort to answer the questions at the end of each chapter without looking back, I started going through the links from this blog post by ondrejsv. For each link, I would read through the linked article and then either follow relevant links in a new tab or open a new tab and search for a topic that seemed to be potentially of interest. Think of it as doing a depth-first-traversal of the MSDN articles. What I found was that there were interesting bits of information that were uncovered in the MSDN articles, especially in those containing sample code, which dealt with some topics in greater detail than the material covered in the book. In that way, the book was a good baseline for preparation but the MSDN links fleshed things out a bit more.

In conjunction with this, I continued to go through the sample tests. I kept a text file open and jotted down items that I was having difficulty with and would then spend time doing searches online for additional material covering that topic, both within and outside of MSDN. Additionally, I started creating mini-projects. Initially the projects would be very straightforward, switching back and forth between thick clients and web clients. Then I expanded to web services with various clients, splitting the EF entities into their own assembly, and so on.

I’m now considering which I should pursue next, 70-513 (covering WCF), 70-515 (Web apps) or 70-511 (Windows apps). If I’m going to shoot for MCPD, I will definitely need 513, but would need to choose which I would specialize in, Web apps or Windows apps. Still, not every project will involve WCF so perhaps for the short term I would be better off picking 515 or 511.

In any event, I’ve been told that 516 is considered to be more difficult than the other exams. Not having taken the others nor even studied them, I can’t say. For those who have, I’m curious what your opinion is.

Building Buzz for your iOS App

I recently received the following email:

Hi Lynn,

I hope you are doing well and that this holiday season isn’t keeping you too busy.

The reason for my e-mail is because I have a friend from College who just finished an iOS game and is looking to get some press for it. I wanted to know if there are any tips that you could share with him to help his game out there. If you could help him get in contact with any iOS websites, I’m sure he would be very grateful too.

What I responded with is more or less what I wish I had done with Centripetal and would do if I had it all to do over again. To begin with, this is premised on the notion that you are a small time developer, have virtually no reputation beyond your circle of friends and are planning to release your app with the hopes of making some money on it.

What I found is that timing is very important. When an app is first released on the app store, it will show up on lists all over the web. Ask anyone who has released a small app with little exposure what their sales looked like and they will tell you sales were highest within the first 24-48 hours of app store availability. So if you do absolutely nothing else, you will see a bump in sales and therefore in eyes on your app during that period. You want to make the most of that.

My suggestion then is to try to focus on driving your marketing and buzz building on that moment when your app first arrives on the app store. Granted, I haven’t tested this since as I said this is what I would like to have done, but work with me here. 🙂

Let’s assume for now that your app is not now nor has it ever been available for sale on the app store. You can make it available for review when it is done, but put the release date out into the future. This won’t affect the review cycle but will keep it from being up for sale immediately after approval. Once it is approved, you can push the release date back to a current date and have control over the actual release time within a 24-48 hour window.

Next, start building buzz NOW! Don’t wait for the game to be complete. Got a blog? Blog about your game. Hint at what features you’re going to have. Hold a poll about which feature to include or how to implement it. Get feedback. Drum up interest. Have people anticipating the game’s release. The more people get your game and at this state, the idea of the game, put in front of them the more likely they are to mention it to friends or at least share the link.

Can you create a gameplay or app usage video? If your app can be simulated on your Mac without any loss of features, then use something like Screenflick to record on your Mac. If that isn’t an option, you can use a separate recording device to view a physical handheld in action. Of course that’s not going to look as good, but what can you do? The point is, you want folks to see what the game is like. During development you can release videos of beta builds if you think they will be enticing. As you approach release you can snazz it up with music and such. For actual release, you definitely want to have a high quality app video available for your users to see.

You also want to have a webpage or website devoted to your app. It should make people want your game. To do this, list things people will look for in an app like yours. If it’s a game, tell them how fun it will be, how many levels it has, what groundbreaking new playstyle it involves. And link to the reviews for you app.

Ah yes, reviews. I used O.A.T.S. to get a list of sites that do reviews without accepting money to create or promote your review. It’s less expensive and more honest. Of course it is possible to get an honest review that you’ve paid for, but there is always the likelihood of a bias. If that doesn’t bother you, you can of course find many sites which are willing to take your money in exchange for a review and a little extra to move yours to the top of the pile. I leave that choice to you.

To get your app into a reviewer’s hands you will either have to release your app and provide promo codes, which all review sites accept but which blows the whole “control your launch date” idea out of the water, or you will need to provide them beta access through something like TestFlightApp. TestFlightApp is free and while it requires some extra fiddling on the part of the reviewer and the developer, it’s pretty easy to use. I imagine a number of review sites would be willing to meet you half way and make use of this. Regardless, no reviewer is going to want to have to pay for your app in order to review it, especially if you are requesting the review. At this point, you have to wait for the review. This could take awhile. Weeks. Perhaps even a month or so. Technically there’s no guarantee (unless you bought it) that you will even get a review. It’s up to you how long you wait.

Once you have a satisfactory number of positive reviews you can link to, set them up on your site and in your iTunes app store description. Make the app available. Once you see it on the app store, make additional announcements about its availability anywhere you can. Ask friends to spread the word. If you’re willing to spend money, you could consider advertising on sites you would expect users of your app to frequent. Advertising options vary greatly across websites. If you wish to do this, contact the webmasters of those sites directly for details.

Now, why all this fuss over timing everything to hit all at once? As I said, you get a free bump when your app is first listed on the store, especially if it is free or $0.99 because there are a number of sites and services that exist solely to scrape the iTunes App Store and list all new apps in those price ranges. It is my belief that if you can build enough buzz such that a large number of people are discussing and playing your app at the same time, it increases the odds that your app will then be mentioned to others, i.e. that it will become a hot item. And that’s what this is about, increasing your odds. As I said to begin with, the premise here is that you are an indie developer with no name, no buzz and nothing to build on. If you already have established credentials, you can build on that and you’ll see more success on average with the same app than if you had nothing to start with.

Of course, that’s not the end of it. You should never consider your app ‘finished’. Always consider things you could do to expand on it, build on it. When you release updates that provide more features or more fun or more playtime to users, it increases the perceived value and provides an opportunity for more buzz. Keep making the announcements, keep interest up.

And if your app is already on the store or if you simply disagree with this notion of opening day timing, then you can of course bust the sequence up. Release sooner, don’t hold back. But the rest of it still makes sense. You still want that app use or gameplay video. You want that website. You want to build interest before you ever release anything. You want the reviews. Of course if the app is already up, you can use promo codes.

Whichever way you go, however you choose to market your app, the important thing is to give the user something they want to use and something they want to share with their friends. There’s no marketing with higher quality than simple word of mouth. Hopefully, you’ll be able to build your own Angry Birds. If you do follow my advice here, particularly if it’s not what you were originally planning to do, I’d appreciate it if you drop me a line and let me know how it goes.

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.

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.