Shortstack - Design Facebook Apps & Promotions

www.thevirtualsage.com

Click Sign up button


This will appear


You can create an account filling up this form


Let’s login using Facebook


Click Login with Facebook button


This will appear


Click Okay button


This will appear next


Click Okay button


This will appear


Click I agree to the terms of service


Click Create Account button


Voila! We’ve just created our Shortstack account!


Let’s first explore Shortstack’s Main Menu


Shortstack’s Main Menus


Designer is where you design and publish an app


Tabs is where you create and manage all your apps


Media is where you view, manage and upload images to be used in your tab


Templates are pre-built app designs you can use to create your own apps


Forms & Promos is where you can create new Promotion Forms and Custom Forms


Let’s explore each Menu deeper


the Tab Designer interface


Widget Editor is where you add, edit and delete widgets


CSS Editor is where you tweak the appearance of your tab


Install tab is where you install your tab to a Facebook Page for the first time, or to

manage existing installs.


Tab ID: a unique number that identifies the tab


the Tab name


Settings: drop-down menu which allows you to edit the settings for the tab


Add Widgets: where you choose widgets to be added to your tab


Edit Widgets: added widgets are here and where changes can be done too


Live Preview shows how your tab will look like when installed to a Facebook Page


Simulated date: best to use if you have widgets with Starts At or Ends At visibility settings


Simulated Country: let’s you simulate what users from different countries will see


The Tabs interface


Name: Shows the name of the tab


Installed To: Shows the name of the Facebook Page(s) the tab is installed to


Publish Method: If installed, this shows which method was used to install the tab


Owner: Shows the name of the

person who owns the tab


Since Last Change: Shows the amount of time that has passed since any changes were made to the tab


Actions: Design, Analytics, Tab settings, Permissions & Delete


The Media interface

The Media Manager shows all the media (for example, images) you have

uploaded to your account


Thumbnail: A small preview of the item you uploaded


Filename / URL: Shows just the name of the file you uploaded


Bytes: The size of the uploaded file

•


Width: The width in pixels (images only)


Height: The height in pixels (images only)


Uploaded: Shows what day the item was uploaded


Actions: Copy & Edit and Delete


The Templates interface

Templates provide a number of pre-configured designs that make it easy to get started with a new tab


The Forms & Promos interface


Name: Shows the name of the database


Type: The database type, either form or promotion


Tabs: Shows the name of any tabs that are connected to the database


Created: Shows when the database was created


Entries: Shows the number of live entries in the database


Actions: Database settings, View entries, Copy database, Permissions & Delete


Two ways in creating tab:


start with a template or

start from scratch


Let’s start with a


To start, click Create Tab from Template


Public templates will appear


Closer look at the templates


Let’s try sweepstakes promotion


sweepstakes is a simple promotion that gathers entries via an entry form


Click Sweepstakes template


You will see preview of your chosen tab on the right side


Click Make Tab button


You will be directed to the Designer page


Before we design our tab, let’s first create the database


To create a database, click Forms & Promos menu


This will appear


Click New Promotion button


This will appear


Note that you have an option to upgrade your account


If not ready to upgrade, let’s proceed here


Enter name of your Promotion


Enter email address; form submissions will be emailed here


Enter Company or Brand that is sponsoring the promotion


Describe how the collected data will be used


click I agree to follow the Facebook Promotion Guidelines


http://www.facebook.com/page_guidelines.php



Then click Create and Continue to Form Designer


Form Designer page will then appear


The Add Fields of Form Designer


Facebook ID and Email Address fields

are added to your form by default


To add additional fields, click on a field’s green plus sign


Viewing Form with added fields


When done adding field, click Save Form


Form is now saved


Now click Form Settings


This will appear


Scroll down to see a bit more


When all set, click Save Form


Click Designer Menu


You will be directed back to Designer page


Click Promotion Widget so it can be added to your widgets


Edit Widget dialogue box will appear


Click drop-down menu


select the newly created form


Basic setup page will appear


Click drop-down menu under Form Submission Options


This will appear


Click Popup Friends Invite Dialogue


Check Show Share Prompt on Submit box


Enter Title of your Sweepstakes Promotion


Key in “actor” under Caption; it automatically insert the sharing user’s name into the caption


Enter description of your Sweepstakes Form


Type Enter Now under Action Link Label


This will serve as a custom link that takes

the user back to the Facebook Page tab


Then click Save when all is set


you’ll be directed back to designer page


Now let’s work on Image widget


Click pencil icon to configure Image widget


Edit widget page will appear


Click select image


Media Selector page will appear


Click choose file


Your Picture Library will appear


Choose image that you want to upload


Then click Open


Now back to Media Selector with your selected image


Click Use Selected Image


Edit Widget will appear with your selected image


Now click Save button


You will be directed back to Designer Page with the uploaded image


Now let’s edit Rich Text widget


Click pencil icon


Edit Widget page will appear


Edit your text here


You can edit your text with text tools here


When you are done editing, click Save


You’d be back to designer page again


Let’s edit another text widget


Edit widget will appear


Enter your text here


I want to add an image in this widget; click Background image


Click Save when you are done editing


This will appear


click Select Image


Media Selector Page will appear


I need new image so I’ll click Choose File


Picture Library will appear


Choose image that you want to upload


Then click Open


Now back to Media Selector with the selected image


Click Use Selected Image


Image now uploaded


Click Save


Directed back to designer page with previously edited widgets


Now let’s edit the Friend Invite widget; click pencil icon


Edit Widget page will appear


Enter title of your invite here


Enter message of your invite


If you left it blank, default message will be used:

“Thought you might be interested in this page”


When all set, click Save


Back to designer page again; click for preview of invite


Invite preview; tick box/boxes of who you want to invite


Then click send requests


Voila! Invite sent!


Now let’s edit the theme; click the triangle in the theme selector


Tiles of theme will appear


Click on a tile to

preview that theme


When done choosing

your theme, click Save


If you’re already contented with your design, click Install Tab


This will appear; choose how you will publish your tab


Let’s choose Quick Publish in this tutorial


Quick Publish page will appear


Choose which page you will publish your tab


Click Install


Your tab is now published


Click the URL to view your page


Promotion Tab successfully installed


Shortstack - Design Facebook Apps & Promotions

Self Improvement

Transcript of Shortstack - Design Facebook Apps & Promotions