getting started using custom facebook page apps today

17
Getting Started with ShortStack with Sho wit SHORTSTACK Presented by

Post on 18-Oct-2014

1.397 views

Category:

Social Media


0 download

DESCRIPTION

Do you want to collect data and generate leads from your Facebook Fans? Then you should be running a custom Facebook app. Sign up for ShortStack for free, then check out this getting started guide! http://www.shortstack.com

TRANSCRIPT

Page 1: Getting Started Using Custom Facebook Page Apps Today

Getting Startedwith ShortStackwith Showit

SHORTSTACK

Presented by

Page 2: Getting Started Using Custom Facebook Page Apps Today

Table of Contents

Let’s Get Started! ................................................................................1

Creating an App ...................................................................................4

Adding Widgets to Your App .......................................................6

Adding a Theme to Your App .......................................................7

Building and Customizing a Form ............................................8

Installing Your App ......................................................................... 11

Editing Your Installed App......................................................... 13

ShortStack’s Top Features ........................................................ 14

ShortStack Resources .................................................................. 15

TOC

Page 3: Getting Started Using Custom Facebook Page Apps Today

1

Let’s Get Started!

Welcome to ShortStack! We’re here to help you maximize your social media presence, using apps, of course. The features we

offer – including contests, polls, data collection and analytics – will help you get the most from your Facebook Page, website and

mobile. And we’re pretty sure they’ll knock your socks off! Ready to have some some fun?

Page 4: Getting Started Using Custom Facebook Page Apps Today

2

Let’s Get Started!

Once you log into the platform, your default screen is the App Manager. This is where you’ll see all of the apps you’ve built, the

page they’re installed to, the method used for publishing and the last time you edited the app.

At the top left, you’ll see our navigation bar. It consists of the following:

Designer - Where you will design, edit and publish your apps.

Apps - Where you can create new apps, see a summary of the apps you’ve created, see which apps are installed, etc.

Media - Where ShortStack will host all your media files (Images, PDFs, etc.). The media manager accepts PNG, JPG, GIF, MP3,

PDF, XML, SWF, JS, CSS files. All files need to be 5 megabytes or smaller.

Templates - Where you’ll find template designs you can use to create your own apps.

Forms & Promos - Where you can create forms that your visitors can fill out in order to enter contests or to submit information.

In this section you can create new forms, edit existing forms, view submitted entries and export data.*

*Export available on Pro Plans

Page 5: Getting Started Using Custom Facebook Page Apps Today

3

Let’s Get Started!

On the right side of the navigation bar you’ll see a small image of Jack, our Pancake Mascot.

We use Jack to inform users of new features, free resources, helpful downloads, platform

alerts and articles that appear on our blog, Socially Stacked.

Next to Jack, you’ll see your username. When you hover over this, a drop down

allows you to access different account settings such as “Change Plan” and “Logout”.

Next to your username you’ll see “Help.” When you hover over this, a drop down menu

provides links to documention and other resources that will help you when building

your apps with ShortStack. In the future you will return to the help menu often.

Page 6: Getting Started Using Custom Facebook Page Apps Today

4

Creating an App

There are two ways to create apps. You can start with a “blank app” and build your app from scratch or you can create an app

using one of our templates.

TO CREATE AN APP FROM SCRATCH:

1. Navigate to the “Apps” section from the menu bar located in the top left-hand corner of the page.

2. Click the “Create Blank App” button.

3. Name your app in the field that is labeled “Type new App name”

Give the app the name you want it to appear as in Facebook. (You can always change this later.)

4. Click on “Create Blank App.”

1

2

3 4

Page 7: Getting Started Using Custom Facebook Page Apps Today

5

Creating an App

TO CREATE AN APP FROM A TEMPLATE:

1. Navigate to the “Apps” section from the menu bar located in

the top left-hand corner of the page.

2. Click the “Create App from Template” button.

3. Search for templates by using the “Search” bar in the right

hand corner, by using “Browse tags” or by viewing all

templates.

4. Click the thumbnail of the template you want to use.

5. Click the “Make App” button (above and to the right of

the template you chose).

1

2

3

5

4

Page 8: Getting Started Using Custom Facebook Page Apps Today

6

Adding Widgets to Your App

Widgets are the building blocks for your app. Each widget has a different function (promotion, voting, polling,

etc.). Hover over any widget icon to see a description of its function. Familiarize yourself with the

