Shortstack - Design Facebook Apps & Promotions
Upcoming SlideShare
Loading in...5
×
 

Shortstack - Design Facebook Apps & Promotions

on

  • 511 views

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 ...

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.

Statistics

Views

Total Views
511
Views on SlideShare
511
Embed Views
0

Actions

Likes
0
Downloads
7
Comments
0

0 Embeds 0

No embeds

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Shortstack - Design Facebook Apps & Promotions Presentation Transcript

  • 1. www.thevirtualsage.com
  • 2. www.thevirtualsage.com
  • 3. www.thevirtualsage.com
  • 4. www.thevirtualsage.com
  • 5. www.thevirtualsage.com
  • 6. www.thevirtualsage.com
  • 7. www.thevirtualsage.com
  • 8. www.thevirtualsage.com
  • 9. www.thevirtualsage.com
  • 10. Click Sign up buttonwww.thevirtualsage.com
  • 11. This will appearwww.thevirtualsage.com
  • 12. You can create an accountfilling up this formwww.thevirtualsage.com
  • 13. www.thevirtualsage.com
  • 14. Let’s login usingFacebookwww.thevirtualsage.com
  • 15. Click Login withFacebook buttonwww.thevirtualsage.com
  • 16. This will appearwww.thevirtualsage.com
  • 17. Click Okay buttonwww.thevirtualsage.com
  • 18. This will appear nextwww.thevirtualsage.com
  • 19. Click Okay buttonwww.thevirtualsage.com
  • 20. This will appearwww.thevirtualsage.com
  • 21. Click I agree to theterms of servicewww.thevirtualsage.com
  • 22. Click Create Account buttonwww.thevirtualsage.com
  • 23. Voila! We’ve just created ourShortstack account!www.thevirtualsage.com
  • 24. Let’s first exploreShortstack’s Main Menuwww.thevirtualsage.com
  • 25. Shortstack’s Main Menuswww.thevirtualsage.com
  • 26. Designer is where youdesign and publish an appwww.thevirtualsage.com
  • 27. Tabs is where you createand manage all your appswww.thevirtualsage.com
  • 28. Media is where you view, manageand upload images to be used in your tabwww.thevirtualsage.com
  • 29. Templates are pre-built app designsyou can use to create your own appswww.thevirtualsage.com
  • 30. Forms & Promos is where you can create newPromotion Forms and Custom Formswww.thevirtualsage.com
  • 31. Let’s exploreeach Menu deeperwww.thevirtualsage.com
  • 32. the Tab Designer interfacewww.thevirtualsage.com
  • 33. Widget Editor is whereyou add, edit and delete widgetswww.thevirtualsage.com
  • 34. CSS Editor is where you tweakthe appearance of your tabwww.thevirtualsage.com
  • 35. Install tab is where you install your tab to aFacebook Page for the first time, or tomanage existing installs.www.thevirtualsage.com
  • 36. Tab ID: a uniquenumber that identifies the tabwww.thevirtualsage.com
  • 37. the Tab namewww.thevirtualsage.com
  • 38. Settings: drop-down menu which allowsyou to edit the settings for the tabwww.thevirtualsage.com
  • 39. Add Widgets: where you choosewidgets to be added to your tabwww.thevirtualsage.com
  • 40. Edit Widgets: added widgets are hereand where changes can be done toowww.thevirtualsage.com
  • 41. Live Preview shows how your tab will look likewhen installed to a Facebook Pagewww.thevirtualsage.com
  • 42. Simulated date: best to use if you have widgets withStarts At or Ends At visibility settingswww.thevirtualsage.com
  • 43. Simulated Country: let’s you simulatewhat users from different countries will seewww.thevirtualsage.com
  • 44. The Tabs interfacewww.thevirtualsage.com
  • 45. Name: Shows the name of the tabwww.thevirtualsage.com
  • 46. Installed To: Shows the name of theFacebook Page(s) the tab is installed towww.thevirtualsage.com
  • 47. Publish Method: If installed, this shows whichmethod was used to install the tabwww.thevirtualsage.com
  • 48. Owner: Shows the name of theperson who owns the tabwww.thevirtualsage.com
  • 49. Since Last Change: Shows the amount of time that haspassed since any changes were made to the tabwww.thevirtualsage.com
  • 50. Actions: Design, Analytics, Tab settings,Permissions & Deletewww.thevirtualsage.com
  • 51. The Media interfaceThe Media Manager shows all the media(for example, images) you haveuploaded to your accountwww.thevirtualsage.com
  • 52. Thumbnail: A small preview ofthe item you uploadedwww.thevirtualsage.com
  • 53. Filename / URL: Shows just thename of the file you uploadedwww.thevirtualsage.com
  • 54. Bytes: The size of theuploaded file•www.thevirtualsage.com
  • 55. Width: The width inpixels (images only)www.thevirtualsage.com
  • 56. Height: The height inpixels (images only)www.thevirtualsage.com
  • 57. Uploaded: Shows what day theitem was uploadedwww.thevirtualsage.com
  • 58. Actions: Copy & Edit and Deletewww.thevirtualsage.com
  • 59. The Templates interfaceTemplates provide a numberof pre-configured designs that makeit easy to get started with a new tabwww.thevirtualsage.com
  • 60. The Forms & Promos interfacewww.thevirtualsage.com
  • 61. Name: Shows the nameof the databasewww.thevirtualsage.com
  • 62. Type: The database type,either form or promotionwww.thevirtualsage.com
  • 63. Tabs: Shows the name of any tabsthat are connected to the databasewww.thevirtualsage.com
  • 64. Created: Shows when thedatabase was createdwww.thevirtualsage.com
  • 65. Entries: Shows the number oflive entries in the databasewww.thevirtualsage.com
  • 66. Actions: Database settings, View entries,Copy database, Permissions & Deletewww.thevirtualsage.com
  • 67. www.thevirtualsage.com
  • 68. Two waysin creating tab:www.thevirtualsage.com
  • 69. start with a templateorstart from scratchwww.thevirtualsage.com
  • 70. Let’s start withawww.thevirtualsage.com
  • 71. To start, clickCreate Tab from Templatewww.thevirtualsage.com
  • 72. Public templates will appearwww.thevirtualsage.com
  • 73. Closer look at the templateswww.thevirtualsage.com
  • 74. www.thevirtualsage.com
  • 75. Let’s trysweepstakespromotionwww.thevirtualsage.com
  • 76. sweepstakesis a simple promotionthat gathers entriesvia an entry formwww.thevirtualsage.com
  • 77. Click Sweepstakes templatewww.thevirtualsage.com
  • 78. You will see preview of yourchosen tab on the right sidewww.thevirtualsage.com
  • 79. Click Make Tab buttonwww.thevirtualsage.com
  • 80. You will bedirected to the Designer pagewww.thevirtualsage.com
  • 81. Before we design our tab,let’s first create the databasewww.thevirtualsage.com
  • 82. To create a database, clickForms & Promos menuwww.thevirtualsage.com
  • 83. This will appearwww.thevirtualsage.com
  • 84. Click New Promotion buttonwww.thevirtualsage.com
  • 85. This will appearwww.thevirtualsage.com
  • 86. Note that you have anoption to upgrade your accountwww.thevirtualsage.com
  • 87. If not ready to upgrade, let’sproceed herewww.thevirtualsage.com
  • 88. Enter name of your Promotionwww.thevirtualsage.com
  • 89. Enter email address; formsubmissions will be emailed herewww.thevirtualsage.com
  • 90. Enter Company or Brand that issponsoring the promotionwww.thevirtualsage.com
  • 91. Describe how thecollected data will be usedwww.thevirtualsage.com
  • 92. click I agree to followthe Facebook Promotion Guidelineswww.thevirtualsage.com
  • 93. Then click Create and Continueto Form Designerwww.thevirtualsage.com
  • 94. Form Designerpage will then appearwww.thevirtualsage.com
  • 95. The Add Fields of Form Designerwww.thevirtualsage.com
  • 96. Facebook ID and Email Address fieldsare added to your form by defaultwww.thevirtualsage.com
  • 97. To add additional fields, clickon a field’s green plus signwww.thevirtualsage.com
  • 98. Viewing Form with added fieldswww.thevirtualsage.com
  • 99. When done adding field,click Save Formwww.thevirtualsage.com
  • 100. Form is now savedwww.thevirtualsage.com
  • 101. Now click Form Settingswww.thevirtualsage.com
  • 102. This will appearwww.thevirtualsage.com
  • 103. Scroll down to see a bit morewww.thevirtualsage.com
  • 104. When all set, click Save Formwww.thevirtualsage.com
  • 105. www.thevirtualsage.com
  • 106. Click Designer Menuwww.thevirtualsage.com
  • 107. You will be directed backto Designer pagewww.thevirtualsage.com
  • 108. Click Promotion Widget so it canbe added to your widgetswww.thevirtualsage.com
  • 109. Edit Widget dialoguebox will appearwww.thevirtualsage.com
  • 110. Click drop-down menuwww.thevirtualsage.com
  • 111. select thenewly created formwww.thevirtualsage.com
  • 112. Basic setup page will appearwww.thevirtualsage.com
  • 113. Click drop-down menu underForm Submission Optionswww.thevirtualsage.com
  • 114. This will appearwww.thevirtualsage.com
  • 115. Click Popup Friends Invite Dialoguewww.thevirtualsage.com
  • 116. Check Show SharePrompt on Submit boxwww.thevirtualsage.com
  • 117. Enter Title ofyour Sweepstakes Promotionwww.thevirtualsage.com
  • 118. Key in “actor” under Caption;it automatically insert the sharing user’s name into the captionwww.thevirtualsage.com
  • 119. Enter description of yourSweepstakes Formwww.thevirtualsage.com
  • 120. Type Enter Nowunder Action Link Labelwww.thevirtualsage.com
  • 121. This will serve as acustom link that takesthe user back tothe Facebook Page tabwww.thevirtualsage.com
  • 122. Then click Save when all is setwww.thevirtualsage.com
  • 123. you’ll be directedback to designer pagewww.thevirtualsage.com
  • 124. Now let’s work on Image widgetwww.thevirtualsage.com
  • 125. Click pencil iconto configure Image widgetwww.thevirtualsage.com
  • 126. Edit widget page will appearwww.thevirtualsage.com
  • 127. Click select imagewww.thevirtualsage.com
  • 128. Media Selector page will appearwww.thevirtualsage.com
  • 129. Click choose filewww.thevirtualsage.com
  • 130. Your Picture Library will appearwww.thevirtualsage.com
  • 131. Choose imagethat you want to uploadwww.thevirtualsage.com
  • 132. Then click Openwww.thevirtualsage.com
  • 133. Now back to Media Selectorwith your selected imagewww.thevirtualsage.com
  • 134. Click Use Selected Imagewww.thevirtualsage.com
  • 135. Edit Widget will appear withyour selected imagewww.thevirtualsage.com
  • 136. Now click Save buttonwww.thevirtualsage.com
  • 137. You will be directed back to DesignerPage with the uploaded imagewww.thevirtualsage.com
  • 138. Now let’s edit Rich Text widgetwww.thevirtualsage.com
  • 139. Click pencil iconwww.thevirtualsage.com
  • 140. Edit Widget page will appearwww.thevirtualsage.com
  • 141. Edit your text herewww.thevirtualsage.com
  • 142. You can edit your textwith text tools herewww.thevirtualsage.com
  • 143. When you aredone editing, click Savewww.thevirtualsage.com
  • 144. You’d be backto designer page againwww.thevirtualsage.com
  • 145. Let’s edit another text widgetwww.thevirtualsage.com
  • 146. Edit widget will appearwww.thevirtualsage.com
  • 147. Enter your text herewww.thevirtualsage.com
  • 148. I want to add an image in thiswidget; click Background imagewww.thevirtualsage.com
  • 149. Click Save whenyou are done editingwww.thevirtualsage.com
  • 150. This will appearwww.thevirtualsage.com
  • 151. click Select Imagewww.thevirtualsage.com
  • 152. Media Selector Page will appearwww.thevirtualsage.com
  • 153. I need new imageso I’ll click Choose Filewww.thevirtualsage.com
  • 154. Picture Library will appearwww.thevirtualsage.com
  • 155. Choose imagethat you want to uploadwww.thevirtualsage.com
  • 156. Then click Openwww.thevirtualsage.com
  • 157. Now back to Media Selectorwith the selected imagewww.thevirtualsage.com
  • 158. Click Use Selected Imagewww.thevirtualsage.com
  • 159. Image now uploadedwww.thevirtualsage.com
  • 160. Click Savewww.thevirtualsage.com
  • 161. Directed back to designer pagewith previously edited widgetswww.thevirtualsage.com
  • 162. Now let’s edit the Friend Invitewidget; click pencil iconwww.thevirtualsage.com
  • 163. Edit Widget page will appearwww.thevirtualsage.com
  • 164. Enter title of your invite herewww.thevirtualsage.com
  • 165. Enter message of your invitewww.thevirtualsage.com
  • 166. If you left it blank,default message will be used:“Thought you might be interested in this page”www.thevirtualsage.com
  • 167. When all set, click Savewww.thevirtualsage.com
  • 168. Back to designer page again;click for preview of invitewww.thevirtualsage.com
  • 169. Invite preview; tick box/boxesof who you want to invitewww.thevirtualsage.com
  • 170. Then click send requestswww.thevirtualsage.com
  • 171. Voila! Invite sent!www.thevirtualsage.com
  • 172. Now let’s edit the theme; click thetriangle in the theme selectorwww.thevirtualsage.com
  • 173. Tiles of themewill appearwww.thevirtualsage.com
  • 174. Click on a tiletopreviewthat themewww.thevirtualsage.com
  • 175. When donechoosingyour theme,click Savewww.thevirtualsage.com
  • 176. If you’re already contented withyour design, click Install Tabwww.thevirtualsage.com
  • 177. This will appear; choose howyou will publish your tabwww.thevirtualsage.com
  • 178. Let’s choose Quick Publishin this tutorialwww.thevirtualsage.com
  • 179. Quick Publish page will appearwww.thevirtualsage.com
  • 180. Choose which pageyou will publish your tabwww.thevirtualsage.com
  • 181. Click Installwww.thevirtualsage.com
  • 182. Your tab is now publishedwww.thevirtualsage.com
  • 183. Click the URL to view your pagewww.thevirtualsage.com
  • 184. Promotion Tabsuccessfully installedwww.thevirtualsage.com
  • 185. www.thevirtualsage.com
  • 186. www.thevirtualsage.com
  • 187. www.thevirtualsage.com
  • 188. www.thevirtualsage.com