Facebook has been going on about the depreciation of FBML for quite some time now, and over the past few days some of this has come into effect with the ability to add static fbml to new fanpages being removed. Note: This doesn’t effect current fanpages using fbml.
The replacement is the usage of iframes and really isn’t something I have bothered to look at until the other day but thought it may be useful to Pixelloop.
The Brief
A client of mine had asked me to take a look at a wordpress theme that came out recently which pretty much just provides the frames for you to use, and some instructions, as the client wouldn’t want to change from the Thesis theme just for this one feature the alternative was to create a new subdomain and put a fresh install of WordPress on that to use it.
The Solution
It seemed a bit overkill to me and so I set out to do it without changing themes and use thesis with a custom template and a custom body class to apply some specific styling etc.
The Ingredients
- WordPress 3.1
- Thesis 1.8 (Though most of this should work with any wp theme if adapted to suit)
- Some Custom PHP and CSS for Thesis.
- A Facebook fanpage (For Testing)
- A Facebook App
Step 1
I am going to presume for the sake of this post getting too long and going over things already well documented online that you have WordPress and Thesis or any other theme you plan to adapt this to installed and setup etc. I am also going to presume you are familiar with the process of creating a new fanpage, however will provide some tips.
REMEMBER: All images within this tutorial can be clicked to zoom in and see closer.
Facebook Fanpage
In case you haven’t already made a fanpage as mentioned above, and are confused by the ever increasingly overwhelming and constantly changing user experience of Facebook you can go to Create a Facebook Fanpage… but wait….
Do NOT create a community / Causes fanpage, unfortunately these fanpage types do not support the ability to set the landing tab of your fanpage to a custom tab of your choice. ( We plan to use your new facebook iframe app). This will be a pain in the neck when you come to turn it on at the end and realize you have to create another fanpage. (See Image Below)
Once the fanpage has been created we can leave that for the time being and will return to it once our app has been created and we have a page to use on our wordpress site.
Facebook App
To create a facebook app you need to go to Facebook Developers which is the main page for everything FB Dev related. Here you can click the Set Up New App in the top right. If you don’t see this button then that is because you haven’t verified, To go direct to the Create an App page click Facebook App Setup. You will then see the below image on your screen and be prompted to name your app and agree to the terms.
Once Create Application has been clicked you are taken to the ABOUT tab of your application. This should look like below, and while none of the settings on this page directly relate to what we are trying to do it is recommended you fill in all fields and make use of the icon upload feature for your branding. On the below screen once saved, it may take you to your App Main page. Click Edit Settings and you will return to this screen, you will need to do so as the next step is to click the FACEBOOK INTEGRATION tab in the left sidebar.
We will then be prompted with some fields we must populate for the whole thing to work.
So the required fields on the above page are as follows…
- Canvas Page – Simply add a name with no trailing / for your app to reside at.
- Canvas URL – The url of the site we are going to pull our content from. Most of the tutorials I saw were using index.php and other extensions, as WordPress doesn’t use these for its permalink structure we can ignore them and do it the way WordPress would.
- Canvas Type – Needs to be iframe of course, as we are creating an iframe app.
- iframe Size – Tweak to taste.
- Tab Name – This will be the apps tab name when we add it to the sidebar of our fanpage we created earlier.
- The Tab Url – This may or may not show slightly different to different users but ultimately just the page name with a / on the end should do it. In our case we are going to make a page called fb on our site, so this is the one we want to use. Some ways use the homepage but this wasnt flexible enough for me and wanting to control the size of the template being pulled into the iframe.
Then you can hit save changes and your app will be updated. As we haven’t yet created the page on our site that we want to display on the fanpage we better go over to our wp-admin / dashboard and do that.
WordPress
So we have a fanpage ready to use, an app configured to our site and a page on it. This is where peoples usage will differ. I will justify why I used this approach, though there may be a few. I wanted to have the fanpage for this site, hosted on this site, and at the same time use wordpress because I wanted to be able to have it as a part of my CMS. I didn’t want to convert to a different theme, or restyle my whole website. So I did two things, use a custom body class, and create a custom template, though the latter isn’t necessary for most as a custom body class alone will allow you to create specific css styling for the fanpage and hide any unwanted elements around your content area, and change the size to conform with facebooks 520px width limit. You can have any height you want, if your width exceeds then a scroll bar will appear across the bottom.
- Create a New Page
We created a new page and named it fb. This means by default wordpress will give it an additional custom body class of .fb so we can apply page specific styling. Alternatively thesis would allow us to give this page any name and then add our fb to the Custom Class Meta Field.Populate your page with content, images, titles, links and whatever else you want, and publish it (You can come back here whenever you like to edit it of course).
- Style Our New Page
As I mentioned above, we have created this page so it has a custom body class of fb and therefore designing this the Thesis way, we will open up custom.css and instead of beginning each style with .custom we shall use .fb instead.
Below is some example css I have used to take this site and remove any elements I don’t want to get the page back to basics. The majority of the div id and classes mentioned in the below code are thesis specific, I have basically hidden a load of elements, like the header, footer, nav, page title etc, and focussed on displaying the content in plain white box with a light grey border. The important bit below is the custom body styling limiting the size of the area in use and setting an overflow:hidden; to ensure no horizontal scrollbar will show.
/* Fanpage Styles */
body.fb {
background: none repeat scroll 0 0 transparent;
margin: 0 auto;
overflow: hidden;
width: 520px;
}
.fb #title_area {
display: none;
}
.fb #footer_area {
display: none;
}
.fb .post_box {
margin: 0;
padding: 10px;
width: 498px;
}
.fb img.right, .fb img.alignright, .fb .wp-caption.alignright {
margin: 0 0 18px 18px;
}
.fb img.left, .fb img.alignleft, .fb .wp-caption.alignleft {
float: left;
margin: 0 10px 10px 0;
}
.fb #footer_area {
display: none;
}
.fb h1 {
background: none repeat scroll 0 0 transparent;
color: #111111;
font-size: 33px;
line-height: 33px;
margin-bottom: 20px;
margin-top: -25px;
text-align: left;
text-shadow: 2px 2px 7px;
}
.fb .headline_area {
display: none;
margin-bottom: 0;
}
.fb .format_text h2, .format_text h3 {
color: #111111 !important;
display: block;
float: left;
font-family: tahoma;
height: 100%;
margin: 10px 0;
text-align: center;
}
.fb .headline_area h1, .fb .headline_area h2 {
display: none;
}
.fb #sidebar_1 {
display: none;
}
.fb #bread {
display: none;
}
.fb #content {
width: 520px;
}
.fb #content_box {
width: 520px;
text-align: left;
}
.fb .full_width .page {
margin: 0 auto;
padding-left: 0em;
padding-right: 0em;
width: 520px;
}
.fb #nav_area {
display: none;
}
Once the above has been added to the sites css or a variant to your own liking we can now preview how the page looks. Mine is shown directly below.
As you can see above, I have added a h2 heading, some text an image floated to the right, and 3 images across the bottom, all of this formatting inside the box has been managed with the wordpress wysiwyg editor. The above in no way resembles the site/blog you are currently reading this article on thanks to the custom css. You can check this page at Facebook WP Page.
What Now?
The next thing we want to do is head back over to the developer main page at Facebook Developers and on the right hand side we can go back to our facebook application we made. When we get there we need to go to Application Profile Page, I have marked this in the image below with a messy “sorry” red dot.
Once we arrive at the Application Profile Page we want to navigate to the left hand sidebar and add this app to our fanpage. Below I have again used a red dot to show you where the add to page link is, and a red dot to signify the pop up which appears listing all pages you are an admin of, excuse my irrelevant list as I have a tonne. Find your fanpage you created and click the Add To Page button. (See Below)
Nearly there, now we need to click close in the bottom right, and navigate over to our fanpage to check our our new tab, in our case its the Welcome tab at the bottom.
As you can see from comparing the above to the wordpress page before, it is pulling through the exact content from the page. You can visit the fanpage to see it properly with more changes and features since this articles completion go to Pixelloop Fanpage Welcome Tab.
