Add a Newsletter Opt-In Box to your Facebook Page
Jun 18 2009
In this post I will show you how to add a custom tab to your Facebook Fan Page using the Facebook Static FBML application. The process isn’t terribly complex, so buckle down for a few minutes and we’ll bust this out. A few things you’re going to need to get started – a Facebook Fan Page and HTML opt-in form code from your ESP.
Step 1 – Add the Static FBML Application
The Facebook Static FBML application gives you the ability to add advanced functionality to your Facebook Fan Page. This application will add a box to your Page in which you can render HTML or FBML (Facebook Markup Language) for enhanced Page customization. Installing the app is easy, but actually getting to the area where you edit can be a little tricky. When you add the app it will give you choices of which Page or Pages you want to add it to.
Step 2 – Creating the Facebook Opt-In Tab
After you have added the app, head to your Page and click on “Edit Page”. Locate FBML in your list of applications and click on the pencil icon to edit. In “Box Title” you can give the tab a name like “Email Signup” or “Newsletter”. In the “FBML” section, simply paste your form code in. You can style your form and imagery to give the Box some look and feel, similar to the car image I added in the example above.
One key customization I added to our code was <form method=”post” action=”http://url.com” TARGET=”_blank”> at the end of the url to open a new browser tab or a window so the user doesn’t lose their place on Facebook.
Step 3 – Add New Tab to Facebook Page Navigation
Where it shows “FBML” on the “Add a New Tab” drop down, will be the custom name you gave the new Box. If you are running out of room with your Tabs, you may need to scoot some things over to give your new Tab some visibility.
This App will also live on your “Boxes” tab in a condensed version, unless you go back to Edit Page > FBML Settings > Application Settings and remove it from the Box and just leave the Tab (which I recommend).
One last thing, if you have trouble getting the Box to appear as some have noted, simply “Add Another Box” and copy the exact same code in.
Step 4 – Try it in Action
Head on over to the eROI Facebook page to try this for yourself, and Become a Fan while you’re at it!
If you have any questions or make something really cool, please post a comment below!
Follow @AlexCWilliams on Twitter
- Posted by Alex Williams
- @alexcwilliams
- at 9:22 PM
Published in Facebook & Email Marketing, Opt-In and Opt-Out, Social Media Strategy
Tags: email marketing, Facebook, Facebook Opt-In Form, resources, social networking, tips
(9 votes, average: 4.56 out of 5)
Loading ...
June 19th, 2009 at 2:55 pm
Great post!
I tested this but unfortunately iframes don't work in these boxes? pretty strange as this is just clean html. Any ideas on that?
Thanks for the feedback!
Jelle
June 19th, 2009 at 10:12 pm
I looked into the iframe option initially, until I figured out that straight HTML works. I am looking at how to improve the process so some thank you messaging cab be provided inside the box now.
June 23rd, 2009 at 12:22 pm
[...] at the Return on Subscriber blog offers an excellent tutorial (complete with screenshots) that walks you through the [...]
June 23rd, 2009 at 2:09 pm
[...] Ajoutez un formulaire à vos pages Facebook : Pourquoi ne pas collecter des leads directement dans Facebook ? [...]
June 23rd, 2009 at 6:30 pm
[...] Add a Newsletter Opt-In Box to your Facebook Page | Return On Subscriber – Email Marketing Blog (tags: facebook e-mail marketing facebookpages) [...]
June 24th, 2009 at 6:20 am
I tried to make it work I can see my form in preview but it does not show up on my facebook page. Plus it would be really helpful if it was easier to find the facebook application as the link you have on the example above goes to your facebook page not the page where the application is. I have been trying to do this for 3 days no luck. thanks for trying to help but it is not easy. It should just be a drag and drop application where people can just dump there html code but so many people cannot get it to work.
June 24th, 2009 at 1:28 pm
This is great way of marketing online business.
June 24th, 2009 at 6:15 pm
how do you find the app on facebook?
June 24th, 2009 at 7:47 pm
When I try to add the app…I get a box for the pages…but nothing is listed in the box for me to select? How do I install the app?
June 24th, 2009 at 9:33 pm
Tried it but Javascript doesnt work, page comes up blank
June 25th, 2009 at 12:58 am
what is my ESP?
June 25th, 2009 at 7:10 am
http://www.facebook.com/apps/application.php?id=4...
June 25th, 2009 at 7:10 am
http://www.facebook.com/apps/application.php?id=4...
June 25th, 2009 at 7:11 am
http://www.facebook.com/apps/application.php?id=4...
June 25th, 2009 at 7:16 am
Your email service provider, who do you use to send?
June 25th, 2009 at 7:10 am
The application is located at http://www.facebook.com/apps/application.php?id=4... . You will need to authorize it to being the process.
June 25th, 2009 at 7:14 am
David, you would need to add some standard HTML code above your text copy. You can grab example code here – http://www.quackit.com/html/codes/html_picture_co...
June 25th, 2009 at 6:19 pm
Hey Alex – This was helpful! I successfully added a tab with an e-mail capture for my free e-course & ezine… but nothing shows up on my wall. Any clue what I need to do?
Thanks!
Lisa
June 25th, 2009 at 10:54 pm
For some reason when I try to add the static FBML, it brings up a window to select which page I want to add it to and there are "no results" found. Can anyone shed some light on what I might be doing wrong?
June 26th, 2009 at 12:48 am
You are not the only one! I have not been able to get it to work either. Can't figure out what the problem is. The note to just click "Add another box" if you're having trouble – where is that? Can't find such a link anywhere. I spent 2 hours on this – and I'm not a computer beginner – and ended up still with no opt-in form on my Facebook business page..
June 26th, 2009 at 12:51 am
I like the idea-wish I could get it to work. I found the app, installed it, pasted the HTML code from my aWeber form. Created my opt-in tab. Then, nothing. The tab is just blank. ???
June 26th, 2009 at 6:42 am
Hey Alex, I am trying to find code for the hidden info. people who join as fans can see it, but not non-fans. see theKbuzz as an example. (http://www.facebook.com/home.php?ref=home#/theKbu... any ideas?
thanks.
June 28th, 2009 at 6:47 pm
Thank you for the post. I successfully added two new tabs to my Facebook Fan Page. You might want to add in your instructions that people have to click on the Raw HTML code when they go into AWeber. With some tweaking on my end it worked well.
June 29th, 2009 at 5:31 pm
Same as sean. "No results found". I absolutely have a page, and it's tied to the personal profile I'm logged in with.
June 29th, 2009 at 4:07 pm
[...] El último paso será agregar dicha página al menú principal para hacerla visible. Para una descripción más detallada de cómo implementarlo, haz click en el siguiente link. [...]
July 1st, 2009 at 2:18 pm
[...] Add a Newsletter Opt-In Box to your Facebook Page In this post Alex shows us how to add a custom tab to your Facebook Fan Page using the Facebook Static FBML application – I tried adding one to my Email marketr's Club fan page and it was super easy! (tags: facebook list_growth) [...]
July 2nd, 2009 at 3:00 am
[...] This post was Twitted by mailchimp [...]
July 2nd, 2009 at 8:05 pm
Great! Excellent tutorial, as i attempt to follow the tutorial I can’t seem to find the "Static FBML" application
July 3rd, 2009 at 4:44 am
Hi! I have already added the FBML box to the tabs on the page… but is there any way to rename "FBML" into something else, like… "Sign Up Form"? IF so, then how?
Thanks!!! And thanks for the tips by the way!
Hope you can help!
July 3rd, 2009 at 10:32 am
I will give it a try. hopefully it will work. thanks
July 4th, 2009 at 7:03 am
[...] newsletter sign up box in your Facebook Page. Here’s a step-by-step video on how to do it. Also, Alex Williams has post a full tutorial on how to add an opt-in form to your Facebook [...]
July 6th, 2009 at 12:47 pm
Great tips! I will surely make a facebook fan page using your instructions above. Thanks!
July 8th, 2009 at 2:14 pm
[...] newsletter sign up box in your Facebook Page. Here’s a step-by-step video on how to do it. Also, Alex Williams has post a full tutorial on how to add an opt-in form to your Facebook [...]
July 9th, 2009 at 8:46 am
Hi Alex great content there. I'll try it on my fan page
July 9th, 2009 at 10:12 am
This is so cool! I haven't even thought of this possible! Great work! Thanks for sharing!
July 9th, 2009 at 2:16 pm
[...] it be great if I could get my fans to signup for my email newsletter?” Now you can! We found this tutorial from the Return on Subscriber blog extremely helpful in getting us [...]
July 10th, 2009 at 1:02 am
Is it the "Book Dave" section?
July 10th, 2009 at 1:03 am
The app is quirky. Tyr duplicating the form you made again, that seems to have worked for some.
July 10th, 2009 at 1:03 am
Have you set up a Facebook Fan Page?
July 10th, 2009 at 1:04 am
Try going into the FBML Applcation Settings on your "Edit Page" section and add to Boxes & or Wall
July 11th, 2009 at 2:12 pm
having the same problem – comes up blank after inserting javascript from aweber – have added another box and repeated but still blank
July 11th, 2009 at 8:57 pm
I tried following your steps, but at step 2 I was not able to edit anything and when I tried to move the box to the wall it just totally dissapeared.
July 12th, 2009 at 4:23 am
Page keep coming up blank after the windows ask me where do I won't to put the application. Please advise. . .
July 12th, 2009 at 10:39 pm
[...] 13, 2009 · Kommentar schreiben Alex Williams von der amerikanischen E-Mail-Agentur eROI zeigte vor einigen Wochen, wie Onlineformulare zur Newsletteranmeldung auch auf einer Facebook-Seite [...]
July 14th, 2009 at 10:55 am
but is the code i know how to put on the page but where is the code for it?
July 15th, 2009 at 1:41 am
I'm having the same problem. Heeeeeelllp!!!!
July 18th, 2009 at 5:24 pm
Thanks! Works great! Aweber users, make sure that you copy the Advanced HTML code, otherwise you will get a blank page.
July 23rd, 2009 at 12:19 am
Hi, where can I get the actual form code from?
July 23rd, 2009 at 3:25 am
thanks for this post… took a stab on it..and it worked! woot!
July 24th, 2009 at 12:38 pm
this is the worst set of instructions i ever seen! and I'm begining to think this is a set up to keep us from leaving aweber and going elsewhere..Lord knows the videos on google shows a much easier step by step plan that really works using a different autoresponder., after about doing these steps about 15 times, in a 4 hour period, now i am dissapointed with aweber. I wish aweber had just said it can't be done using aweber. I value my time a whole lot more than this…
July 24th, 2009 at 5:48 am
[...] opt-in to your newsletter that provides REI tips, news, and wholesale deals. There’s a great blog post from Return on Subscriber that walks you through [...]
July 24th, 2009 at 8:08 pm
Thanks a lot Lisa, after a lot and lot of patience I finally get it with your help and it WORKS, GREAT !
http://www.facebook.com/pages/edit/?id=7985773737...
July 24th, 2009 at 8:11 pm
Pour les francophones…Oui, après bien de tentatives, finallement, ça fonctionne !!!!
http://www.facebook.com/pages/edit/?id=7985773737...
July 25th, 2009 at 12:08 pm
Absolutely perfect post! So straight forward and easy to follow. My kinda instructions
Thanks for the help (I sure needed it lol)
July 25th, 2009 at 7:10 pm
What a great post! Simple and straight forward, sooo easy to follow! My kinda instructions. Thanks for the help (I sure needed it lol)
July 30th, 2009 at 11:01 am
hi,
my name is moses saw ur post on facebook form on the page,well its true.i will like to be ur friend.
August 2nd, 2009 at 6:12 pm
I tried all your steps – even my computer geek tried and we could not make it work. When we searched for the downloaded app on Facebook – we couldn't find it. Help! I think this is a great idea – so please help it to work. Thanks, Judith Auslander judith@wiseheartcoaching.com
August 3rd, 2009 at 12:20 am
Me too! Any tips? now I just have two blank boxes. I pulled the code straight from my Aweber form also?
August 5th, 2009 at 9:24 am
Is it possible to add an opt-in form for a face book group as well? It'll be great to add an opt-in form for a face book group.
August 6th, 2009 at 10:36 pm
What a great tip!!!! Not only added an opt-in page to all my clients' pages but I've used the application to make additional html pages. It can be a little picky as to how much html it will accept and it really doesn't like a lot of tables but for simple html it is great!
thanks for pointing this out to us!
August 7th, 2009 at 5:20 am
I'm trying to follow this using the promotion box code provided by Google groups. All I am getting is an image with a link, no textbox to input the email address and button to subscribe. It works fine on my website. Does static fbml not handle some of the tags in the code?
<table border=0 style="background-color: #fff; padding: 5px;" cellspacing=0>
<tr><td>
<img src="http://groups.google.com/intl/en/images/logos/groups_logo_sm.gif"
height=30 width=140 alt="Google Groups">
</td></tr>
<tr><td style="padding-left: 5px">
Subscribe to U of L Crusade
</td></tr>
<form action="http://groups.google.com/group/UofLCru/boxsubscribe">
<input type=hidden name="hl" value="en">
<tr><td style="padding-left: 5px;">
Email: <input type=text name=email>
<input type=submit name="sub" value="Subscribe">
</td></tr>
</form>
<tr><td align=right>
Visit this group
</td></tr>
</table>
August 18th, 2009 at 12:50 am
What i did to resolve the saving problem is the following,
1. Install
2. Go to edit your page
3. Edit FBML – FBML
4. On the bottom click on "Add another FBML box"
5. Edit the new one
6. Save
7. Add tab onto page
8. Enjoy!
August 18th, 2009 at 4:25 pm
[...] Super sign up system: build a list the easy way :Ebooks Made EasyOrganize Your Fitness: How To Create A Super-Simple Interval Training Playlist | Get Organized WizardSuper Affiliate Magnet » Blog Archive » Discover How to Use 2-tier Affiliate Program to Boost your Affiliate Commission Today!MITSUBISHI CHARIOT GRANDIS-SUPER EXCEED FOR SALE « Get More InfoGossard Super Boost Satin Plunge – ReviewAdd a Newsletter Opt-In Box to your Facebook Page | Return On Subscriber – Email Marketing Blog [...]
August 21st, 2009 at 12:50 pm
Same problem here. The code works fine in dreamweaver, but all I get is the title and a blank page in Facebook. I've even stripped everything out and tried just my logo and a link (no email signup form) and this still produces a blank page.
August 24th, 2009 at 8:56 pm
We're trying to post an image that is 700 px's wide but once it's loaded and we look at it on our facebook page…it comes up as 500 px's (default?) setting.
We need it to be 700 px wide…what's the trick
ALSO…how do we have change the "Wall page" to be the custom one?
September 8th, 2009 at 9:18 pm
This is great1 It worked perfectly for me.
Thanks Alot!
September 14th, 2009 at 1:27 am
Is this tutorial and app just for a Facebook Fan page or any regular Facebook page? Is a fan the same thing as a friend in this tutorial? Thanks.
September 25th, 2009 at 2:47 am
[...] To set up an email opt-in on your Facebook page, follow this tutorial from Alex Williams on eROI’s Return on Subscriber blog. [...]
November 16th, 2009 at 1:25 pm
[...] for the inspiration, returnonsubscriber! [...]
November 21st, 2009 at 11:34 pm
This was such a life saver. Thank you soo much for sharing. I've got it working. How did you add the imagery?
December 9th, 2009 at 11:25 pm
Great idea! I implemented it and it works flawlessly. A nice and easy way to bypass paying sites like Involver or Wildfire when all you need is a simple form! Thanks again.
December 24th, 2009 at 3:43 pm
Does this work only with FB Fans page, or will it also work with FB Group page?
January 27th, 2010 at 12:59 pm
Hi! I Have created my fan page,I want to add my FBML app in my custom tab.Is there any way to get this implemented?
February 18th, 2010 at 2:52 am
Hey Alex, I am trying to do exactly this with a google doc. For some reason it will not embed (I am using the embed code). I suspect that it has something to do with it being iframe. Any suggestions? Here is the code below
THANKS!
<iframe src="https://spreadsheets.google.com/embeddedform?formkey=dFg4MVNJMDlXUEhFRmlYSGlNX1pZNHc6MA" width="760" height="627" frameborder="0" marginheight="0" marginwidth="0">Loading…</iframe>
March 10th, 2010 at 4:19 am
Great tip! I added my opt in to my FB Fan page with little to no error! Thanks again for sharing!
May 7th, 2010 at 1:24 am
OK, I get it and have done what you've said here; however, when you go to my fan page and my "Email Signup" default landing page, there's nothing there. I clicked on "edit page" under my fan page avatar, clicked edit under "Email Signup – FBML" and cut and pasted the template HTML into the FBML box, click "Save Changes" but when I go to the "Email Signup" tab on my fan page, it's blank. Any ideas?
May 18th, 2010 at 5:02 am
All of this is easy to et up, the ONLY part we need is the form code….. that is all. thanks
May 26th, 2010 at 4:26 am
I instaled the app, but when i press the pencil to edit there is no options but remove form tab
May 31st, 2010 at 4:21 pm
OK, I get it and have done what you've said here; however, when you go to my fan page and my “Email Signup” default landing page, there's nothing there. I clicked on “edit page” under my fan page avatar, clicked edit under “Email Signup – FBML” and cut and pasted the template HTML into the FBML box, click “Save Changes” but when I go to the “Email Signup” tab on my fan page, it's blank. Any ideas?
June 5th, 2010 at 10:50 pm
I am looking to add the newsletter on facebook just like the one on the whole foods sit. Any suggestions how they got it to the left of the page. Thanks.
http://www.facebook.com/wholefoods
June 7th, 2010 at 7:32 am
I, too, am having problems. The code is there, but nothing shows up on the 'tab' page. I have created several new FBML boxes, but to no avail.
August 9th, 2010 at 2:11 pm
Where can I find HTML code for a newsletter signup with a space for email AND name? I have only found code for someone to put in their email only, but I need to be able to identify the person. Thanks!