Maricel Olleres How to Use Shortstack

7/30/2019 Maricel Olleres How to Use Shortstack

1/203

How to Use

Shortstack


2/203

What is Shortstack?

2013 Maricel Olleres - How to Use Shortstack maricelvaextraordinaire.wordpress.com 2

* a tab designing tool


3/203


* that allows you tocreate beautiful

tabs on Facebookpages


4/203


* it integrates twitter,

youtube, vimeo and

many other apps


5/203


into your custom

FB tab


6/203

Open your browser



7/203

Google Chrome in this

example



8/203


9/203

You will be taken to this

page



10/203

Click on Creare My Free

Account



11/203

You can create an account in

TWO ways:



12/203

By filling out this form



13/203

or by signing up using your

facebook account



14/203

For this tutorial, I will use

my facebook account



15/203

When I click here,



16/203

this pops up



17/203

Fill in details



18/203

Click on Log In



19/203

This appears



20/203

Click on Okay



21/203

You will be asked this



22/203

Click on Okay



23/203

You can now create a shortstack

account



24/203

Click on this box



25/203

Click on Create Account



26/203

You are taken to this page



27/203

You can either create a


1 2


28/203

For this tutorial, I choose



29/203

This page then appears



30/203

You can choose a template

design here



31/203


Scroll down to see more

options


32/203

Click on the template of

your choice



33/203

Click on Make Tab



34/203

You are then taken to

Shortstack Designer


f


35/203

A live preview of my

template is also shown



36/203


You can apply a theme in

your template here


37/203


Cli k Th S l


38/203

Click on Theme Selector

to see your options



39/203



40/203

Choose one by clicking on it



41/203

I choose this (Click!)



42/203

Click on Save when done



43/203



44/203

Sh t t k D ig ll


45/203

Shortstack Designer allows

you to add widgets



46/203

and edit widgets on your tab


Ch idg t t t


47/203

Choose a widget you want to

add here


F thi t t i l I h t


48/203

For this tutorial, I choose to

add Rich Text Widget



49/203

Click here



50/203

A pop up window appears



51/203

Enter text here



52/203



53/203


You can link a website to

your text. To do that

Hi hli ht th t t


54/203


Highlight the text


55/203

Click on the chain icon here



56/203

This pop up window appears



57/203


Go to the website you want


58/203

Go to the website you want

to link


Cli k h dd b


59/203

Click on the address bar



60/203



61/203

Press CTRL + C



62/203


Go back to this window


63/203


Click here


64/203

Press CTRL + V



65/203

URL is now pasted!


You can also opt to open the


66/203

You can also opt to open the

link in a new window



67/203

Just click on the arrow


When Open link in a new


68/203

When Open link in a new

window appears,



69/203

Click on it



70/203

To add a title, click here



71/203


72/203

Hit Insert button


Website is now linked to the


73/203

Website is now linked to the

text!



74/203


Live preview is refreshed


75/203

p

and you see the widget

added



76/203


To change the position of


77/203

To change the position of

the widget, use edit widgets


h d h ll


78/203

Each widget has a small icon


Click the icon of the widget


79/203

Click the icon of the widget

you want to edit


I hi i l Ri h T


80/203

In this tutorial, Rich Text


Click and drag it to the


81/203

Click and drag it to the

desired position



82/203



83/203



84/203

Look at the live preview to

ckeck



85/203

if the widget has changed

its position.


Y it h !


86/203

Yes, it has!



87/203

Shortstack also allows you

to add a video


FromAdd Widgets, look for


88/203

g ,

Integrations


Cli k th Vid Widg t


89/203

Click on the Video Widget


Thi i d


90/203

This window pops up



91/203


Open another tab in your


92/203

p y

browser


Type youtube com


93/203

Type youtube.com


Press Enter


94/203

Press Enter




95/203



Type the video you want to


96/203

yp y

add here


Hall of Fame in this


97/203

example


Press Enter


