Fancy Facebook Fan Pages - A Step By Step Guide


Published on

Step by Step Guide for Creating Facebook Fan Pages including Polls, Twitter, Photos, Youtube, RSS / Blogs, Landingtab, Vanity URLs

Published in: Business, Technology
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Fancy Facebook Fan Pages - A Step By Step Guide

  1. Step by Step Guide for Creating Fancy Facebook Fan Pages by Olaf Nitz |
  2. About this Facebook Guide <ul><li>Since the social networking site Facebook is about to become one of the largest and most visited websites globally, you should think about expanding your online presence to Facebook. </li></ul><ul><li>That’s what everybody tells you these days – but no one tells you how to create an outstanding Facebook Fan Page. As a corporation you can engage in Facebook in different ways, and creating a fan page is the most powerful one. Although it is easy to set up the page, creating a fancy fan page is a little tricky. </li></ul><ul><li>There are tons of applications on Facebook from which I selected a few which proved to be useful. </li></ul><ul><li>This guide is not exhaustive, but it can help you to create and enhance your Facebook presence. </li></ul>
  3. Agenda <ul><li>5 Login, Create & Publish Page </li></ul><ul><li>13 Profile Picture & Page Description </li></ul><ul><li>17 Add Photos </li></ul><ul><li>25 Page Favourites </li></ul><ul><li>29 Vanity URLs </li></ul><ul><li>34 Custom Tabs with Text & Images </li></ul><ul><li>48 Video App </li></ul><ul><li>70 Youtube Player </li></ul><ul><li>81 Youtube Video Box </li></ul><ul><li>99 Twitter for Pages </li></ul><ul><li>109 Integration RSS / Blog </li></ul><ul><li>120 Create a simple App </li></ul><ul><li>137 Polls </li></ul><ul><li>147 Landingtab </li></ul><ul><li>151 About the Guide & the Author </li></ul>
  4. GET STARTED <ul><li>Login, Creating & Publishing a Page </li></ul>
  5. Login <ul><li> </li></ul><ul><li>GETTING STARTED </li></ul>Username
  6. Create Page <ul><li> ? </li></ul><ul><li>GETTING STARTED </li></ul>
  7. Select „Pages“ <ul><li> </li></ul><ul><li>GETTING STARTED </li></ul>
  8. Create Page <ul><li> </li></ul><ul><li>GETTING STARTED </li></ul>
  9. Choose Category & Create Page <ul><li> </li></ul><ul><li>GETTING STARTED </li></ul>Features in the Info-Section depend on category
  10. Result: New Fan Page <ul><li>GETTING STARTED </li></ul>
  11. Publish Page: Option 1 <ul><li>GETTING STARTED </li></ul>
  12. Publish Page: Option 2 <ul><li>GETTING STARTED </li></ul>
  13. FIRST ADAPTATIONS <ul><li>Profile Picture & Description </li></ul>
  14. Profile Picture <ul><li>GETTING STARTED </li></ul>
  15. Advanced Profile Picture <ul><li>GETTING STARTED </li></ul>Canvas size: 200 px width; Background: Blue: Color #ECEFF4; 51px height; 200px width; Grey Line: Color #E0E0E8;
  16. Page Description <ul><li>GETTING STARTED </li></ul>Text and Links possible
  17. ADD PHOTOS <ul><li>Creating Albums, Uploading, Publishing </li></ul>
  18. Create a Photo Album <ul><li>ADD PHOTOS </li></ul>
  19. Album Details <ul><li>ADD PHOTOS </li></ul>
  20. Loading Java <ul><li>ADD PHOTOS </li></ul>
  21. Select Photos <ul><li>ADD PHOTOS </li></ul>Non-Java / Simple HTML-Upload also available
  22. Upload Photos <ul><li>ADD PHOTOS </li></ul>
  23. Upload Successful <ul><li>ADD PHOTOS </li></ul>
  24. Publish Photos <ul><li>ADD PHOTOS </li></ul>
  25. PAGE FAVOURITES <ul><li>Linking other Pages from your Fan Page, Creating a Network of Fan Pages </li></ul>
  26. Go to Fan Page & Add to Favourites <ul><li>PAGE FAVOURITES </li></ul>
  27. Select Page <ul><li>PAGE FAVOURITES </li></ul>
  28. Result: Favourite Pages <ul><li>PAGE FAVOURITES </li></ul>
  29. VANITY URLS <ul><li>Creating Custom Short-URLs </li></ul>
  30. Select Username for your Page <ul><li> </li></ul><ul><li>VANITY URLS </li></ul>It is possible to create Vanity URLs for Fan Pages with more than 50 fans.
  31. Choose Page <ul><li> </li></ul><ul><li>VANITY URLS </li></ul>
  32. Choose Username <ul><li> </li></ul><ul><li>VANITY URLS </li></ul>
  33. Result: Vanity URL <ul><li>VANITY URLS </li></ul>
  34. CUSTOM TABS <ul><li>Adding your own Text & Graphics </li></ul>
  35. Search App <ul><li>CUSTOM TABS </li></ul>
  36. Search FBML App <ul><li> </li></ul><ul><li>CUSTOM TABS </li></ul>
  37. Select „Static FBML“ <ul><li>CUSTOM TABS </li></ul>
  38. Add App to Page <ul><li> </li></ul><ul><li>CUSTOM TABS </li></ul>
  39. Choose Page <ul><li>CUSTOM TABS </li></ul>
  40. Edit App <ul><li>Edit Page </li></ul><ul><li>CUSTOM TABS </li></ul>
  41. Insert HTML / FBML <ul><li>CUSTOM TABS </li></ul><ul><li>Dos: </li></ul><ul><li>HTML </li></ul><ul><li>HTML forms </li></ul><ul><li>Internal CSS </li></ul><ul><li>outgoing links </li></ul><ul><li>external images </li></ul><ul><li>Don‘ts: </li></ul><ul><li>external Javascript </li></ul><ul><li>external CSS </li></ul>
  42. Option: Add another FBML Box <ul><li>CUSTOM TABS </li></ul>
  43. Edit App Settings <ul><li>CUSTOM TABS </li></ul>
  44. Add App to Tabs / Boxes <ul><li>CUSTOM TABS </li></ul>
  45. Arrange Tabs: Drag & Drop <ul><li>CUSTOM TABS </li></ul>
  46. Move App from Boxes to Wall Tab <ul><li>CUSTOM TABS </li></ul>
  47. Wall Tab: Result <ul><li>CUSTOM TABS </li></ul>Image width: 200 Pixel
  48. VIDEO APP <ul><li>Uploading Videos, </li></ul><ul><li>Recording with your Webcam </li></ul>
  49. App: Video  Add to Page <ul><li> </li></ul><ul><li>VIDEO APP </li></ul>
  50. Choose Page  Add to Page <ul><li>VIDEO APP </li></ul>
  51. Edit Page Settings  Video Edit <ul><li>VIDEO APP </li></ul>
  52. Add Videos <ul><li>VIDEO APP </li></ul>
  53. Select file on your Computer <ul><li>VIDEO APP </li></ul>
  54. Agree to Terms of Service <ul><li>VIDEO APP </li></ul>
  55. Upload Video & Enter Info <ul><li>VIDEO APP </li></ul>
  56. Save Info <ul><li>VIDEO APP </li></ul>
  57. Video Processing <ul><li>VIDEO APP </li></ul>
  58. Result: Video <ul><li>VIDEO APP </li></ul>
  59. Result: Video <ul><li>VIDEO APP </li></ul>
  60. Result: Video <ul><li>VIDEO APP </li></ul>
  61. Record Video from Webcam <ul><li>VIDEO APP: WEBCAM </li></ul>
  62. Settings Adobe Flash Player <ul><li>VIDEO APP: WEBCAM </li></ul>
  63. Close <ul><li>VIDEO APP: WEBCAM </li></ul>
  64. Record Video <ul><li>VIDEO APP: WEBCAM </li></ul>
  65. Record Video & Stop <ul><li>VIDEO APP: WEBCAM </li></ul>
  66. Save Video <ul><li>VIDEO APP: WEBCAM </li></ul>
  67. Save Video <ul><li>VIDEO APP: WEBCAM </li></ul>
  68. Enter Info & Save <ul><li>VIDEO APP: WEBCAM </li></ul>
  69. Result: Webcam Video <ul><li>VIDEO APP: WEBCAM </li></ul>
  70. YOUTUBE PLAYER <ul><li>Adding a Video Playlist of Youtube Videos </li></ul>
  71. App: Youtube Player <ul><li> </li></ul><ul><li>YOUTUBE PLAYER </li></ul>
  72. Add App to your Page <ul><li>YOUTUBE PLAYER </li></ul>
  73. Edit Page  Edit <ul><li>YOUTUBE PLAYER </li></ul>
  74. Allow Access <ul><li>YOUTUBE PLAYER </li></ul>
  75. Add Videos <ul><li>YOUTUBE PLAYER </li></ul>
  76. Enter Videos & Save <ul><li>YOUTUBE PLAYER </li></ul>
  77. Edit Page  Application Settings <ul><li>YOUTUBE PLAYER </li></ul>
  78. Add Videos to Tabs <ul><li>YOUTUBE PLAYER </li></ul>
  79. Result  Arrange Tab <ul><li>YOUTUBE PLAYER </li></ul>
  80. Result: Youtube Player <ul><li>YOUTUBE PLAYER </li></ul>
  81. YOUTUBE VIDEO BOX <ul><li>Adding Youtube Videos </li></ul>
  82. Add App to Page <ul><li> </li></ul><ul><li>YOUTUBE VIDEO BOX </li></ul>
  83. Select Page <ul><li>YOUTUBE VIDEO BOX </li></ul>
  84. Edit Page  Edit Settings <ul><li>YOUTUBE VIDEO BOX </li></ul>
  85. Add Videos from Youtube <ul><li>YOUTUBE VIDEO BOX </li></ul>
  86. Add Youtube URL <ul><li>YOUTUBE VIDEO BOX </li></ul>
  87. Edit Details & Save Video <ul><li>YOUTUBE VIDEO BOX </li></ul>
  88. Back to Page Videos <ul><li>YOUTUBE VIDEO BOX </li></ul>
  89. Add another Video <ul><li>YOUTUBE VIDEO BOX </li></ul>
  90. Save URL <ul><li>YOUTUBE VIDEO BOX </li></ul>
  91. Edit Details & Save <ul><li>YOUTUBE VIDEO BOX </li></ul>
  92. Back to Page Videos <ul><li>YOUTUBE VIDEO BOX </li></ul>
  93. Page Videos <ul><li>YOUTUBE VIDEO BOX </li></ul>
  94. Edit Application Settings <ul><li>YOUTUBE VIDEO BOX </li></ul>
  95. Add App to Tab <ul><li>YOUTUBE VIDEO BOX </li></ul>
  96. Save Settings <ul><li>YOUTUBE VIDEO BOX </li></ul>
  97. Arrange Tabs <ul><li>YOUTUBE VIDEO BOX </li></ul>
  98. Result Youtube Video Box <ul><li>YOUTUBE VIDEO BOX </li></ul>
  99. TWITTER FOR PAGES <ul><li>Integrating your Tweets </li></ul>
  100. Choose Page <ul><li> </li></ul><ul><li>TWITTER FOR PAGES </li></ul>
  101. Add App Twitter for Pages <ul><li>TWITTER FOR PAGES </li></ul>
  102. Enter Details & Select User <ul><li>TWITTER FOR PAGES </li></ul>
  103. Continue <ul><li>TWITTER FOR PAGES </li></ul>
  104. Edit Page  App. Settings <ul><li>TWITTER FOR PAGES </li></ul>
  105. Add Tab <ul><li>TWITTER FOR PAGES </li></ul>
  106. Add Tab & Save <ul><li>TWITTER FOR PAGES </li></ul>
  107. Arrange Tabs  Drag & Drop <ul><li>TWITTER FOR PAGES </li></ul>
  108. Result: Twitter for Pages <ul><li>TWITTER FOR PAGES </li></ul>
  109. RSS / BLOG <ul><li>Integrating a Blog </li></ul>
  110. App Social RSS: Add to my Page <ul><li> </li></ul><ul><li>RSS / BLOG </li></ul>
  111. Add App to Page <ul><li>RSS / BLOG </li></ul>
  112. Edit Page  Edit Social RSS <ul><li>RSS / BLOG </li></ul>
  113. Add RSS Feed <ul><li>RSS / BLOG </li></ul>
  114. Updating… <ul><li>RSS / BLOG </li></ul>
  115. Feeds Updated <ul><li>RSS / BLOG </li></ul>
  116. Add Tab: Application Settings <ul><li>RSS / BLOG </li></ul>
  117. Add Tab <ul><li>RSS / BLOG </li></ul>
  118. Add Tab & Save <ul><li>RSS / BLOG </li></ul>
  119. Result: Blogpostings in Tab <ul><li>RSS / BLOG </li></ul>
  120. CREATING A SIMPLE APP <ul><li>Content from a Website on Facebook </li></ul>
  121. Creating Content: PHP Code <ul><li>Example: Including Twitter via RSS </li></ul><ul><li>Upload PHP-File to a Server </li></ul><ul><li>CREATING A SIMPLE APP </li></ul><style type=&quot;text/css&quot;> p { font-family: Arial, Helvetica, sans-serif; font-size:10px; } a { color:#990000; } </style> <?php # Script: XML-Reader # Copyright:, erweitert: $url = &quot;;; $number = 7; $file_content = @file_get_contents($url); $items = preg_match_all(&quot;/<item[ ]?.*>(.*)</item>/Uis&quot;, $file_content, $array_items); $array_items = $array_items[1]; if(!empty($array_items)) { if ($number>sizeof($array_items)) $number=sizeof($array_items); echo &quot;<p>&quot;; for($n=0;$n<$number;$n++) { preg_match(&quot;/<link>(.*)</link>/Uis&quot;, $array_items[$n], $array_link); preg_match(&quot;/<title>(.*)</title>/Uis&quot;, $array_items[$n], $array_title); preg_match(&quot;/<pubDate>(.*)</pubDate>/Uis&quot;, $array_items[$n], $array_pubdate); $suchmuster = &quot;/<description><![CDATA[(.*)]]gt;</description>/Uis&quot;; preg_match($suchmuster, $array_items[$n], $array_description); echo &quot;<b>$array_title[1]</b><br>&quot;; echo &quot;$array_description[1] &quot;; echo &quot;<a href=&quot;$array_link[1]&quot; target=&quot;_blank&quot;>more</a>&quot;; echo &quot;<br><br>&quot;; } echo &quot;</ul></p>&quot;; } ?>
  122. PHP File in Browser <ul><li>CREATING A SIMPLE APP </li></ul>
  123. Set Up New Application <ul><li> </li></ul><ul><li>CREATING A SIMPLE APP </li></ul>
  124. Choose Application Name <ul><li> </li></ul><ul><li>CREATING A SIMPLE APP </li></ul>
  125. Basic Settings <ul><li>CREATING A SIMPLE APP </li></ul>
  126. Authentication: Enable Installable Facebook Pages <ul><li>CREATING A SIMPLE APP </li></ul>
  127. Canvas: Add Canvas Page URL <ul><li>CREATING A SIMPLE APP </li></ul>
  128. Result & Edit Settings <ul><li>CREATING A SIMPLE APP </li></ul>
  129. Add Tab Information <ul><li>CREATING A SIMPLE APP </li></ul>Tab URL is required for adding app as a tab. Tab URL is relative to Canvas Callback URL Canvas Callback URL + Tab URL + twitter =
  130. Go to App Profile <ul><li>CREATING A SIMPLE APP </li></ul>
  131. Add App to Page <ul><li>CREATING A SIMPLE APP </li></ul>
  132. Add App to Page <ul><li>CREATING A SIMPLE APP </li></ul>
  133. Edit Page: Application Settings <ul><li>CREATING A SIMPLE APP </li></ul>
  134. Add App to Tab (1) <ul><li>CREATING A SIMPLE APP </li></ul>
  135. Add App to Tab (2) <ul><li>CREATING A SIMPLE APP </li></ul>
  136. Result: External Content <ul><li>CREATING A SIMPLE APP </li></ul>
  137. POLLS
  138. Application Poll <ul><li> </li></ul>
  139. Add App to Page
  140. Create Poll
  141. Enter Questions & Options
  142. Publish Poll
  143. Result: Poll on the Wall
  144. Poll in „Boxes“
  145. Poll in the Wall Tab
  146. Result: Poll
  147. LANDINGTAB <ul><li>Seding the user to a specific tab </li></ul>
  148. Edit Page  Wall Settings <ul><li>LANDINGTAB </li></ul>
  149. Select Default Tab for Non-Fans <ul><li>LANDINGTAB </li></ul>Fans will be sent to the wall by default. This setting only applies to non-fans.
  150. Select Tab <ul><li>LANDINGTAB </li></ul>
  151. ABOUT & CONTACT <ul><li>Final Things </li></ul>
  152. About this Document <ul><li>This document was created by Olaf Nitz and is published under a Creative Commons License. </li></ul><ul><li>You are free to copy, distribute, display, and perform this guide and to make derivative works under the following conditions: Attribution - you must give the original author credit and link to If you alter, transform, or build upon this work, you may distribute the resulting work only under a licence identical to this one. </li></ul><ul><li>About the author: Olaf Nitz has been working in the field of e-business since 2000 as Developer, Online-Marketer, PR-Consultant, Internet Strategist, Blogger & Lecturer. Currently he is working as an Internet Strategist for the Austrian National Tourist Office in Vienna and as a Lecturer on Online-PR at the University of Applied Sciences in St.Pölten in Austria. </li></ul><ul><li>Facebook Bookmarks: </li></ul>
  153. Any Questions? <ul><li>Olaf Nitz </li></ul><ul><li>Web & Blog: </li></ul><ul><li>Email: mail (at) </li></ul><ul><li>Skype: onitz1605 </li></ul><ul><li>Facebook: </li></ul><ul><li>LinkedIn: </li></ul><ul><li>Twitter: </li></ul><ul><li>Delicious: </li></ul><ul><li>If you want to have a PDF version of this guide, send me an email! </li></ul>