View
479
Download
0
Category
Tags:
Preview:
DESCRIPTION
ShortStack is a custom iframe tab designing tool that allows you to create custom Facebook tabs. With ShortStack, you won’t have to re-invent the wheel. http://www.shortstack.com I chose to study and learn this app because I know that when I learn this, I can personally use it. What I like about this app is that you can use it for the Facebook page. If you have a Facebook page, learning this is surely beneficial for you. With its user friendly platform, you can create different contest or promotions that can generate likes to your page. To get more of Shortstack, check the tutorial below.
Citation preview
www.thevirtualsage.com
www.thevirtualsage.com
www.thevirtualsage.com
www.thevirtualsage.com
www.thevirtualsage.com
www.thevirtualsage.com
www.thevirtualsage.com
www.thevirtualsage.com
www.thevirtualsage.com
Click Sign up button
www.thevirtualsage.com
This will appear
www.thevirtualsage.com
You can create an account filling up this form
www.thevirtualsage.com
www.thevirtualsage.com
Let’s login using Facebook
www.thevirtualsage.com
Click Login with Facebook button
www.thevirtualsage.com
This will appear
www.thevirtualsage.com
Click Okay button
www.thevirtualsage.com
This will appear next
www.thevirtualsage.com
Click Okay button
www.thevirtualsage.com
This will appear
www.thevirtualsage.com
Click I agree to the terms of service
www.thevirtualsage.com
Click Create Account button
www.thevirtualsage.com
Voila! We’ve just created our Shortstack account!
www.thevirtualsage.com
Let’s first explore Shortstack’s Main Menu
www.thevirtualsage.com
Shortstack’s Main Menus
www.thevirtualsage.com
Designer is where you design and publish an app
www.thevirtualsage.com
Tabs is where you create and manage all your apps
www.thevirtualsage.com
Media is where you view, manage and upload images to be used in your tab
www.thevirtualsage.com
Templates are pre-built app designs you can use to create your own apps
www.thevirtualsage.com
Forms & Promos is where you can create new Promotion Forms and Custom Forms
www.thevirtualsage.com
Let’s explore each Menu deeper
www.thevirtualsage.com
the Tab Designer interface
www.thevirtualsage.com
Widget Editor is where you add, edit and delete widgets
www.thevirtualsage.com
CSS Editor is where you tweak the appearance of your tab
www.thevirtualsage.com
Install tab is where you install your tab to a Facebook Page for the first time, or to
manage existing installs.
www.thevirtualsage.com
Tab ID: a unique number that identifies the tab
www.thevirtualsage.com
the Tab name
www.thevirtualsage.com
Settings: drop-down menu which allows you to edit the settings for the tab
www.thevirtualsage.com
Add Widgets: where you choose widgets to be added to your tab
www.thevirtualsage.com
Edit Widgets: added widgets are here and where changes can be done too
www.thevirtualsage.com
Live Preview shows how your tab will look like when installed to a Facebook Page
www.thevirtualsage.com
Simulated date: best to use if you have widgets with Starts At or Ends At visibility settings
www.thevirtualsage.com
Simulated Country: let’s you simulate what users from different countries will see
www.thevirtualsage.com
The Tabs interface
www.thevirtualsage.com
Name: Shows the name of the tab
www.thevirtualsage.com
Installed To: Shows the name of the Facebook Page(s) the tab is installed to
www.thevirtualsage.com
Publish Method: If installed, this shows which method was used to install the tab
www.thevirtualsage.com
Owner: Shows the name of the
person who owns the tab
www.thevirtualsage.com
Since Last Change: Shows the amount of time that has passed since any changes were made to the tab
www.thevirtualsage.com
Actions: Design, Analytics, Tab settings, Permissions & Delete
www.thevirtualsage.com
The Media interface
The Media Manager shows all the media (for example, images) you have
uploaded to your account
www.thevirtualsage.com
Thumbnail: A small preview of the item you uploaded
www.thevirtualsage.com
Filename / URL: Shows just the name of the file you uploaded
www.thevirtualsage.com
Bytes: The size of the uploaded file
•
www.thevirtualsage.com
Width: The width in pixels (images only)
www.thevirtualsage.com
Height: The height in pixels (images only)
www.thevirtualsage.com
Uploaded: Shows what day the item was uploaded
www.thevirtualsage.com
Actions: Copy & Edit and Delete
www.thevirtualsage.com
The Templates interface
Templates provide a number of pre-configured designs that make it easy to get started with a new tab
www.thevirtualsage.com
The Forms & Promos interface
www.thevirtualsage.com
Name: Shows the name of the database
www.thevirtualsage.com
Type: The database type, either form or promotion
www.thevirtualsage.com
Tabs: Shows the name of any tabs that are connected to the database
www.thevirtualsage.com
Created: Shows when the database was created
www.thevirtualsage.com
Entries: Shows the number of live entries in the database
www.thevirtualsage.com
Actions: Database settings, View entries, Copy database, Permissions & Delete
www.thevirtualsage.com
www.thevirtualsage.com
Two ways in creating tab:
www.thevirtualsage.com
start with a template or
start from scratch
www.thevirtualsage.com
Let’s start with a
www.thevirtualsage.com
To start, click Create Tab from Template
www.thevirtualsage.com
Public templates will appear
www.thevirtualsage.com
Closer look at the templates
www.thevirtualsage.com
www.thevirtualsage.com
Let’s try sweepstakes promotion
www.thevirtualsage.com
sweepstakes is a simple promotion that gathers entries via an entry form
www.thevirtualsage.com
Click Sweepstakes template
www.thevirtualsage.com
You will see preview of your chosen tab on the right side
www.thevirtualsage.com
Click Make Tab button
www.thevirtualsage.com
You will be directed to the Designer page
www.thevirtualsage.com
Before we design our tab, let’s first create the database
www.thevirtualsage.com
To create a database, click Forms & Promos menu
www.thevirtualsage.com
This will appear
www.thevirtualsage.com
Click New Promotion button
www.thevirtualsage.com
This will appear
www.thevirtualsage.com
Note that you have an option to upgrade your account
www.thevirtualsage.com
If not ready to upgrade, let’s proceed here
www.thevirtualsage.com
Enter name of your Promotion
www.thevirtualsage.com
Enter email address; form submissions will be emailed here
www.thevirtualsage.com
Enter Company or Brand that is sponsoring the promotion
www.thevirtualsage.com
Describe how the collected data will be used
www.thevirtualsage.com
click I agree to follow the Facebook Promotion Guidelines
www.thevirtualsage.com
Then click Create and Continue to Form Designer
www.thevirtualsage.com
Form Designer page will then appear
www.thevirtualsage.com
The Add Fields of Form Designer
www.thevirtualsage.com
Facebook ID and Email Address fields
are added to your form by default
www.thevirtualsage.com
To add additional fields, click on a field’s green plus sign
www.thevirtualsage.com
Viewing Form with added fields
www.thevirtualsage.com
When done adding field, click Save Form
www.thevirtualsage.com
Form is now saved
www.thevirtualsage.com
Now click Form Settings
www.thevirtualsage.com
This will appear
www.thevirtualsage.com
Scroll down to see a bit more
www.thevirtualsage.com
When all set, click Save Form
www.thevirtualsage.com
www.thevirtualsage.com
Click Designer Menu
www.thevirtualsage.com
You will be directed back to Designer page
www.thevirtualsage.com
Click Promotion Widget so it can be added to your widgets
www.thevirtualsage.com
Edit Widget dialogue box will appear
www.thevirtualsage.com
Click drop-down menu
www.thevirtualsage.com
select the newly created form
www.thevirtualsage.com
Basic setup page will appear
www.thevirtualsage.com
Click drop-down menu under Form Submission Options
www.thevirtualsage.com
This will appear
www.thevirtualsage.com
Click Popup Friends Invite Dialogue
www.thevirtualsage.com
Check Show Share Prompt on Submit box
www.thevirtualsage.com
Enter Title of your Sweepstakes Promotion
www.thevirtualsage.com
Key in “actor” under Caption; it automatically insert the sharing user’s name into the caption
www.thevirtualsage.com
Enter description of your Sweepstakes Form
www.thevirtualsage.com
Type Enter Now under Action Link Label
www.thevirtualsage.com
This will serve as a custom link that takes
the user back to the Facebook Page tab
www.thevirtualsage.com
Then click Save when all is set
www.thevirtualsage.com
you’ll be directed back to designer page
www.thevirtualsage.com
Now let’s work on Image widget
www.thevirtualsage.com
Click pencil icon to configure Image widget
www.thevirtualsage.com
Edit widget page will appear
www.thevirtualsage.com
Click select image
www.thevirtualsage.com
Media Selector page will appear
www.thevirtualsage.com
Click choose file
www.thevirtualsage.com
Your Picture Library will appear
www.thevirtualsage.com
Choose image that you want to upload
www.thevirtualsage.com
Then click Open
www.thevirtualsage.com
Now back to Media Selector with your selected image
www.thevirtualsage.com
Click Use Selected Image
www.thevirtualsage.com
Edit Widget will appear with your selected image
www.thevirtualsage.com
Now click Save button
www.thevirtualsage.com
You will be directed back to Designer Page with the uploaded image
www.thevirtualsage.com
Now let’s edit Rich Text widget
www.thevirtualsage.com
Click pencil icon
www.thevirtualsage.com
Edit Widget page will appear
www.thevirtualsage.com
Edit your text here
www.thevirtualsage.com
You can edit your text with text tools here
www.thevirtualsage.com
When you are done editing, click Save
www.thevirtualsage.com
You’d be back to designer page again
www.thevirtualsage.com
Let’s edit another text widget
www.thevirtualsage.com
Edit widget will appear
www.thevirtualsage.com
Enter your text here
www.thevirtualsage.com
I want to add an image in this widget; click Background image
www.thevirtualsage.com
Click Save when you are done editing
www.thevirtualsage.com
This will appear
www.thevirtualsage.com
click Select Image
www.thevirtualsage.com
Media Selector Page will appear
www.thevirtualsage.com
I need new image so I’ll click Choose File
www.thevirtualsage.com
Picture Library will appear
www.thevirtualsage.com
Choose image that you want to upload
www.thevirtualsage.com
Then click Open
www.thevirtualsage.com
Now back to Media Selector with the selected image
www.thevirtualsage.com
Click Use Selected Image
www.thevirtualsage.com
Image now uploaded
www.thevirtualsage.com
Click Save
www.thevirtualsage.com
Directed back to designer page with previously edited widgets
www.thevirtualsage.com
Now let’s edit the Friend Invite widget; click pencil icon
www.thevirtualsage.com
Edit Widget page will appear
www.thevirtualsage.com
Enter title of your invite here
www.thevirtualsage.com
Enter message of your invite
www.thevirtualsage.com
If you left it blank, default message will be used:
“Thought you might be interested in this page”
www.thevirtualsage.com
When all set, click Save
www.thevirtualsage.com
Back to designer page again; click for preview of invite
www.thevirtualsage.com
Invite preview; tick box/boxes of who you want to invite
www.thevirtualsage.com
Then click send requests
www.thevirtualsage.com
Voila! Invite sent!
www.thevirtualsage.com
Now let’s edit the theme; click the triangle in the theme selector
www.thevirtualsage.com
Tiles of theme will appear
www.thevirtualsage.com
Click on a tile to
preview that theme
www.thevirtualsage.com
When done choosing
your theme, click Save
www.thevirtualsage.com
If you’re already contented with your design, click Install Tab
www.thevirtualsage.com
This will appear; choose how you will publish your tab
www.thevirtualsage.com
Let’s choose Quick Publish in this tutorial
www.thevirtualsage.com
Quick Publish page will appear
www.thevirtualsage.com
Choose which page you will publish your tab
www.thevirtualsage.com
Click Install
www.thevirtualsage.com
Your tab is now published
www.thevirtualsage.com
Click the URL to view your page
www.thevirtualsage.com
Promotion Tab successfully installed
www.thevirtualsage.com
www.thevirtualsage.com
www.thevirtualsage.com
www.thevirtualsage.com
www.thevirtualsage.com
Recommended