98/203

Press Enter



99/203

Click on the video of your


100/203

choice


Video starts playing


101/203

Video starts playing



102/203

Right click your mouse


103/203

Right-click your mouse


You will see this


104/203

You will see this


Click on Copy


105/203

Click on Copy




106/203



Click here


107/203

Click here




108/203



You then see this


109/203

You then see this


Click Paste


110/203

Click Paste


Video URL now pasted!


111/203





112/203



Hit Get Video button


113/203

Hit Get Video button



114/203

if the video is correct


115/203

if the video is correct


Hit Save if it is


116/203

Hit Save if it is


Live preview is again


117/203

refreshed



118/203

Lets add an image this time


Look at Add Widgets


119/203

Look at Add Widgets


Find Basic Tools


120/203

Find Basic Tools


Click on Image Widget


121/203

Click on Image Widget


This pop up shows


122/203

This pop up shows



123/203


Click on Select Image


124/203


Click on Select Image

You will be shown this

i d


125/203

window


You can upload a file in two


126/203

ways:


I will use Option 1 for this


127/203

tutorial



128/203

Another window pops up


129/203

p p p


Click on the desired image


130/203

g


Click Open


131/203

p


Image uploads


132/203

g p

2013 Maricel Olleres - How to Use Shortstack maricelvaextraordinaire.wordpress.com

132

Once done, click Use


133/203

Selected Image


133

Hit Save button


134/203


134


135/203


136/203

Aside from changing the

position of the widget,


136


137/203

you can also edit them


137

Look at Edit Widgets


138/203

g


138

See these?


139/203


139

This icon lets you delete the

widget


140/203

widget


140

When you click on it, you

get this message


141/203

get this message


141

Click Ok if you are sure


142/203


142

This icon lets you edit the

widget


143/203

widget


143

This icon lets you clone the

widget


144/203

widget

2013 Maricel Olleres - How to Use Shortstack maricelvaextraordinaire.wordpress.com144

When you click clone this

happens


145/203

happens

2013 Maricel Olleres - How to Use Shortstack maricelvaextraordinaire.wordpress.com145


146/203


A copy of the video widget is

made


147/203

made


Check the live preview again


148/203



149/203

Once satisfied with how it

looks


click on Install Tab


150/203



151/203


Click here


152/203



153/203


Then this appears


154/203



155/203

You now have to choose onwhich Facebook page



156/203

you want the tab to be

installed



157/203

No Facebook page?

Create one!


Open another tab in your

browser


158/203

browser


Type facebook.com/pages

here


159/203

here


Press Enter


160/203


You are taken here


161/203


Click Create Page


162/203


Choose the kind of page youwill create


163/203

will create


For this tutorial, I choosethis (Click!)


164/203


this (Click!)

This shows up


165/203


Choose a category, click here


166/203


I chose Writer


167/203


Type the name of your pagehere


168/203

e e


Click on this box to check it


169/203


Hit Get Started button


170/203


This page shows up


171/203


Type a description of thepage here


172/203

p g


Hit Save Info


173/203


Upload a Profile Picture


174/203


Click Upload From Computer


175/203



176/203

Choose a picture (Click!)


177/203


Click Open


178/203


The picture is now added!


179/203


Click Next


180/203


You can skip this


181/203


and this


182/203


You will then be shown yourFacebook page


183/203


Go back to this page


184/203


Click Refresh List


185/203


You will then see this


186/203



187/203


Click Install


188/203


Your tab is now installed!


189/203



190/203



191/203

Now, give your tab a name



192/203


193/203


Type the tab name here


194/203



195/203



196/203

To view tab on Facebook, go

back to your Facebook page



197/203


Click here


198/203


You will then see your tab!


199/203



200/203

There are still many thingsyou can do using

Shortstack!



201/203

Start exploring now!



202/203

Photos and images courtesy

of Google Images



203/203

Maricel Olleres How to Use Shortstack

Documents