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
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.
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.
There are tons of applications on Facebook from which I
selected a few which proved to be useful.
This guide is not exhaustive, but it can help you to create and
enhance your Facebook presence.
Agenda
5 Login, Create & Publish Page
13 Profile Picture & Page Description
17 Add Photos
25 Page Favourites
29 Vanity URLs
34 Custom Tabs with Text & Images
48 Video App
70 Youtube Player
81 Youtube Video Box
99 Twitter for Pages
109 Integration RSS / Blog
120 Create a simple App
137 Polls
147 Landingtab
151 About the Guide & the Author
STEP BY STEP GUIDE FOR CREATING FANCY FACEBOOK FAN PAGES BY OLAF NITZ
Login, Creating & Publishing a Page
GET STARTED
GETTING STARTED
Login
Username
http://www.facebook.com
GETTING STARTED
Create Page
http://www.facebook.com/home.php?
GETTING STARTED
Select „Pages“
http://www.facebook.com/advertising/
GETTING STARTED
Create Page
http://www.facebook.com/advertising/?pages
GETTING STARTED
Choose Category & Create Page
Features in
the Info-
Section
depend on
category
http://www.facebook.com/pages/create.php
GETTING STARTED
Result: New Fan Page

GETTING STARTED
Publish Page: Option 1

GETTING STARTED
Publish Page: Option 2

Profile Picture & Description
FIRST ADAPTATIONS
GETTING STARTED
Profile Picture
GETTING STARTED
Advanced Profile Picture

Canvas size:
200 px width;
Background:
Blue: Color #ECEFF4; 51px height; 200px width;
Grey Line: Color #E0E0E8;
GETTING STARTED
Page Description
Text and
Links
possible
Creating Albums, Uploading, Publishing
ADD PHOTOS
ADD PHOTOS
Create a Photo Album

ADD PHOTOS
Album Details
ADD PHOTOS
Loading Java
ADD PHOTOS
Select Photos
Non-Java / Simple HTML-

Upload also available
ADD PHOTOS
Upload Photos
ADD PHOTOS
Upload Successful
ADD PHOTOS
Publish Photos
Linking other Pages from your Fan Page,

Creating a Network of Fan Pages
PAGE FAVOURITES
PAGE FAVOURITES
Go to Fan Page & Add to Favourites

PAGE FAVOURITES
Select Page
PAGE FAVOURITES
Result: Favourite Pages

Creating Custom Short-URLs
VANITY URLS
VANITY URLS
Select Username for your Page
It is possible to
create Vanity URLs
for Fan Pages with
more than 50 fans.
http://www.facebook.com/username/
VANITY URLS
Choose Page
VANITY URLS
Choose Username
VANITY URLS
Result: Vanity URL

Adding your own Text & Graphics
CUSTOM TABS
CUSTOM TABS
Search App
CUSTOM TABS
Search FBML App
http://www.facebook.com/apps/directory.php
CUSTOM TABS
Select „Static FBML“

CUSTOM TABS
Add App to Page
http://www.facebook.com/apps/application.php?id=4949752878&ref=appd
CUSTOM TABS
Choose Page
CUSTOM TABS
Edit App
Edit Page
CUSTOM TABS
Insert HTML / FBML
Dos:
•HTML
•HTML forms
•Internal CSS
•outgoing links
•external images
Don‘ts:
•external Javascript
•external CSS
CUSTOM TABS
Option: Add another FBML Box

CUSTOM TABS
Edit App Settings

CUSTOM TABS
Add App to Tabs / Boxes

CUSTOM TABS
Arrange Tabs: Drag & Drop

CUSTOM TABS
Move App from Boxes to Wall Tab

CUSTOM TABS
Wall Tab: Result
Image
width:
200 Pixel
Uploading Videos,
Recording with your Webcam
VIDEO APP
VIDEO APP
App: Video  Add to Page
http://www.facebook.com/apps/application.php?id=2392950137
VIDEO APP
Choose Page  Add to Page

VIDEO APP
Edit Page Settings  Video Edit

VIDEO APP
Add Videos
VIDEO APP
Select file on your Computer

VIDEO APP
Agree to Terms of Service

VIDEO APP
Upload Video & Enter Info

VIDEO APP
Save Info
VIDEO APP
Video Processing
VIDEO APP
Result: Video
VIDEO APP
Result: Video
VIDEO APP
Result: Video
VIDEO APP: WEBCAM
Record Video from Webcam

VIDEO APP: WEBCAM
Settings Adobe Flash Player

VIDEO APP: WEBCAM
Close
VIDEO APP: WEBCAM
Record Video
VIDEO APP: WEBCAM
Record Video & Stop

VIDEO APP: WEBCAM
Save Video
VIDEO APP: WEBCAM
Save Video
VIDEO APP: WEBCAM
Enter Info & Save

VIDEO APP: WEBCAM
Result: Webcam Video

Adding a Video Playlist of Youtube Videos
YOUTUBE PLAYER
YOUTUBE PLAYER
App: Youtube Player
YOUTUBE PLAYER
Add App to your Page

YOUTUBE PLAYER
Edit Page  Edit

YOUTUBE PLAYER
Allow Access
YOUTUBE PLAYER
Add Videos
YOUTUBE PLAYER
Enter Videos & Save

YOUTUBE PLAYER
Edit Page  Application Settings

YOUTUBE PLAYER
Add Videos to Tabs

YOUTUBE PLAYER
Result  Arrange Tab

YOUTUBE PLAYER
Result: Youtube Player

Adding Youtube Videos
YOUTUBE VIDEO BOX

YOUTUBE VIDEO BOX
Add App to Page
YOUTUBE VIDEO BOX
Select Page
YOUTUBE VIDEO BOX
Edit Page  Edit Settings

