Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Fancy Facebook Fan Pages - A Step By Step Guide

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

  • Login to see the comments

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>