Woobox not working? Here’s the fix!

8 Flares 8 Flares ×

jaaadesign

(All of a sudden Woobox not working correctly? straight to the fix here!)

NOTE: This is a fix for static Woobox pages, a work around for blog pages without SSL certificate you can find here

I finally got around to set up my social media and after a very disappointing experience with WP4FB I’ve found Woobox AND IT’S FRIKKIN’ AWESOME! If you are looking for a quick, easy and stylish way to add Facebook tabs look no further. Just sign up and you’re good to go.

So I made my tabs for 2 accounts (in a few hours!) only to find them all messed up the next day?!

To my surprise there was not a lot of info about it but this article send me in the right direction. Turns out that it is a security issue of mixing HTTP/HTTPS content that some of the major browsers don’t allow no more. In short: Facebook uses HTTPS and your website most likely, since you’re reading this, does not. Woobox’ tabs is based on Iframe, which basicly imports a second website/HTML into it’s own; a website within a website. Here lies the problem: the CSS you use is imported from HTTP instead of HTTPS and is therefore not implemented.

To quote Eames from that fantastic movie: “If we are gonna perform Inception then we need imagination”.

General Woobox set up

(Dude my Woobox not working –> take me to the fix man!)

We got everything set up now, only thing is that external external stylesheets (using URL or HTML as ‘Pagesource’) won’t be used.

Notes

- Make sure you  get your App out of Sandbox Mode!
- Tab image will fit no matter but 111×74 are the exact dimensions.
- To ‘Create New App’ (#6) just means to give it a name (like ‘Contact me’ for example, this will be shown underneath your tab), Woobox will do the rest.
- To change the tab icon (small image underneath tab) just click on the atom looking default image on top of your APP screen, scroll down the next page and change the 16×16 icon into whatever.

The Fix

The solution provided by Woobox is to buy a SSL certificate and thus making your imported content HTTPS but I don’t want to spend money and time on that! Especially since Woobox (and Facebook) themself are already using HTTPS and therefore all content you put in your tabs/apps directly is as well! It seems that all we have to do is to bring the imported CSS into one sheet and paste it in the tab manually using the ‘HTML’ source. Really that simple? Yes.

I wanted to create a contact page from the one on this website, so that’s what we’ll do:

Some notes

- Ofcourse if you add ALL the CSS links to your inline stylesheet, chances are you add CSS from plugins which are not actually used on that specific page. I chose to put all of them in for reason that I might make another tab from another page, and in that case I could just use the same CSS file. If you don’t it could save some loading time.
- Depending on the pagesource of your website (and the amount of plugins you use!) the inline CSS can be quite a lot. To streamline this bad boy visit www.csscompressor.com or a similar site.
- Your HTML can be optimized too, just delete all the code referring to functionalities (plugins) you don’t use. WHAAAAAAAAARRRGGGGGGHHHH!!! MAKE SURE YOU HAVE A COPY!!!
- Internal links are not working now either so save the links you can by adding target=”_blank” to open them in new windows.

I hope you have enjoyed this article and that it was of use to you, if you have any questions, additions or remarks please do not hesitate to leave me a comment below.

(I usually don’t ask this, but…)

…it’s just sad to see a FB page with no likes and you would make me a happy man if you’d head over and save me from the ridicule of the Web!

8 Flares Facebook 7 Twitter 0 Email -- Google+ 1 LinkedIn 0 8 Flares ×
Over

A Wordpress wielding cool rocking daddy in the lowlands. WPMU DEV member, carpenter, Yoga and meditation.

Getagd met , ,
Geplaatst in How to...

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Verplichte velden zijn gemarkeerd met *

*

De volgende HTML tags en attributen zijn toegestaan: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>