Shortstack - Design Facebook Apps & Promotions

Click Sign up button
www.thevirtualsage.com

This will appear

You can create an account
filling up this form

Let’s login using
Facebook

Click Login with
Facebook button

Click Okay button

This will appear next

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

Click New Promotion button

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

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

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

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

click Select Image

Media Selector Page will appear

I need new image
so I’ll click Choose File

Picture Library will appear

Now back to Media Selector
with the 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

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

Recomendados

Recomendados

Más contenido relacionado

Destacado

Destacado (8)

Último

Último (7)

Shortstack - Design Facebook Apps & Promotions