Shortstack - Design Facebook Apps & Promotions

589 views

Published on

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.

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
589
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Shortstack - Design Facebook Apps & Promotions

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

×