We wanted to inform you about some upcoming changes to the way campaigns are rendered on Facebook Fan pages. Facebook has announced several changes to the look and function of Fan pages, one of which can affect the way campaigns are displayed within your fan page. Fan Page tabs will shrink from 760 pixels wide (current) to 520 pixels wide to accommodate a slightly revised design. This change has been scheduled for Early 2010, but more specific timing details have not yet been announced. We will certainly post an update once the official dates have been released.
What follows is a pictorial explanation of the expected changes.
What it currently looks like to run a promotion on a Facebook Fan page from Tab View.
Pictured below is the same promotion running in the new Fan page Tab View format, at 520 pixels wide. The header banner has been adjusted to fit the width of this display, and it can be seen that some of the details and pictures within the banner are no longer visible past this point. To make sure users see everything you want to show them, we suggest that in the creation of your custom 760 pixel header banners, to leave the banner past the 520 pixel mark without any messages or pictures.
This change only affects the Tab view. When the user enters deeper into the page, like to view the rules, or to submit their entry, they are directed into canvas view, which has not changed in appearance, and remains at the full 760 pixels wide. For this reason, we are not changing the upload specifications of the Header Banner in the Wildfire Promotion Builder tool, and keeping the upload width specification at 760 pixels.
What this means for your campaign:
Because the width of the tab display is decreased to 520 pixels, the display of the header banner will be affected. Uploaded header banners which are 760 x 100 pixels will be cut off by the display at the 520 pixel mark. This is a design change that our developers are working on adapting the Wildfire tool to. However, in order to adapt to these display differences rapidly, we recommend that any custom header banners uploaded to the Wildfire Promotion Builder tool be adaptable to both sizes. In other words, you should still upload a 760 x 100 pixel header banner image, but design your image so that if 240 pixels are not displayable off the right side, none of the message is lost.
Our developers have already adjusted the Promotion Builder tool so that the rest of the characteristics of your promotion will not be affected by the Facebook display changes.
As always, we value your feedback and welcome your comments. Feel free to email us at any time if you encounter questions while setting up your promotion.
Wow, how timely (sorta). Just showed our client the banners for approval. I will do one more as suggested. Thanks.
Hey Andrew,
Thanks for your message! We’re glad the post came just in the nick of time (sorta)!
Best,
Maya
Have you considered using a splash page image on the initial tab, just so everything else can appear via the canvas and therefore be safely extended to 720px?
Adding an additional upload box in your campaign interface, where clients could upload a “splash” image (which would automatically link to a canvas-driven Details tab) might be simpler than trying to redesign every other section of the Details tab for the new 520px width.
Obviously it would add another click for entrants, but it might be worth it in the overall hassle it would save.
Hey Kelli,
Thanks for the feedback! We are still building out and improving our tool every day, so your idea definitely helps us add to the realm of possibilities which we could develop our tool within.
Have a great day!
Maya
I agree with Kelli. It would seem that a “Click to Enter” splash page would be needed, especially for White Label campaigns.
If this is only going to affect the Tab version of the campaign, how can a White Label app/css be designed around it? Do I design for 760 still?
Please let me know any tips/suggestions you have.
Thanks.
-Jen
Hey Jen,
If you have created custom banners or headers, you may want to recreate them to reflect the 2 different views…so make sure all the important stuff that shouldn’t get cut off is in the first 520 pixels, and the rest up to 760 can just be filler color, or filler image. That is, if it gets cut off, the user won’t miss anything from the image. Then upload them in time for the change to your campaigns. For fully custom campaigns, its is good practice to just design for a 520 width on all pages. We detailed the change in a blog post several months back, you should take a look to prepare yourself with how it your campaigns will look visually. http://blog.wildfireapp.com/2010/03/22/upcoming-facebook-fan-page-tab-design-changes/
With best regards,
Maya
Hi Guys, What about using the hidden 240 pixel section of the banner as a hidden message section? This area would allow for deeper and more relevant call-to-action messages and offers that will only be available to those who actually navigate through and show further interest.
So maybe this change will add more interaction on Fan Pages?
All the best,
Gordon
Hey Gordon,
That’s a thought! We’re really happy that people like you are so engaged with the potential for the campaign design and style! Your feedback will certainly be considered, as we build out our tool further in the future.
Thanks!
Maya
This is great, thank you for keeping us informed of all the design changes!
Hi Diana,
Thanks for your kind words! You’re very welcome!
Best,
Maya
i need to know about this more, is there any sample?
thank u
Hey Berman, we have some great examples that are currently running! Check out the simple cake sweepstakes at Facebook.com/chocolatebakery — it’s themed around current events (March Madness), and simple to enter yet compelling to want to win (wouldn’t YOU want a delicious cake delivered to your door?) :)
Great article, thank you for sharing some really useful tips!
You are very welcome!
Pingback: Facebook Fan Page A-Z Link Directory
Pingback: Facebook Fan Page Tab Width Change Announced « Wildfire Social Media Marketing Blog
Pingback: 2 Upcoming Facebook changes you should know about
Hi there,
I am only using the 560 pixel format on a sweepstakes running on facebook.com/eastlandshoe But the new skinny format is cutting of the text part of the content on the right. It is not formatting it like you show in your second example above.
What can be done?
Thanks
Mary
We have the same problem as Mary. We run weekly competitions on facebook and have the very same formating issue as Mary. Could there be done anything to the formating?
Example: http://www.facebook.com/myvouchercodes?v=app_28134323652
I must say that I am even more upset about getting rid of left-side boxes, companies are spending big budgets on getting fans to facebook pages and if they will not perform as planned (even down to these sort of changes – this takes away our email signup box, best voucher codes box, search voucher codes box), it will be us facebook marketing executives in companies that advertise on facebook that will be blamed and subsequently our budgets cut -> facebook’s revenue streams cut.
I know that facebook tries to be all about users. But brands create content, engagement AND generate revenue from advertising for facebook. Why would facebook want to cut this part of facebook is beyond me.
Pingback: 2 Impending Facebook Changes You Should Know About | bogilo
Nice. Thanks for the update. I didn’t know that the tabs were different for me (admin) than everybody else.
Hi, could you possibly write an updated blog entry about how this is going to affect the tab/view now that you have more information about it? How is it going to affect White Label campaigns? Are you going to change the default campaign to a 520 width? How am I going to need to change my CSS for it? Do I have to redesign my entire campaign to fit within the 520?
All the article talks about is the banners, nothing about the entire campaign. Maybe I’m just being dumb, but you don’t answer every question for every instance of your promotion builder. I’ve even asked about White Label before and I got a bad response.
I still think you should build a splash page for the Tab part of it.
-Jen
Hey Jen,
Thanks for your message! For all full service white labels, we will be adjusting the displays to fit the new width. For self service white labels, as well as premium accounts with custom CSS applied, the owners of the designs will need to adjust their campaigns to fit the 520 width change. In this instance, it is easier to design the CSS for the entire campaign (regardless of whether its canvas or tab view) to be 520 pixels, so nothing gets cut off and in both views the width of the campaign is consistent. You will have to redesign your CSS with the 520 width in mind now, Jen, yes.
We appreciate the suggestion for the splash page– it may be something we consider in the future, depending on that happens as a result of this widespread design change by Facebook.
That looks odd. I don’t know but why they are shrinking the page to 500 pixels of width & where the remaining space of the page will be used.
I detect changes in the pages of which I’m admin, but in real there is not any kind of change.
So, on 23rd of August, we will examine the new facebook page.
I imagine it is to cater to smaller devices such as mobile phones and tablet computers. Other than this I do not see any reason why they would do this.
Pingback: Facebook Fan Page Changes — RC Productions – Blog & News
Why has this not yet been fixed? I thought your solutions would roll out automatically today?
We are currently running three contests for a client and use a tab to display these. As you can see, the new layout is completely broken for their contest:
http://www.facebook.com/pages/UDW-Homecare-Providers-Union/129789640378462?v=app_95936962634&ref=sgm
What can be done to resolve this immediately?
Hi Zach,
The changes haven’t gone live yet. What you’re seeing is still the preview. Once Facebook does flip the switch for ALL users, our system will be updated immediately. Nothing will be cut off.
That’s why Facebook was kind of vague and said the change is coming “week of August 23rd”– they don’t have to commit on a date and time. :)
You can see that when I view your page, as a user who is not an admin, I see everything normally. http://screencast.com/t/YmY4MzIxZ
With best regards,
Maya
We have a sweeps running right now with custom CSS. The tab view is cut off due to the new widths on Facebook. Is the only solution to adjust the CSS so that it fits the 520 pixel width? I’m not the one who created the CSS, but I need to faciliate the changes ASAP.
Hey Holly,
Yes, that is the solution if you don’t want the design to appear cut off in tab view. In canvas view it should still look fine, but canvas view is only triggered when users click INTO the tab, by seeing tab view first.
Hope that helps!
Great article, I am thinking of making a page for my caravan so this will really help.
I just hope I can follow it!