Facebook changes. A lot. So this blog post is a little outdated. Go here, for the most up-to-date instructions and troubleshooting advice.
Now that you’ve set up your Facebook fan page, you’re thinking, “wouldn’t 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 started.
To begin, you need to make sure that you have two things: 1. a Facebook fan page, and 2. the HTML code from MailChimp that allows you to embed your sign-up form on a web page.
Step 1. Grab your MailChimp list’s embed code
In your MailChimp Dashboard, click on the Lists tab. Then click on “forms” for the list that you want the subscribes to go to.
Then you’ll select “integration code” from the top menu, which will present you with a link to the Signup Form Embed Code. From here, you’ll simply want to copy the embed code and paste it into TextEdit or NotePad.
Step 2. Add the Static FBML Application
FBML stands for Facebook Markup Language. At its core, FBML allows you to embed your application in the Facebook platform. It isn’t quite HTML, but it isn’t quite proprietary either. (Jesse Farmer provides a great introduction to FBML if you’re interested in reading more.) The easiest way to add the application is to search for “Static FBML” using the upper right hand search box on Facebook. It’ll show up as the second search result, and you need to click on “add to page”.
Step 3. Create the Newsletter Signup Tab
Navigate back over to your fan page and select “edit page” from right below your profile picture.
Scroll down to find FBML in your list of applications, and click on the little pencil icon to edit it.
In “Box Title” you can give the tab a name like “Email Signup” or “Newsletter”. Then in the “FBML” section, you’ll paste in the embed code that you copied from MailChimp in Step 1. It’s easy to style your form using basic HTML to give it a look and feel that matches your brand. One suggestion that Return on Subscriber makes (and we agree with wholeheartedly) is adding the following customization:
<form method=”post” action=”http://url.com” TARGET=”_blank”>
at the end of the url to open a new browser tab or window. This is nice thing to do for your user so they can easily find their way back to the page they were originally browsing.
Step 4. Add a New Tab to Your Fan Page Top Navigation Bar
Go back to your fan page and select “edit page” from directly below your profile picture. Then scroll down to find FBML in your list of applications, and click on the little pencil icon to edit it once again. This time you want to select “Application Settings”.
From the Application Settings, you’ll have the option to select whether you want your signup form to appear as a box (in the manner of Fans, Notes, or Favorite Pages), a top navigation tab, or both. As you can see on the MailChimp Fan Page, we have our signup form set up as both a box and a tab. This is a matter of individual preference and will not affect the functionality of the form.
And that’s it! If you have questions, thoughts or suggestions on innovative ways to use this, please leave a comment and let us know!
Great step-by-step!
Guys,
I cam across your website yesterday via an ad you have over on searchenginejournal.com and can I just say; I haven’t even even signed up yet, but will be taking full advantage of your products any day now.
I literally cannot wait to get started.
Oh and btw, whoever developed the mailchimp.com brand and the marketing of the website. Clever peeps, I’m literally in love right now!
Bests,
@omfg_followme
@weleadmedia
Thanks for the tip Amanda. We’ve done this now for our MODx page: http://bit.ly/nwcn5
Got it in a tab, but can’t seem to get it to show in a box… any tips?
@Andrew: Did you check that a “boxes” tab was created, and that your newsletter box is there? If so, you should be able to click on the little pencil icon which gives you the option to add that box to the main fan page.
If that doesn’t work, the original article suggests adding another instance of the FBML application. Apparently this solved the problem for some folks.
@Amanda: Not sure what I did with the “Boxes” tab, but clicked a few times around and now it is in a box on the left side. Thanks!
On the forms tab, I have”For your website” instead of “integration code”. Could this be because I’ve already created a sign up form for my website?
P.S. You’re missing the “n” in “notify” on the checkbox to “notify me of followup comments…” when posting comments
I’m not seeing the “integration” tab either, but the code under the “for my website” seems to work alright even though the JavaScript tags are stripped out. I haven’t been able to thoroughly test it, but the email address does subscribe.
[...] MailChimp und CampaignMonitor taten dieses Beispiel für ihre Kunden nach. Nico Zorn bietet die Möglichkeit [...]
We were able to get this up and running, but could use a little more help. I am not quite understanding how and where to use the following:
Is this at the end of the entire embed code or somewhere else inside of the code?
Can I apply Static FBML to a Facebook ‘Group’? I tried and it does not seem to work (nothing is listed on add Static FBML menu). Any suggestions how I can set up a sign up button on the Group page?
[...] Mail Chimp blog post details adding a newsletter subscribe form to your facebook [...]
Done!
http://www.facebook.com/cuteashell
Erick,
Is your Facebook a ‘group’, or is it a fans page? Any way I can add Sign Up to a Group page? If not, is it feasible to convert Group to a page format that can accept the sign up form?
@Dan: Groups and Fan Pages are two completely separate animals. You won’t be able to add a signup form to your Group because you can’t install the FBML application for it. There is no way (that I’m aware of) for you to convert a Group to a Fan Page.
Is there any way to add an FBML box to a regular Facebook profile, not a fan page? I already put on on the fan page, but at the moment, it’s getting no traffic. My main Facebook profile is seen by over a thousand pairs of eyes.
Yeah! That is what I am trying to figure out as well!
This is great! I am not very experienced in using FBML, but added a newsletter tab without any trouble. Mailchimp is fantastic!
Tabitha
@Crystal – looks like at the moment, you are only able to add the FBML application to Pages.
I wonder if there is a legitimate reason why.
Thanks MailChimp! I dread this sort of stuff and you made it fast & easy!!
Thanks for the post. Facebook is such a pain! I’m having two problems.
1. I have designed a custom form and saved the changes. When I go to grab the embed code, it reverts to the default box. My logo isn’t showing up, or the custom text. It is showing the custom header background color. What’s up with that?
2. I have added the box to both the page profile (wall sidebar) and the tabs, but it only shows up in tabs. Have checked and rechecked settings. Arrghhh!
I really hate facebook. Can you help? Thanks!
P.S. The first time I set this up, it worked great. Showed up in the right place on the sidebar. I decided to customize the form design so I removed the first box. Now I can’t get any box to show up on the facebook sidebar.
Here is the page I’m working on:
http://www.facebook.com/pages/SURFPET-Products-for-Pets-on-the-Go/113748938323
[...] Adding a Newsletter Subscribe Form to Your Facebook Fan Page (mailchimp.com) [...]
[...] Adding a Newsletter Subscribe Form to Your Facebook Fan Page (mailchimp.com) [...]
nice and thanks for the heads up!
As usual excellent help and advice from the Chimp pool
Keep up the good work
Banana on its way
:)
[...] Mail Chimp blog post details adding a newsletter subscribe form to your facebook [...]
Took some tinkering to get it to look exactly the way I want but it’s done. Mine is in the right rail of the FB page with all of my other social networking sites.
http://www.facebook.com/lessless
Still in development and thanks Mailchimp for being so awesome :) I tell all my clients to use you..
Spent so much time trying to develop an FBML or HTML code for our STELLAA Facebook Fan page… but thanks to this post, it was a breeze! Thanks!
I want to place a Salesforce.com web-to-lead form in a Static FBML tab on my company’s Facebook fan page. I already have the working code — it’s the same code that we currently use on our website. However, when I save the code into the Static FMBL edit box, the resulting tab is empty. My best guess is that Static FBML does support Javascript. Do you know of any FBML workarounds so I can get my code/form will work?
This tutorial was very easy to follow and it seems like this will be a helpful feature for our facebook page:
http://www.facebook.com/ruthtaubman
However, when I tested out the form, it successfully added a subscriber to my list on MailChimp, but I never received an email notification that I had a new subscriber, even though I’m set up to receive them in my list settings. Is this not an option if someone signs up via Facebook?
Is it possible to make this newsletter tab the default tab when someone goes to the page link?
Yep – Go in to ‘Edit Page’ > ‘Wall Settings’ and select from ‘Default landing tab for everyone else:’
The 1, Integration code is called “for your website” nowadays, in case you’re searching.
That was the easiest, most impressive tool. It only adds another opportunity for my fans and members to interact! Love it!
Hi Guys,
Earlier even I was facing the same problem of adding a Email Subscription as both “the Tab” and “the Box”. I tried doing through the edit options mentioned aboved but didnt worked out !!
I would suggest the following steps:
Use different forms for tab and box because of the CSS layout. You can add more graphics and images and whatever you need to the form which would appear as Tab but for box add/create another FBML application and then just add the form code and further modify it as per your needs.
Also, Once you are done adding the form to tab then go to the “BOXES” tab and over there you will see all the custom/additional FBML tabs you have created and on the extreme left of each tab you will have an option like “Edit Box” under that it has got “Move to Wall Tab”. Once you select that, the respective box will appear on your wall page !!
Also, be patient since sometimes it takes time to get live !!
This way it worked for me ;))
Hope that helps others !!
http://www.facebook.com/pages/Finns-Finds/115472881814501?v=app_4949752878&ref=ts
Just to add few update !!
I have used the mailchimp form for Newsletter/Email Subscription !!
The html/css code for the “Box” would be sort of subset of the html/css code for the “Tab”
thanks so much for this, even a non tech newbie like me managed to ‘get er done!’
I have done as instructed but cannot for the life of me get the sign up box to appear as a box down the side (where fans box is). The page is http://www.facebook.com/happycowbelts
Any ideas?
Hi Justin,
First off reduce the width of the form container, I guess 200px is the max-width.
Once done
On the box page:
http://www.facebook.com/happycowbelts#!/happycowbelts?v=box_3
On the extreme right of the Special Offers Mailing List form “tab” :on the extreme right of that tab you will have an option like “Edit Box” under that it has got “Move to Wall Tab”. Once you select that, the respective box will appear on your wall page !!
Hope this helps !!
Hi, I cannot add static FBML – I use a personal profile, which is the admin of a fan page. When I go to the bottom of my fan page there is the tiny static fmbl symbol under “more applications” but everytime i click on it I am transferred to my personal profile. Same result when using the search for applications … please help!!!
You need to add/activate/asign static fbml application to that particular fan page !!
then only you will be able to proceed further !!
I`m trying to make a custom facebook email page with picture and everything but i have a problem.
Is there a way when i make the form and someone subscribe through it to keep him on facebook .. now i have set a thank you page and instead of sending the guy to an external thank you page i do it within facebook … but can I have in the SAME window or tab? Now it`s working almost prefectly but loading in new tab
In my opinion you can do it through javascript !!
Hi there where does one place the into the fbml facebook code?
so people can be directed back to the fanpage? please ..
Hi Matt,
Could you be more specific ??
You need help adding static fbml code ??
OR
need help making the custom static fbml page as the landing page ?? So when a new visitor visits your fan page, he/she would see the custom static fbml page !!
I did pretty much the same here http://www.facebook.com/pages/aacelebscom/123409381025283?v=app_4949752878&ref=ts but you dont even leave the page .. yet you miss the “thank you” page but for me it was more important to have the people subscripe and never leave Facebook
First you set replace the url to go instead of “thank you” page to go to specific url ( you can grab the urls of specific tabs , also used for paid campaigns) then you set the target url in your code to be target=_self so people don`t leave the page.
That`s it .. not really so complicated
Facebook is getting rid of boxes for applications soon.. is this going to affect this form?
Hi there – I’m having an issue with an html form in a Static FBML tab.
My tab displays fine in IE and Chrome, but firefox is failing to display everything between the and tags.
Without redoing the whole thing are you aware of a workaround to make firefox display the code between those tags?
The page is here: http://www.facebook.com/pages/The-1-4-5s/153832507976409?v=app_4949752878&ref=sgm
And you want the welcome tab (should be the default landing page at the mo. Try viewing it in both IE/chrome and Firefox.
Hope you can help me out – this is driving me insane!
Cheers
Charlie
This doesn’t work anymore, right? I have an image in the header of my sign up form and a *|LIST:RECENT5|*
After pasting the integration code only the email address field showed up.
Thanks for any help!
Hey guys. This is all moot anyway as FB says they are doing away with tabs soon. I just got a notification on my page.
Is it just me or has Facebook changed the menus a lot compared to the way it is described above?
Anyway got the signup form working, but cannot add it to a box on the side. Where do I do that? Cannot see the box with the signup form on your own profile, MailChimp.
Thanks for an otherwise great product. You guys are a great inspiration for a digital marketing rookie like me.
You can’t add the subscribe form as a box– it’s not supported and Facebook is getting rid of Boxes altogether. This is why you don’t see it on the MailChimp page.
Thanks a lot, Amanda. That explains everything.
Cheers.
Thanks for the clear instructions.
This has been installed very easily indeed:
Spencer Ivy Electric Bikes: http://www.facebook.com/spencer.ivy.electric.bicycles
Cheers!
Is it possible to add a button to your facebook page that allows visitors to subscribe to your newsletter with the emailadres and other personal information that aleady is known by Facebook? So the subscribers won’t have to fill in an entire subscription form.
comments are appreciated!
You’d need to write an App to do that, as it would need to ask permission from the user to pull in that info.
[...] marketing super groovy and easy, is MailChimp, hands down. They have excellent instructions on how to create an email subscribe tab on your Facebook pages. Be sure to set-up a unique list, so you can track the effectiveness. This strategy has been [...]
I use 1shoppingcart not mailchimp for my database management, and I’m have a problem with my form codes. The actual opt-in box shows up on the FB page, but after you opt-in it goes to an error message. I’ve tried to place a redirect link back to the same FB page after the person opts in but now it doesn’t even take the opt in. Thoughts?
Really good tips there…………! thank you! Just one question – edit pencil doesn’t come up and can’t seem to find a way to get into the advanced setting of FBML to complete the last stage?
Hi
I’ve tried to use this guide but it is outdated, the page functionalities have changed and FBML has been deprecated. Please advise.
There’s a link at the top of this blog post pointing you to a more updated guide: http://kb.mailchimp.com/article/how-do-i-add-a-mailchimp-sign-up-form-to-my-facebook-fan-page
Hey guys, first of thank you for your amazing service. beenusing it for over a year now and loving it. I do have a small problem though. Benn trying to follow the tipps above and can’t make the FBML work. I am now using the iframe tabs app but what really hoping to embedd my signup form on top of my wall, so my fans could see the form as well as my posts when they link in. so you have anyideas on this? Thanks a million. Gido
wow, sorry for all the typos… should have re-read that. Hope you get the drift anyway…
Definitely got the gist of your message, and my recommendation is to contact our support team. There are a million little steps to do in the *exact* sequence described, and if you’re off by just a little, it won’t work. And our support team can help you pinpoint where the problem is.
Meantime, you might try these instructions:
http://kb.mailchimp.com/article/how-do-i-add-a-mailchimp-sign-up-form-to-my-facebook-fan-page
Hi, great instructions, it really helped me, but I have one problem and I am hoping You could solve it for me.
I was successfull in getting a form on my facebook page, but it does not show it in a way I designed it (wiht a picture and text above fields) – why does this happen and is there something I can do? Thank You! :)
[...] subscribers, try adding a newsletter signup form to your page. MailChimp users should follow this short tutorial, or check your email marketing provider for specific instructions. 5. Darren Bridges [...]
Thanks, I just started using mail chimp and it’s great, so many features to put to good use just not enough time in the day.
I just can’t get it to work. Followed all instructions, but nothing shows up on the tab, like I didn’t put any code at all! =/
Sorry you’re having some troubles, but in case you didn’t see it the most up to date instructions can be found here: http://eepurl.com/cRN4- If you’re still having troubles, you can find our support chimps here at mailchimp.com/support and they will help you out. Once you get up and running you might want to check out our “Let’s Get Social” guide http://eepurl.com/oCQ99 covering all kinds of other social media features we offer.
[...] una subscripcion a su newsletter . MailChimp explica como hacerlo usando FBML pero la mayoria de los porveedores de servicios de email mkt tienen [...]