Creating a Facebook Page Tab App - a LOT more difficult than it should be

Right when I thought my frustration with Facebook couldn’t get any worse, I was tasked with creating a Facebook page tab today for a client. Please keep in mind I’ve done this on multiple occasions before, and one of our other developers actually made her own documentation for how to do this. Unfortunately, Facebook changes the workflow of this every other day (or so it would seem). So chances are by the time you read this, this workflow may also be out of date. If so, I feel for you, because hell knows Facebook is not keeping its docs up to date either. So with that in mind, I hope this can at least help point you in the right direction.

My app will house a static html page that I built, with the intent to basically iFrame it within Facebook as an ‘app’. As I mentioned before, Facebook’s documentation is pretty much useless and it misses a lot of steps, is outdated and incorrect. What else is new…

Step 1: Create your html page

You will need a valid SSL certificate for your page in order to use it in a Facebook tab (required since late 2011). Keep in mind the Facebook page tab size is 810px wide, so if your site isn’t responsive, have a look at it at this breakpoint to make sure it’s displaying properly.

Step 2: Create your app

You should already have your Business Page in Facebook, and you must be an administrator for that page (I am actually an Editor and not a full Admin role, but this will suffice).

Now go to https://developers.facebook.com/ and from the Apps menu, select ‘Create New App’. Provide your Display name and namespace. Don’t bother creating a test version if you’re just iframing in a page with limited functionality. Select ‘Apps for Pages’ from the Category dropdown.

Step 3: Configuring Settings

Go into the ‘Settings’ item in the left menu, and in your ‘Basic’ tab, supply the App Domain (domain that your static HTML page is living on). I believe the contact e-mail is not required, but you should provide one just in case.

Now, go into Status & Review menu item on the left, and make your App available to the Public (option at the very top of this page).

Additional settings you may want to configure will be in the App Details menu item on the left. Here you can add a Tagline, set languages and provide ‘Icons’. (I’m not actually sure what the icons you supply here will be used for, as the image for the page tab itself will be set elsewhere.)

Step 4: Adding your Platform

Go back to the Settings menu item and click the ‘+ Add Platform’ button at the bottom of this page. You will want to select ‘Page Tab’ from these options.

Provide your Tab URL and Secure URL. I’m not sure what the ‘Edit URL’ is, so I’ve left this field blank.

Here you can also set the width of your page tab and upload your tab image (111 x 74 pixels). Save your changes here once you’re done.

At this point you’ll probably want to preview your App to make sure it’s working before you continue to Step 5. To do this you’re going to have to add a new platform (makes so much sense, I know).

This time, select ‘App on Facebook’. Supply your page URL and the Secure URL respectively.* (Don’t ask me what Unity Integration is.) Once you’ve saved this, you can use the ‘Canvas Page’ URL provided to preview your app.

Step 5: Adding the App to your page

This is the section that was REALLY LACKING in Facebook’s documentation. They really should look into updating this ASAP (I’ve filed numerous complaints, so help me out here).

Now, you’ll want to go to the following URL in a new tab:

http://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&next=YOUR_URL

Replace YOUR_APP_ID with the Application ID which can be found in your Basic Settings panel.

Replace YOUR_URL with the Domain of the site that your static HTML page is living on. Be sure to include http:// at the beginning of this (www. is not required).

You’ll now see an Add Page Tab dialogue which allows you to choose the Business Page that this tab will be added to. Click the ‘Add Page Tab’ button and you’re good to go!

*On a side note, a Canvas page has a 760px width requirement. A Page tab has a 520px(standard) 810px(wide) option….. Seven hells…

Exciting projects to be unveiled this week!

Exciting projects to be unveiled this week!

AddThis and OG data: Inconsistencies and Preparing Ahead of Time

I’ve been working on a campaign for a client that includes sharing discrete pages from one main webpage. The webpage is comprised of a grid of squares, each representing a story that can be shared either through Twitter or Facebook.

Each block is linking to a detail page, and this URL is being used by AddThis’s API to spawn a Share dialogue box. The markup I’ve used for each tag is as follows:

<div class=”share” id=”addthis-1”>
<a class=”addthis_button_facebook at300b” addthis:url=”http://example.com/Kevin-s-Story.aspx” title=”Share this story on Facebook” href=”#”>
Share on Facebook
</a>
<a class=”addthis_button_twitter at300b” addthis:url=”http://example.com/Kevin-s-Story.aspx” title=”Tweet this story” href=”#”>
Share on Twitter
</a>
</div>

Note that an addthis:url”” is required for the share to function properly, otherwise it will just share the meta data associated with the page you are currently on. On Kevin’s unique detail page, I added the following Open Graph data tags:

<meta property=”og:title” content=”Kevin’s Story” />
<meta property=”og:description” content=”Lorem ipsum dolor sit amet” />
<meta property=”og:image” content=”http://example.com/kevin.png” />

At this point my share is working as expected with Facebook, but not with Twitter. Although Twitter claims to use the og title, description and image tags as a fallback from their own twitter tags, when testing my URL through the Twitter Card Validator*, I could see the appropriate information was not being applied for me until I also added these twitter specific tags:

<meta name=”twitter:card” content=”summary”>
<meta name=”twitter:domain” content=”example.com”>
<meta name=”twitter:title” content=”Kevin’s Story”>
<meta name=”twitter:description” content=”Lorem ipsum dolor sit amet”/>
<meta property=”twitter:image” content=”http://exmaple.com/kevin.png”/>

After many attempts adding addthis properties inline with my links, this is the solution that has worked the best.

The first meta property you see in this list is the card type. There are various Card Types that Twitter allows you to use when sharing a story. ‘Summary’ has a standard title, description and thumbnail image. You also have options with larger images, or inline videos.

In order to use these cards in their full glory, you need to get approval for your domain. You can request this when you try to run your URL through the Twitter Card validator. That being said, Twitter claims to need a few weeks turn-over time to approve a domain - so if you want to promise this feature to a client, keep this time allowance in mind before doing so.**

My frustration with Open Graph meta tags on the whole is the complete disconnect with the concept of ‘open’-ness. Though this example only looked at Facebook and Twitter (the latter of which seems to ignore the Open Graph tags altogether), LinkedIn also supports some open graph tags but has different requirements for some of these tags. The most prevalent example of this is the og:image tag. Every social media platform requires a different aspect ratio for this image. Even Facebook, which claims to require a 600 x 315 pixel image, constantly crops my photo into a square by cutting off the ends instead of scaling the whole image down. Keep in mind that if you are wondering what aspect ratio Facebook requires today for their og:image, look it up on THEIR dev site since they change this quite often. If you’re reading an article on some bloke’s blog from a couple months ago, they’ve probably already changed the specification since then.

* Facebook has a similar validation/debug service that can be used here: https://developers.facebook.com/tools/debug It will basically parse your page and show you what values it’s found for meta tags that it needs.

** I actually got my approval within a few hours of writing this post. As much as I understand them wanting to manage their expectations, that seems like a way over-ball estimate. Though keep in mind my client is national non-for-profit organization managing a public service, so this may have been a factor in the quick response time.

Ten thousand coffees - an amazing way to network with industry professionals

I actually can’t tell you how I heard about this site, but I just loved the concept.

Professionals can build a profile outlining their passions, educational background and why they got in the industry of their choosing.

Students or people looking to gain some career advice, practice interviews or receive portfolio reviews, can browse through the list of professionals they’d like to meet for coffee (or just chat over the phone, via email or Skype).

Professionals include Chris Hadfield, Rick Mercer and George Stromboulopoulos (I KNOW RIGHT!?), and many others from a vast range of industries and skill levels.

So worth the wait

Honest Ed&#8217;s is having an auction today on their iconic signage. The lineup has literally gone around the entire block and almost ends where it starts at the front entrance of the Sonic Boom. Let&#8217;s hope there&#8217;ll be some left by the time I get inside!

Honest Ed’s is having an auction today on their iconic signage. The lineup has literally gone around the entire block and almost ends where it starts at the front entrance of the Sonic Boom. Let’s hope there’ll be some left by the time I get inside!

It begins

It begins

"A single dream is more powerful than a thousand realities."

- J.R.R. Tolkien (via observando)

(via mookeeb)

1 2 3 4 5 6