When Good HTML Fangates Go Bad

Was your HTML Fangate working perfectly fine yesterday and suddenly wonky today? We’ve been getting a handful of inquiries about HTML Fangates as of late… Tabs that work perfectly well one day are suddenly riddled with problems – from display inconsistencies between browsers to content simply disappearing altogether. The vast majority of those types of problems can be attributed to one thing: your security protocol!

What’s a security protocol, you ask? Look up at your browser and take a gander at the URL displayed. It will either start with an HTTP or an HTTPS. If the content you are pasting in your Facebook HTML Fangate or page tab is HTTP, then you have security protocol issues and you will, in fact, run into inconsistencies in browsers (particularly with Firefox, IE, and Chrome).

So why is that pesky little “S” so important to your security?

HTTP stands for “Hyper-Text Transfer Protocol”. It is a protocol, or process, of obtaining the data that makes up a particular website or page. HTTPS stands for “Hyper-Text Transfer Protocol Secure”. That “S” means that there is an SSL (Secure Sockets Layer), an added layer of protection, so to speak, that encrypts your content and makes it secure. Without it, a hacker can replace the HTTP content of any page you visit, steal your credentials, take over your account, acquire sensitive data about you, or attempt to install malware on your computer. It’s kinda a big deal.

Why does this affect my HTML Tab?

Facebook displays HTTPS content by default, so if your content doesn’t have the “S” in there, well, then the new version of Firefox (and Internet Explorer and Chrome) is going to mess with the display of that content or pretend like that content doesn’t even exist! Here’s why: Facebook, being secure by default, prefaces their URL content with HTTPS, and Firefox and Chrome, yep, they too only want to pull data that is HTTPS. They view all HTTP content as unsafe, and therefore block it for your own good. If you have HTTP content, and try to place it in a HTTPS site, that’s what’s called “mixed content”, and the search engines won’t read it properly anymore.

Tab-secure-v

The Solution?

Make sure your content is HTTPS.

If your HTML Fangate content consists only of an image, the solution is simple! Just use the “Image” option for your tab’s content and upload your image to be securely hosted by our servers.

If you want to include multiple images within the tab content, you’ll need to use the HTML option, and the images must be hosted externally.  In this scenario, you can use a site like http://imgur.com/ as a free hosting solution just by changing the links to HTTPS. Simply go to the website, click on “upload” (from your computer or the web), select the file you want to upload and click the “upload” button again. You will see a list of share options. Copy the “Direct Link” URL, then when you paste it into your Woobox dashboard, change the “http” to “https” and problem solved!

imgur

However, if your Fangate content uses the “URL” option to display an external website in the IFRAME, you may need to get an SSL certificate if you don’t already have one and change the URL to HTTPS. These can often be found for under $20/year, and you could use one SSL certificate to cover many Fangate tabs (see a comparison of SSL certificates). You’ll then need to check with your internet hosting provider on how to install the certificate on your site to then be able to make it secure and place it in your Fangate tab.

If you are including any external files (stylesheets, scripts, etc.) in the HTML content, those will also need to be added to the content using HTTPS source URLs.  There are many free platforms that will provide secure hosting for any type of files, including Dropbox, Google Drive, and Box.  Our server of choice here at Woobox is Amazon S3, which is a very effective and low-cost solution for large and small files alike.