Upcoming SlideShare
Fancy Facebook Fan Pages - A Step By Step Guide
- Step by Step Guide for Creating Fancy Facebook Fan Pages by Olaf Nitz | olafnitz.net
- 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>
- 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>
- GET STARTED <ul><li>Login, Creating & Publishing a Page </li></ul>
- Login <ul><li>http://www.facebook.com </li></ul><ul><li>GETTING STARTED </li></ul>Username
- Create Page <ul><li>http://www.facebook.com/home.php ? </li></ul><ul><li>GETTING STARTED </li></ul>
- Select „Pages“ <ul><li>http://www.facebook.com/advertising/ </li></ul><ul><li>GETTING STARTED </li></ul>
- Create Page <ul><li>http://www.facebook.com/advertising/?pages </li></ul><ul><li>GETTING STARTED </li></ul>
- Choose Category & Create Page <ul><li>http://www.facebook.com/pages/create.php </li></ul><ul><li>GETTING STARTED </li></ul>Features in the Info-Section depend on category
- Result: New Fan Page <ul><li>GETTING STARTED </li></ul>
- Publish Page: Option 1 <ul><li>GETTING STARTED </li></ul>
- Publish Page: Option 2 <ul><li>GETTING STARTED </li></ul>
- FIRST ADAPTATIONS <ul><li>Profile Picture & Description </li></ul>
- Profile Picture <ul><li>GETTING STARTED </li></ul>
- 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;
- Page Description <ul><li>GETTING STARTED </li></ul>Text and Links possible
- ADD PHOTOS <ul><li>Creating Albums, Uploading, Publishing </li></ul>
- Create a Photo Album <ul><li>ADD PHOTOS </li></ul>
- Album Details <ul><li>ADD PHOTOS </li></ul>
- Loading Java <ul><li>ADD PHOTOS </li></ul>
- Select Photos <ul><li>ADD PHOTOS </li></ul>Non-Java / Simple HTML-Upload also available
- Upload Photos <ul><li>ADD PHOTOS </li></ul>
- Upload Successful <ul><li>ADD PHOTOS </li></ul>
- Publish Photos <ul><li>ADD PHOTOS </li></ul>
- PAGE FAVOURITES <ul><li>Linking other Pages from your Fan Page, Creating a Network of Fan Pages </li></ul>
- Go to Fan Page & Add to Favourites <ul><li>PAGE FAVOURITES </li></ul>
- Select Page <ul><li>PAGE FAVOURITES </li></ul>
- Result: Favourite Pages <ul><li>PAGE FAVOURITES </li></ul>
- VANITY URLS <ul><li>Creating Custom Short-URLs </li></ul>
- Select Username for your Page <ul><li>http://www.facebook.com/username/ </li></ul><ul><li>VANITY URLS </li></ul>It is possible to create Vanity URLs for Fan Pages with more than 50 fans.
- Choose Page <ul><li>http://www.facebook.com/username/ </li></ul><ul><li>VANITY URLS </li></ul>
- Choose Username <ul><li>http://www.facebook.com/username/ </li></ul><ul><li>VANITY URLS </li></ul>
- Result: Vanity URL <ul><li>VANITY URLS </li></ul>
- CUSTOM TABS <ul><li>Adding your own Text & Graphics </li></ul>
- Search App <ul><li>CUSTOM TABS </li></ul>
- Search FBML App <ul><li>http://www.facebook.com/apps/directory.php </li></ul><ul><li>CUSTOM TABS </li></ul>
- Select „Static FBML“ <ul><li>CUSTOM TABS </li></ul>
- Add App to Page <ul><li>http://www.facebook.com/apps/application.php?id=4949752878&ref=appd </li></ul><ul><li>CUSTOM TABS </li></ul>
- Choose Page <ul><li>CUSTOM TABS </li></ul>
- Edit App <ul><li>Edit Page </li></ul><ul><li>CUSTOM TABS </li></ul>
- 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>
- Option: Add another FBML Box <ul><li>CUSTOM TABS </li></ul>
- Edit App Settings <ul><li>CUSTOM TABS </li></ul>
- Add App to Tabs / Boxes <ul><li>CUSTOM TABS </li></ul>
- Arrange Tabs: Drag & Drop <ul><li>CUSTOM TABS </li></ul>
- Move App from Boxes to Wall Tab <ul><li>CUSTOM TABS </li></ul>
- Wall Tab: Result <ul><li>CUSTOM TABS </li></ul>Image width: 200 Pixel
- VIDEO APP <ul><li>Uploading Videos, </li></ul><ul><li>Recording with your Webcam </li></ul>
- App: Video Add to Page <ul><li>http://www.facebook.com/apps/application.php?id=2392950137 </li></ul><ul><li>VIDEO APP </li></ul>
- Choose Page Add to Page <ul><li>VIDEO APP </li></ul>
- Edit Page Settings Video Edit <ul><li>VIDEO APP </li></ul>
- Add Videos <ul><li>VIDEO APP </li></ul>
- Select file on your Computer <ul><li>VIDEO APP </li></ul>
- Agree to Terms of Service <ul><li>VIDEO APP </li></ul>
- Upload Video & Enter Info <ul><li>VIDEO APP </li></ul>
- Save Info <ul><li>VIDEO APP </li></ul>
- Video Processing <ul><li>VIDEO APP </li></ul>
- Result: Video <ul><li>VIDEO APP </li></ul>
- Result: Video <ul><li>VIDEO APP </li></ul>
- Result: Video <ul><li>VIDEO APP </li></ul>
- Record Video from Webcam <ul><li>VIDEO APP: WEBCAM </li></ul>
- Settings Adobe Flash Player <ul><li>VIDEO APP: WEBCAM </li></ul>
- Close <ul><li>VIDEO APP: WEBCAM </li></ul>
- Record Video <ul><li>VIDEO APP: WEBCAM </li></ul>
- Record Video & Stop <ul><li>VIDEO APP: WEBCAM </li></ul>
- Save Video <ul><li>VIDEO APP: WEBCAM </li></ul>
- Save Video <ul><li>VIDEO APP: WEBCAM </li></ul>
- Enter Info & Save <ul><li>VIDEO APP: WEBCAM </li></ul>
- Result: Webcam Video <ul><li>VIDEO APP: WEBCAM </li></ul>
- YOUTUBE PLAYER <ul><li>Adding a Video Playlist of Youtube Videos </li></ul>
- App: Youtube Player <ul><li>http://www.facebook.com/apps/application.php?id=6916954478 </li></ul><ul><li>YOUTUBE PLAYER </li></ul>
- Add App to your Page <ul><li>YOUTUBE PLAYER </li></ul>
- Edit Page Edit <ul><li>YOUTUBE PLAYER </li></ul>
- Allow Access <ul><li>YOUTUBE PLAYER </li></ul>
- Add Videos <ul><li>YOUTUBE PLAYER </li></ul>
- Enter Videos & Save <ul><li>YOUTUBE PLAYER </li></ul>
- Edit Page Application Settings <ul><li>YOUTUBE PLAYER </li></ul>
- Add Videos to Tabs <ul><li>YOUTUBE PLAYER </li></ul>
- Result Arrange Tab <ul><li>YOUTUBE PLAYER </li></ul>
- Result: Youtube Player <ul><li>YOUTUBE PLAYER </li></ul>
- YOUTUBE VIDEO BOX <ul><li>Adding Youtube Videos </li></ul>
- Add App to Page <ul><li>http://www.facebook.com/apps/application.php?id=3801015922 </li></ul><ul><li>YOUTUBE VIDEO BOX </li></ul>
- Select Page <ul><li>YOUTUBE VIDEO BOX </li></ul>
- Edit Page Edit Settings <ul><li>YOUTUBE VIDEO BOX </li></ul>
- Add Videos from Youtube <ul><li>YOUTUBE VIDEO BOX </li></ul>
- Add Youtube URL <ul><li>YOUTUBE VIDEO BOX </li></ul>
- Edit Details & Save Video <ul><li>YOUTUBE VIDEO BOX </li></ul>
- Back to Page Videos <ul><li>YOUTUBE VIDEO BOX </li></ul>
- Add another Video <ul><li>YOUTUBE VIDEO BOX </li></ul>
- Save URL <ul><li>YOUTUBE VIDEO BOX </li></ul>
- Edit Details & Save <ul><li>YOUTUBE VIDEO BOX </li></ul>
- Back to Page Videos <ul><li>YOUTUBE VIDEO BOX </li></ul>
- Page Videos <ul><li>YOUTUBE VIDEO BOX </li></ul>
- Edit Application Settings <ul><li>YOUTUBE VIDEO BOX </li></ul>
- Add App to Tab <ul><li>YOUTUBE VIDEO BOX </li></ul>
- Save Settings <ul><li>YOUTUBE VIDEO BOX </li></ul>
- Arrange Tabs <ul><li>YOUTUBE VIDEO BOX </li></ul>
- Result Youtube Video Box <ul><li>YOUTUBE VIDEO BOX </li></ul>
- TWITTER FOR PAGES <ul><li>Integrating your Tweets </li></ul>
- Choose Page <ul><li>http://www.facebook.com/add.php?api_key=6f77619e603ca9b71b45f5cd105be888&pages </li></ul><ul><li>TWITTER FOR PAGES </li></ul>
- Add App Twitter for Pages <ul><li>TWITTER FOR PAGES </li></ul>
- Enter Details & Select User <ul><li>TWITTER FOR PAGES </li></ul>
- Continue <ul><li>TWITTER FOR PAGES </li></ul>
- Edit Page App. Settings <ul><li>TWITTER FOR PAGES </li></ul>
- Add Tab <ul><li>TWITTER FOR PAGES </li></ul>
- Add Tab & Save <ul><li>TWITTER FOR PAGES </li></ul>
- Arrange Tabs Drag & Drop <ul><li>TWITTER FOR PAGES </li></ul>
- Result: Twitter for Pages <ul><li>TWITTER FOR PAGES </li></ul>
- RSS / BLOG <ul><li>Integrating a Blog </li></ul>
- App Social RSS: Add to my Page <ul><li>http://www.facebook.com/apps/application.php?id=23798139265 </li></ul><ul><li>RSS / BLOG </li></ul>
- Add App to Page <ul><li>RSS / BLOG </li></ul>
- Edit Page Edit Social RSS <ul><li>RSS / BLOG </li></ul>
- Add RSS Feed <ul><li>RSS / BLOG </li></ul>
- Updating… <ul><li>RSS / BLOG </li></ul>
- Feeds Updated <ul><li>RSS / BLOG </li></ul>
- Add Tab: Application Settings <ul><li>RSS / BLOG </li></ul>
- Add Tab <ul><li>RSS / BLOG </li></ul>
- Add Tab & Save <ul><li>RSS / BLOG </li></ul>
- Result: Blogpostings in Tab <ul><li>RSS / BLOG </li></ul>
- CREATING A SIMPLE APP <ul><li>Content from a Website on Facebook </li></ul>
- 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="text/css"> p { font-family: Arial, Helvetica, sans-serif; font-size:10px; } a { color:#990000; } </style> <?php # Script: XML-Reader # Copyright: y0y.de, erweitert: bueltge.de $url = "http://twitter.com/statuses/user_timeline/957101.rss"; $number = 7; $file_content = @file_get_contents($url); $items = preg_match_all("/<item[ ]?.*>(.*)</item>/Uis", $file_content, $array_items); $array_items = $array_items[1]; if(!empty($array_items)) { if ($number>sizeof($array_items)) $number=sizeof($array_items); echo "<p>"; for($n=0;$n<$number;$n++) { preg_match("/<link>(.*)</link>/Uis", $array_items[$n], $array_link); preg_match("/<title>(.*)</title>/Uis", $array_items[$n], $array_title); preg_match("/<pubDate>(.*)</pubDate>/Uis", $array_items[$n], $array_pubdate); $suchmuster = "/<description><![CDATA[(.*)]]gt;</description>/Uis"; preg_match($suchmuster, $array_items[$n], $array_description); echo "<b>$array_title[1]</b><br>"; echo "$array_description[1] "; echo "<a href="$array_link[1]" target="_blank">more</a>"; echo "<br><br>"; } echo "</ul></p>"; } ?>
- PHP File in Browser <ul><li>CREATING A SIMPLE APP </li></ul>
- Set Up New Application <ul><li>http://www.facebook.com/developers/ </li></ul><ul><li>CREATING A SIMPLE APP </li></ul>
- Choose Application Name <ul><li>http://www.facebook.com/developers/createapp.php </li></ul><ul><li>CREATING A SIMPLE APP </li></ul>
- Basic Settings <ul><li>CREATING A SIMPLE APP </li></ul>
- Authentication: Enable Installable Facebook Pages <ul><li>CREATING A SIMPLE APP </li></ul>
- Canvas: Add Canvas Page URL <ul><li>CREATING A SIMPLE APP </li></ul>
- Result & Edit Settings <ul><li>CREATING A SIMPLE APP </li></ul>
- 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 http://olafnitz.net + twitter = http://olafnitz.net/twitter
- Go to App Profile <ul><li>CREATING A SIMPLE APP </li></ul>
- Add App to Page <ul><li>CREATING A SIMPLE APP </li></ul>
- Add App to Page <ul><li>CREATING A SIMPLE APP </li></ul>
- Edit Page: Application Settings <ul><li>CREATING A SIMPLE APP </li></ul>
- Add App to Tab (1) <ul><li>CREATING A SIMPLE APP </li></ul>
- Add App to Tab (2) <ul><li>CREATING A SIMPLE APP </li></ul>
- Result: External Content <ul><li>CREATING A SIMPLE APP </li></ul>
- POLLS
- Application Poll <ul><li>http://www.facebook.com/apps/application.php?id=20678178440 </li></ul>
- Add App to Page
- Create Poll
- Enter Questions & Options
- Publish Poll
- Result: Poll on the Wall
- Poll in „Boxes“
- Poll in the Wall Tab
- Result: Poll
- LANDINGTAB <ul><li>Seding the user to a specific tab </li></ul>
- Edit Page Wall Settings <ul><li>LANDINGTAB </li></ul>
- 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.
- Select Tab <ul><li>LANDINGTAB </li></ul>
- ABOUT & CONTACT <ul><li>Final Things </li></ul>
- 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 http://olafnitz.net. 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: http://delicious.com/onitz/facebook </li></ul>
- Any Questions? <ul><li>Olaf Nitz </li></ul><ul><li>Web & Blog: http://olafnitz.net </li></ul><ul><li>Email: mail (at) olafnitz.net </li></ul><ul><li>Skype: onitz1605 </li></ul><ul><li>Facebook: http://www.facebook.com/onitz </li></ul><ul><li>LinkedIn: http://www.linkedin.com/in/onitz </li></ul><ul><li>Twitter: http://twitter.com/onitz </li></ul><ul><li>Delicious: http://delicious.com/onitz </li></ul><ul><li>If you want to have a PDF version of this guide, send me an email! </li></ul>
Login to see the comments