If you’re looking to spice up your company’s Facebook page, adding tabs might be a great option. You can create a tab to host your evergreen content, such as eBooks, or make one that highlights your company culture. Either way, custom tabs can be a significant addition to your Facebook page that won’t be burried on your timeline when you post new statuses.
Out of the box, your company Facebook page will have only your photos and your likes in your tabs – that’s not very helpful or interesting to anyone coming to your page. The first step is simple: Decide what content you’d like to be most visible to someone coming to your page. The next few steps, however, aren’t generally that straight forward. Unfortunately Facebook makes creating custom tags more confusing than is necesary, but there is a simple tool that can help ease that pain a bit.
Thunderpenny makes putting your app into a tab super easy and much less confusing than using Facebook’s Developer site. Plus, by utilizing this tool, your tabs will automatically work on any browser without having to fight with your code.
Thunderpenny has several apps, including a contact form, one that allows you to turn a page from your website into a tab, and one for embedding YouTube videos. It’s definitely worth checking to see if any of their apps have pre-made versions of what you want on your page to save yourself some time. Some of these do require a pro account, but a majority are available with the free tool.
There are two methods we’ll be looking at using Thunderpenny; one requires basic HTML knowledge while the other does not. It’s up to you to choose which method best suits your needs and skill level.
1. Static HTML (Free app)
To make a custom iFrame you’ll first have to build out the HTML in one of several programs. Personally, I prefer Dreamweaver, but some other options include Komodo Edit or Aptana Studio for Windows or BBEdit and TextWrangler for Mac. Please keep in mind to use only HTML to keep your code compatible with Thunderpenny.
Once you have your webpage built, upload any images you may have to a server, such as your company’s website or a Photobucket account. Make sure that you include those image URLs in your code or else your images won’t appear.
Go to the Thunderpenny homepage. Click the “Try It” button to link Thunderpenny to your Facebook account and to the company page that you are going to be adding a tab to.
A gray tab with a white star should appear on the Facebook page. Now it’s time to make your new tab. Click on the tab and click the green “Edit Tab” button at the top of the page. This brings you back to Thunderpenny and a dialogue box will open:
Now all you need to do is place in your HTML by simply copying and pasting it from whatever HTML editor you used. Double check that any links in your HTML are correct, no one likes a broken link. An error may appear if your links start with http:// instead of https://. This is fine and can be ignored, but https:// is recommended.
Once your HTML is in place, head over to the Settings tab. Here you can set up Google Analytics, name your tab and set up a icon for your tab:
Once you’ve finished up all that’s left to do is hit Save & Publish. Super easy, right? Now go to your new tab, make sure it looks right, and pat yourself on the back for being awesome.
2. Drag & Drop (Pro app)
So you don’t know a lick of code? Have no fear! Thunderpenny has a really great Drag & Drop feature.
(Note: This is a pro app, so you will only be able to use the trial version until you pay for Thunderpenny.)
Start the same way that we did above: by clicking the “Try It” button and link Thunderpenny to your Facebook account and to the company page that you are going to be adding a tab to.
A gray tab with a white star should appear on the Facebook page. Now it’s time to make your new tab. Click on the tab and click the green “Edit Tab” button at the top of the page. This brings you back to Thunderpenny and a dialogue box will open.
Go to “See more apps” and click on Drag & Drop:
Drag & Drop is very easy and anyone can use it. It works like a simple image editing program and builds the code for you. Simply use the buttons at the top of the text box to add photos, videos, text and more:
Once you have designed your page, head over to the Settings tab. Here you can set up Google Analytics, name your tab and set up a icon for your tab. After you’ve finished up, all that’s left to do is hit Save & Publish. Your tab will update on your Facebook page and you can go admire it.
3. Final Edits
Custom icons in Thunderpenny may not be what you are looking for as you can’t use a photo or upload different fonts. If you want to change the icon for your tab, hover over the tab and click on the pencil icon in the top right corner.
A drop down menu will appear. Click on “Edit Settings”
The window below will pop up, which will allow you to add any kind of image you want to be the icon for your tab as well as change the tab name if you decide not to do that in Thunderpenny itself.
I hope this has helped you to create that tab you always wanted on your company’s Facebook page with little to no hassle and made you look like a superstar.