YOUTUBE VIDEO BOX
Add Videos from Youtube

YOUTUBE VIDEO BOX
Add Youtube URL

YOUTUBE VIDEO BOX
Edit Details & Save Video

YOUTUBE VIDEO BOX
Back to Page Videos

YOUTUBE VIDEO BOX
Add another Video

YOUTUBE VIDEO BOX
Save URL
YOUTUBE VIDEO BOX
Edit Details & Save

YOUTUBE VIDEO BOX
Back to Page Videos

YOUTUBE VIDEO BOX
Page Videos
YOUTUBE VIDEO BOX
Edit Application Settings

YOUTUBE VIDEO BOX
Add App to Tab

YOUTUBE VIDEO BOX
Save Settings
YOUTUBE VIDEO BOX
Arrange Tabs
YOUTUBE VIDEO BOX
Result Youtube Video Box

Integrating your Tweets
TWITTER FOR PAGES

TWITTER FOR PAGES
Choose Page
http://www.facebook.com/add.php?api_key=6f77619e603ca9b71b45f5cd105be888&pages
TWITTER FOR PAGES
Add App Twitter for Pages

TWITTER FOR PAGES
Enter Details & Select User

TWITTER FOR PAGES
Continue
TWITTER FOR PAGES
Edit Page  App. Settings

TWITTER FOR PAGES
Add Tab
TWITTER FOR PAGES
Add Tab & Save

TWITTER FOR PAGES
Arrange Tabs  Drag & Drop

TWITTER FOR PAGES
Result: Twitter for Pages

Integrating a Blog
RSS / BLOG
RSS / BLOG
App Social RSS: Add to my Page
RSS / BLOG
Add App to Page

RSS / BLOG
Edit Page  Edit Social RSS

RSS / BLOG
Add RSS Feed

RSS / BLOG
Updating…
RSS / BLOG
Feeds Updated
RSS / BLOG
Add Tab: Application Settings

RSS / BLOG
Add Tab
RSS / BLOG
Add Tab & Save

RSS / BLOG
Result: Blogpostings in Tab

Content from a Website on Facebook
CREATING A SIMPLE APP

Creating Content: PHP Code

• Example: Including Twitter via RSS
• Upload PHP-File to a Server
<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\[(.*)\]\]\\><\/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

Set Up New Application
http://www.facebook.com/developers/
Choose Application Name
http://www.facebook.com/developers/createapp.php
Basic Settings
Authentication: Enable
Installable Facebook Pages
Canvas: Add Canvas Page URL

Result & Edit Settings

Add Tab Information
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
Add App to Page

Add App to Page

Edit Page: Application Settings

Add App to Tab (1)

Add App to Tab (2)

Result: External Content

POLLS
Application Poll
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
Seding the user to a specific tab
LANDINGTAB
LANDINGTAB
Edit Page  Wall Settings

LANDINGTAB
Select Default Tab for Non-Fans
Fans will be sent

to the wall by
default. This
setting only applies
to non-fans.
LANDINGTAB
Select Tab
Final Things
ABOUT & CONTACT

About this Document
This document was created by Olaf Nitz and is published under a Creative
Commons License.
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.
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.
Facebook Bookmarks: http://delicious.com/onitz/facebook

Any Questions?
• Olaf Nitz
• Web & Blog: http://olafnitz.net
• Email: mail (at) olafnitz.net
• Skype: onitz1605
• Facebook: http://www.facebook.com/onitz
• LinkedIn: http://www.linkedin.com/in/onitz
• Twitter: http://twitter.com/onitz
• Delicious: http://delicious.com/onitz
If you want to have a PDF version of this guide,

send me an email!

Fancy Facebook Fan Pages - A Step by Step Guide

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Fancy Facebook Fan Pages - A Step by Step Guide

Uploaded by

Copyright:

Available Formats

Step by Step Guide for Creating

Login, Creating & Publishing a Page

Choose Category & Create Page

Result: New Fan Page

Publish Page: Option 1

Publish Page: Option 2

Profile Picture & Description

Advanced Profile Picture

Creating Albums, Uploading, Publishing

Create a Photo Album

Non-Java / Simple HTML-

Linking other Pages from your Fan Page,

Go to Fan Page & Add to Favourites

Result: Favourite Pages

Creating Custom Short-URLs

Select Username for your Page

Result: Vanity URL

Adding your own Text & Graphics

Search FBML App

Select „Static FBML“

Add App to Page

Insert HTML / FBML

Option: Add another FBML Box

Edit App Settings

Add App to Tabs / Boxes

Arrange Tabs: Drag & Drop

Move App from Boxes to Wall Tab

Wall Tab: Result

App: Video  Add to Page

Choose Page  Add to Page

Edit Page Settings  Video Edit

Select file on your Computer

Agree to Terms of Service

Upload Video & Enter Info

Record Video from Webcam

Settings Adobe Flash Player

Record Video & Stop

Enter Info & Save

Result: Webcam Video

Adding a Video Playlist of Youtube Videos

App: Youtube Player

Add App to your Page

Edit Page  Edit

Enter Videos & Save

Edit Page  Application Settings

Add Videos to Tabs

Result  Arrange Tab

Result: Youtube Player

Adding Youtube Videos

YOUTUBE VIDEO BOX

Add App to Page

Edit Page  Edit Settings

Add Videos from Youtube

Add Youtube URL

Edit Details & Save Video

Back to Page Videos

Add another Video

Edit Details & Save

Back to Page Videos

Edit Application Settings

Add App to Tab

Result Youtube Video Box

Integrating your Tweets

TWITTER FOR PAGES