Custom facebook opt-in FBML Fan-Page

Slide 1: 

Custom Opt-In Fan Page on Face Book (tutorial) 3/11/2010

Creating a Fan Page : 

Creating a Fan Page 3/11/2010 Must be a Face Book Member Go to the Developer’s Link (footer of page) Click Pages then Create Page

Creating Your Profile Image : 

Creating Your Profile Image 3/11/2010 Click on the edit Image tab (on image) Click upload picture from computer Make sure picture is between 200px in width to be safe keep it around 176px , The length that works for me is under 4’’ but I’ve seen larger Facebook’s Picture System, Facebook automaticlly squares pictures when loaded so if you can keep a picture close to a square and under 200px it should upload

Create Your FBML page : 

Create Your FBML page 3/11/2010 FBML(Face Book Markup Language) FBML allows you to upload code into your fan page, such as HTML, Javascript, iframes, and flash. Search: STATIC FBML inside of facebook Click on the first Icon This is a Face book App and has over 41million users Open App

ADD FBML to Fan Page : 

ADD FBML to Fan Page 3/11/2010 Next,CLICK ADD TO PAGE Then ,Select which “FAN PAGE” to add it to

Customizing the FBML : 

Customizing the FBML 3/11/2010 Go to the Fan Page with added FBML Click on Edit Page Click on the Application Settings of the <FBML>

Add the Tab Option : 

Add the Tab Option 3/11/2010 Click “Add” Tab “NOT BOX” then click okay “CORRECT” Click

Creating the Custom FBML (opt-in)page : 

Creating the Custom FBML (opt-in)page 3/11/2010 You can use HTML and other formats as FBML Here’ is a Simple Opt-In Form code <form action="MAILTO:YOUR_EMAILADDRESS_HERE" method="post" enctype="text/plain"> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <center><h3>YOUR_OPT-IN_PAGE_TITTLE_HERE<h3> Name:<br /> <input type="text" name="name" value="" /> <br /> Email:<br /> <input type="text" name="email" value="" /> <br /> Topic:<br /> <input type="text" name="comment" value="" size="20" /> <br /><br /> <input type="submit" value="Send"> <input type="reset" value="Reset"> <center/></form> Only Enter the email were you would like all fan messages sent example: myemail@jmail.com

Creating the Custom FBML(opt-in) : 

Creating the Custom FBML(opt-in) 3/11/2010 The Simple Code Renders this on your opt-in Page

TEST and GET Codes : 

TEST and GET Codes 3/11/2010 To Get More Codes and Examples go-to http://www.w3schools.com/ To test Codes go to: http://developers.facebook.com/tools.php?fbml Enter Your Code in to the Blank box on the left, Then Click Preview to see the Rendering in the Right Box Once You are satisfied with your Codes go back to the Fan Page then Click “Edit Page” Next Click Edit “FBML”

Customizing FBML : 

Customizing FBML 3/11/2010 You will see this screen BOX TITLE: is What You want the Name of the custom Tab to say such as (Welcome )or (Become a Fan) FBML: This is where you will be inserting your code

Entering FBML : 

Entering FBML 3/11/2010 Enter Your Code in to the FBML Space: <form action="MAILTO:YOUR_EMAILADDRESS_HERE" method="post" enctype="text/plain"> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <center><h3>YOUR_OPT-IN_PAGE_TITTLE_HERE<h3> Name:<br /> <input type="text" name="name" value="" /> <br /> Email:<br /> <input type="text" name="email" value="" /> <br /> Topic:<br /> <input type="text" name="comment" value="" size="20" /> <br /><br /> <input type="submit" value="Send"> <input type="reset" value="Reset"> <center/></form> Click: “SAVE CHANGES”

Viewing the New FBML : 

Viewing the New FBML 3/11/2010 Go Back to the Fan Page and Click on the + TAB to select the New Page CLICK & HOLD The TAB TO DRAG TO ANY SPOT on your Page

Make FBML a Landing Page : 

Make FBML a Landing Page 3/11/2010 Click on Options Click on Settings Under View Settings Change Default Landing Page to your FBML page

Thank You! : 

Thank You! 3/11/2010 If you need any more help just visit me at www.jamelbomar.com or facebook or twitter or linked in…. LOL 