shortstack facebook appHere at Go Time Marketing we really like ShortStack for creating fast, easy and beautiful Facebook pages for our clients.

With Shortstack, you can do simple Facebook apps with ready-made templates or your can get your hands dirty with advanced capabilities in CSS, Javascript, HTML, jQuery, and iframes.

Check out this overview of ShortStack when you’ve got a minute.

Now, here’s what you came here for. By the way, it’s pretty long, so if you want to download and print out the PDF version here, go for it.

How to Create a Facebook App Using Shortstack: A Step by Step Guide

Step 1: Register and Login

describe the image

Step 2:

After Logging in you will see the Tabs Dashboard. Click “Create Tab from Template” in the upper left hand corner and click on it.

shortstack facebook app

Step 3:

Make sure public templates is selected. This should happen automatically but if your screen does not populate the templates you can find this button in the upper right hand corner.

Select the “Photo Vote Contest” template from the list.

A visual of the template will show up on the right, be sure yours matches the one shown here.

Select the “Make Tab” button to open this template in the designer dashboard.

shortstack facebook app

Step 4:

Add Widget Menu: Here you can select other widgets to include. You can explore what each of them are if you want but all of the widgets needed for this tab are included in the template.

Live Preview Preferences: From left to right. Views allows you to view the tab as an admin, fan, or non-fan. Simulated Date and Country can be used if you want to double check that date and country restrictions are working properly.

Pre-Designed themes can be selected or you can upload your own theme to use. The new timeline width is set as a default. Leave the “live” field un-checked so you can test the submit function without actually submitting a photo. You can also view what this tab will look like on a mobile platform.

Edit Widgets Menu: As you mouse over the different parts of the template, the widget your mouse is on will highlight in light blue. These are what you will use to modify the different widgets to specify your different needs.

shortstack facebook app

Notes on Step 4

A. These buttons from left to right are modify, duplicate, and delete. You will want to select the modify icon and use each widgets manager to replace sample content with your own specific content. Every photo place holder will tell you the width needed (in this case it is 810 pixels). The length of the photo is not specified because you can make it as long as you want (keep in mind though that the size shown in the template is visually appealing, a longer photo might not be so).

B. Here you can manage the visibility of each individual widget, which is helpful in creating Like gates. The icons, from left to right, are: everyone, fans only, non-fans only, page admins only, inactive, and starts hidden. The first four are pretty self-explanatory.

An inactive visibility setting is helpful in the case of starting a voting period after the submission period. If you select the “starts hidden” setting, that widget and every widget below it in the menu will be hidden.

Step 5:

Once you have the Custom Tab designed the way you want find the button that says “Install Tab” in the upper right corner and click on it.

shortstack facebook app

Step 6:

There are two ways to publish your new tab to your Facebook page. I always choose to custom publish so that I can modify the settings shown in step 9.

facebook shortstack app

Step 7:

After selecting Custom Publish a page will open explaining step by step how to publish your tab.

Click the button to “Open Developer Facebook App”. A new window will open up (note: if you have not registered for a developer account you may do so through this window with your current Facebook login information). Select Create New App, and name it (as shown highlighted in yellow). After clicking continue you will need to fill out a captcha just to be sure you are not a robot.

After your app is created you can copy and paste the App ID and the App Secret ID into the relative fields. (Note: after you have done this close the Facebook developer window WITHOUT hitting the save button. ShortStack can manage the install process with the information given.)

Be sure to customize the app name, up to 16 characters, which will appear directly below your custom app image. Once these fields are added click on the orange “save and continue” button.

shortstack facebook app

Step 8:

Here is where you pick the Facebook page to install your custom app to. Find the gray install button next to the Facebook page you wish to use.

(Note: Custom apps can only be installed to fan pages or business pages, not to personal Facebook pages.)

shortstack facebook app

Step 9:

Log in to Facebook and go to your business page. You will notice the custom application is showing up on your page.

Find the arrow all the way to the right of your applications. Click it to enable editing capabilities.

Mouse over the top right corner of your custom application and clic on the edit icon that appears. Go to “edit settings” in the menu to change your custom apps image and title. (Note: If you customized your title during the installation process on ShortStack you wont need to change it here.)

A pop up window will open. Click on “change” next to the Custom Tab Image field. A new tab in your browser will open allowing you to upload an image from your computer.

(Note: this image will be scaled to fit 111px x 74px so you may want to make one that is at this size.)

shortstack facebook app

That’s it! Now that you’ve got a great app, don’t forget to promote it! Promotion is the other half of good content marketing!

If you have any questions or comments. Let us know. We’re all learning here.