widgets before you start building so you can make an app that functions the way you want it to.

To add a widget to your app, hover over the widget icon and click it. When you add a widget to your

app, the “Edit Widget” window will automatically appear. You can choose to edit the widget now or cancel and

configure the widget later.

To delete a widget from your app, click on the “X” located on the right of the widget in the Edit Widgets

column.

To edit a widget, just click the pencil icon in the right corner. Here you can access the full settings of a widget,

enable commenting and sharing, then configure the visibility features. The visibility features include date,

country and fan visibility.

To clone a widget, click the “two papers” icon.

You can organize your widgets by hovering over the widget icon in the Edit

Widgets column. Click and drag to change the order of your widgets. The

widgets will appear in the Live Preview column in the order they are placed

in the Edit Widgets column.

When you create an app from a Template, widgets are automatically carried over from the template into the

“Designer”. You can fully customize this template.

To learn more about each widget’s capabilities visit http://help.shortstackapp.com/ click on “Widget Reference”

on the left-hand side.

Page 9: Getting Started Using Custom Facebook Page Apps Today

7

Adding a Theme to Your App

Once you’ve started building your app, you can add a pre-designed theme to change the look

and feel of your app. We provide more than 100 themes to choose from.

ADDING A THEME TO YOUR APP:

1. Have your app open in the “Designer”.

2. Click on “Theme Selector.”

3. Hover over the color theme icons to see the name of the theme. You can click on a

theme icon to see a sample of what the color scheme and font look like.

4. If you don’t like what you chose, hit “Cancel” on the bottom of the theme menu and you

will be returned to the default theme. If you like what you chose, click “Save” on

the bottom of the theme menu and the theme will be applied to your app.

You can also use custom CSS to build your own themes within your app.

Every template comes with a pre-selected theme that you can opt to change at any time.

2

3

4

Tip: You can choose to select “No Theme” and you can choose to remove all titles and borders

from the app. Make sure you click “Save” once you’ve made your selections.

Page 10: Getting Started Using Custom Facebook Page Apps Today

8

Building and Customizing a Form

Forms can be used to collect data from your visitors. You can add fields to collect

names, email addresses, age, address, photos and more.

If you’re using Shortstack to collect information or run a promotion you will need to

create a form. Note: If you’re running a promotion, you must use the Promotion Widget. If you are

not giving away a prize, the Custom Form Widget is ideal.

There are two ways to access the “Form Designer”. By clicking “Create New Form” in

a promotion widget or clicking “New Promotion” in “Forms and Promos”

TO BUILD A PROMOTION FORM FROM THE DESIGNER:

1. Open your app in the “Designer” within ShortStack.

2. Add the “Promotion Widget” located under Promotion Tools.

3. The “Edit Widget” window will appear.

4. If you’ve already created a form in the “Forms & Promos” manager, use the drop

down menu to select your form. Otherwise click “Create New Form.”

5. Fill in the corresponding boxes.

6. Click “Create and Continue to Form Designer.”

Tip: Be specific with your form names so you can easily locate them later.

4

5

6

Page 11: Getting Started Using Custom Facebook Page Apps Today

9

Building and Customizing a Form

TO BUILD A FORM FROM THE FORMS & PROMOS MANAGER:

1. Navigate to the “Forms & Promos” manager.

2. Click “New Promotion”

3. Fill in the empty fields.

4. Click “Create and Continue to Form Designer.”

2

1

Page 12: Getting Started Using Custom Facebook Page Apps Today

10

Building and Customizing a Form

Now that you’re in the “Form Designer” you’ll be able to add form fields, edit fields and

set up your form settings.

To add a field to the form, click on the green “+” located on each form field. Each field

can be edited by selecting it. The settings appear on the left side.

“Form Settings” is where more settings can be configured, including our

Refer-a-Friend feature, email notices and more.

The “Manage Integrations” button is where you can manage integrations for

MailChimp, Highrise, Constant Contact and Custom Webhooks.

Tip: For more information on building, editing and using forms and promotions click here.

Page 13: Getting Started Using Custom Facebook Page Apps Today

11

Installing Your App

Now that you’ve built your app you’re ready to install it to your Facebook Page. There

are two options for publishing an app: Quick Publish and Custom Publish. To learn the

differences between Quick Publish and Custom Publish, read more here.

FOLLOW THESE SIMPLE STEPS TO QUICK PUBLISH YOUR APP:

1. From the “Designer”, click on “Install App” in the top left corner.

2. If you have not connected your personal Facebook profile or if you are not

logged into ShortStack with your personal Facebook profile, you’ll be prompted

to “Log in with Facebook”.

3. Select “Choose Quick Publish.”

4. You must be an admin of a Page to publish to that Page. ShortStack will

automatically list all of the Facebook Pages you are an admin of.

Click “Install” on the Page you would like to install the app to.

5. Copy your “Smart URL” and use it to promote your app any time you link to it.

Once the app is installed, it appears underneath your Facebook Cover Photo.

1

3

4

5

Tip: Be sure to use the “Smart URL”, this is the only way mobile users can

access your app. To learn more, click here.

Page 14: Getting Started Using Custom Facebook Page Apps Today

12

Installing Your App

FOLLOW THESE SIMPLE STEPS TO CUSTOM PUBLISH YOUR APP:Note: Custom Publish is only available on our Pro Plans.

1. From the “Designer”, click on “Install App” in the top left corner.

2. If you have not connected your personal Facebook profile or if you are not logged into ShortStack with your personal

Facebook profile, You’ll be prompted to Log in with Facebook.

3. Select “Choose Custom Publish.”

4. Follow the detailed instructions to Custom Publish.

5. Click “Save and Continue.”

6. Copy your “Smart URL” and use it to promote your app anytime you link to it.

Once the app is installed, it appears underneath your Facebook Cover Photo.

3

Page 15: Getting Started Using Custom Facebook Page Apps Today

13

Editing Your Installed App

Once you’ve built and installed your app you may want to make edits to it.

ShortStack allows you to make edits to your app at any time and apply those to

Facebook as needed.

FOLLOW THESE SIMPLE STEPS TO EDIT YOUR INSTALLED APPS:

1. Log in to ShortStack.

2. You’re directed to the “App Manager” upon signing in, so choose the app you

would like to edit by clicking on the app name.

3. Now that your app is open in the “Designer”, make your edits.

4. Click “Publish Changes” in the right-hand corner when you are finished.

4

2

Tip: When it says “Published and Up-to-Date” in the right-hand corner, this means that all

recent changes have been published.

Page 16: Getting Started Using Custom Facebook Page Apps Today

14

ShortStack’s Top Features

ShortStack has a huge variety of capabilities and features. If we tried to explain them all in this document it’d be more than we’d want

to write and more than you’d want to read! This list includes our top features with links that demonstrate how to execute them.

Create a Hotspot:

http://youtu.be/CHkZR140CmA

Create a Sweepstakes/Giveaway:

http://youtu.be/2JHinO6hXhQ

Mailchimp Newsletter Sign Up:

http://youtu.be/X0E_FqCnRaA

Create a Photo Contest:

http://youtu.be/KFXKiok7nXM

Vote Only Contest:

http://youtu.be/hODakCx2_pg

ShortStack for Mobile:

http://youtu.be/M8uQRs1fcls

Refer-a-Friend:

http://youtu.be/U-WXgFfr0rM

Promotions Guide:

http://help.shortstackapp.com/main-menu/mastering-shortstack/promotions-guide/

Fan-Gate an App

http://youtu.be/u_CnMTVY0LE

Offer a Coupon

http://youtu.be/1AsfWae1AXc

Page 17: Getting Started Using Custom Facebook Page Apps Today

15

ShortStack Resources

We do our best to offer as many free resources as possible to our users so you can fully understand and leverage the benefits of

ShortStack. Use the following links to learn more about what ShortStack can do for you.

Resources Page:

http://www.shortstack.com/resources/

Help Docs:

http://help.shortstackapp.com/

ShortStack Tour:

http://www.youtube.com/watch?v=IwvIDflqIYQ&feature=share&list=PLwamYAKwwpjr3kkaHTDM5hYz1SYskrRKg

Facebook Promotion Guidelines:

http://help.shortstackapp.com/main-menu/mastering-shortstack/promotions-guide/facebook-promotion-guidelines/

ShortStack Support:

http://www.shortstacksupport.com

Like this eBook? Subscribe to our mailing list to receive more free content as we release it.

CLICK HERE TO SUBSCRIBE

Tutorial Videos:

http://www.youtube.com/shortstackresources

Facebook and Social Media Tips:

http://www.sociallystacked.com