Free top-notch FBML/HTML templates for nonprofits, charities and foundations. Use them in your custom Facebook Page to increase your reach, exposure and build a strong community. On this post, I will show you, step-by-step, how to implement them!
On my last post “How to Create a Custom Tab For Your Facebook Page,” I talked about the importance of personalizing your Facebook Page. In that post I also showed you how to set up the FBML application and how to create and add a new custom tab to your Page.
Now that you know how to set up a custom page, let’s take a look at some FBML/HTML templates you can use to increase your reach and exposure. I selected these templates with nonprofits, charities and foundations in mind. And yes, all the templates are top-notch. So, what are you waiting for? Copy the code of the ones you like and use it on your custom tabs.
You can see a demo of all templates featured in this post at the Facebook Page of Social Media 4 Nonprofits.
1. “Invite Your Friends” Template
This is word-of-mouth as its best. It’s peer-to-peer communication. Think of this template as an invitation interface where users can invite their friends to visit your page. Remember, users are more compelled to explore a cause or make a donation when their friends are already connected to it. A good place to put this “Invite a Friend” template might be under a “Spread the Word” or “Get Involved” tab.
Updated on August 29, 2010
Below is the exact code that I have on Social Media 4 Nonprofits‘ fan page on Facebook. The code below fixes issues regarding size.
Instructions: Copy and paste the code below into an FBML tab and replace my fan pge and URLs with the actual name and URL of your organization.
<div style="margin-left:-5px;"> <fb:request-form method="post" action="http://facebook.com/socialmedia4nonprofits" type="Social Media 4 Nonprofits" invite="true" content="Join Social Media 4 Nonprofits Fan Page"> <fb:req-choice url='http://www.facebook.com/socialmedia4nonprofits?v=app_7146470109' ' label='Check It Out' /> ">/> <fb:multi-friend-selector actiontext="Join Social Media 4 Nonprofit Fan Page" showborder="true" rows="3" cols="3" /> > </fb:request-form> </div>
2. Dialog Window
If your organization has a holiday catalog, this template comes in very handy. Instead of crowding all the information onto one long page, you can use dialog windows to provide more information about each item. The advantage of using dialog windows is that users do not have to navigate to other pages or websites. They can do everything within your Facebook Page as dialog windows support images, tables, links and text. Remember, your custom pages should be sleek and to the point. Pages with tons of text and information should be avoided.
<!-- FBML LINK --> <a href="#" clicktoshowdialog="dialog">[NAME OF LINK]</a> <!-- END FBML DIALOG LINK --> <!-- FBML DIALO --> <fb:dialog id="dialog"> <fb:dialog-title>INSERT DIALOG TITLE</fb:dialog-title> <fb:dialog-content> INSERT HTML CONTENT <fb:dialog-button type="submit" value="Close" close_dialog=true /> </fb:dialog-content> </fb:dialog> <!-- END FBML DIALOG -->
3. Text Links (HTML)
Use this code on a FBML box and put it on your wall (as seen in the picture above). Links are a great way to encourage visitors to your website, blog or Twitter account.
<!-- TEXT LINK -->
<style type="text/css">
.un-links a {
display: inline-block;
padding: 4px;
outline:0;
color: #3a599d;
}
.un-links a:hover {
background: #3a599d;
text-decoration: none;
color: #fff;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
}
</style>
<div class="un-links">
<a href="http://www.rositacortez.com" target="_blank">[TITLE OF YOUR LINK]</a><br />
<a href="http://www.facebook.com/socialmedia4nonprofits" target="_blank">Social Media 4 Nonprofits on Facebook</a><br /> <a
href="http://www.facebook.com" target="_blank">facebook</a>
</div>
<!-- END TEXT LINK -->
4. Gallery Template (HTML)
Do you want to create a photo gallery highlighting a special event? With this template you are no longer limited to uploading your photos to your photos tab. You can make your own sleek-looking gallery!
Instructions: replace [YOUR PICTURE URL] with the actual URL of your pictures (ex. http://www.rositacortez.com/images/fbml_templates/socialmedia1.png). The template requires 2 versions of the same picture (one full size and one thumbnail). Full size pictures are 300 x 300 px. Thumbnails are 129 x 129 px.
<!-- set the divs for the fullsize images --> <div id="image1"> <img src="[YOUR PICTURE URL]"/> </div> <div id="image2" style="display: none;"> <img src="[YOUR PICTURE URL]"/> </div> <div id="image3" style="display: none;"> <img src="[YOUR PICTURE URL]"/> </div> <div id="image4" style="display: none;"> <img src="[YOUR PICTURE URL]"/><br /> </div> <!-- set up our thumbnails --> <a href="#" clicktoshow="image1" clicktohide="image2,image3,image4"> <img src="http://www.rositacortez.com/images/fbml_templates/socialmedia1_th.png"/> </a> <a href="#" clicktoshow="image2" clicktohide="image1,image3,image4"> <img src="[YOUR PICTURE URL]"/> </a> <a href="#" clicktoshow="image3" clicktohide="image1,image2,image4"> <img src="[YOUR PICTURE URL]"/> </a> <a href="#" clicktoshow="image4" clicktohide="image1,image2,image3"> <img src="[YOUR PICTURE URL]"/> </a>
5. YouTube Video Slide Show
Although it might look a bit intimidating, this template is easy to implement. I recommend that you download the image files accompanying this template and upload it to your own server. I am providing a folder (zip file) for your convenience.
These are the files you need to replace:
1- http://www.rositacortez.com/images/fbml_templates/video_background.png (video background graphic)
[Download file]
2- http://www.rositacortez.com/images/fbml_templates/video_skin3.png (video skin graphic)
[Download file]
Instructions: The above files don’t need any changes. They are both graphics. All you need to do is upload them to your own server and replace the code on the template with the new URL.
Next, upload your videos to YouTube. Once they are uploaded, look at the <embed> code and find your video ID. In the examples below, the video ID is in bold.
Example 1. http://www.youtube.com/v/ljc7X5zX1LE&hl=en_US&fs=1?rel=0
Example 2. http://www.youtube.com/watch?v=ljc7X5zX1LE
Example 3: http://www.youtube.com/watch?v=ljc7X5zX1LE&feature=player_embedded
Finally, once you know your video ID, go to the template and replace [INSERT YOUTUBE VIDEO ID] with your ID.
<!-- VIDEO SLIDESHOW -->
<style type="text/css">
.videobackground {
width: 661px;
height:241px;
clear:both;
padding-top: 15px;
padding-left:33px;
background: url(http://www.rositacortez.com/images/fbml_templates/video_background.png);
background-repeat: no-repeat;
}
.videoinframe {
width:600px;
height:180px;
overflow: auto;
}
.videorow {
width:1000px;
height:208px;
clear:both;
margin-bottom:5px;
padding-left: 5px;
padding-top: 5px;
background: url(http://www.rositacortez.com/images/fbml_templates/video_skin3.png);
background-repeat: repeat-x;
}
.video1 {
float:left;
width:190px;
margin-left:8px;
}
.videos { float:left; width:190px; margin-left:27px; padding-bottom: 5px;}
.clear { font-size: 1px; line-height: 1px; height: -1%; clear:both; }
</style>
<div class="videobackground">
<div class="videoinframe">
<div class="videorow">
<div class="video1">
<fb:swf
swfbgcolor="000000" imgstyle="border-width:3px; border-color:white;"
swfsrc= 'http://www.youtube.com/v/[INSERT YOUTUBE VIDEO ID]&hl=en_US&fs=1&autoplay=1'
waitforclick='false'
wmode='transparent'
imgsrc='http://img.youtube.com/vi/[INSERT YOUTUBE VIDEO ID]/2.jpg' width='190' height='145' />
</div>
<div class="videos">
<fb:swf
swfbgcolor="000000" imgstyle="border-width:3px; border-color:white;"
swfsrc='http://www.youtube.com/v/[INSERT YOUTUBE VIDEO ID]&hl=en_US&fs=1&autoplay=1'
imgsrc='http://img.youtube.com/vi/[INSERT YOUTUBE VIDEO ID]/2.jpg' width='190' height='145' />
</div>
<p class="clear"></p>
</div>
</div>
</div>
<!-- END VIDEO SLIDESHOW -->
I would be more than happy to answer any questions concerning the implementation of these FBML/HTML templates. If you find yourself stuck, drop me a tweet at @rositacortez and I will reply as soon as I can.
If you liked this post please help spread the word by joining the Social Media 4 Nonprofit community on Facebook.
65 Responses
hey rosita I can’t add the “Invite Your Friends” it says error just after invite people.. any ideas?
this is the page where i added it on recomiendanos
http://www.facebook.com/carolachaurero
sorry sorry sorry it’s not that one.. it’s this one
http://www.facebook.com/IdeasdeViajes
Hi Alfie,
I went to check your page, but I can not see it since we are not friends. Please accept my friend request, so that I can check it. Don’t worry, I will help you!
Hi Alfie,
I went to the page Idea de Viajes and the code is working. I actually sent the invitation to a few friends of mine.
I also send you an email to your gmail account.
Thanks Rosita! you can delete the second comment as it was a mistake and once again thanks for your help! great tips
Now available Free FBML Templates.
facebook page: http://www.facebook.com/pages/Facebook-Page-Templates/134401766587136
Excellent post, thank you very much Rosita! One of my favourites is the AmCross Facebook page and its FBML tabs. Have a look at http://www.facebook.com/redcross Keep up the good workd! Best /Isaac
We offer commercial-quality templates for designers & coders, at HyperArts, including the multi-subtabs / website-within-facebook tabs.
FYI, your templates all use the <style> tag to inline styles but this method is not working with IE 8 (of course). I’ve been advising folks to use external CSS exclusively, and I’ve written up a way to do this even if you don’t have access to a hosting server: http://bit.ly/d8gSsD
Thank you, Tim. Your advise regarding CSS and IE8 is well taken.
Hi Isaac,
Thanks for letting me know about the American Cross FB page. It is quite remarkable. Maybe I can look up the code and see if we can provide a FREE html template for nonprofits to use.
Rosita:
I like your tips on social media. I added your “Invite Your Friends” tab to my Facebook page, and could not get it to work. The code that I adopted from your template aboce is as follows:
<fb:request-form
method="post"
type=" [South American Vacations]"
invite="true"
content="Check out [South American Vacations] “>
Did I do everything correctly?
Your help would be greatly appreciated.
Rosita,
Great post! I implemented the “Invite Your Friends” template, but the new FB restrictions of 520 pixel width cut off the right side of the box. Is there a way to re-size the box to not cut off people?
Also–do you have a simple Welcome Page template? I have no coding experience and this would help tremendously.
There are also some premium designed facebook templates to you for FBML fanpage.
Please can u tell me Why I can not put pictures with Quality in my FBML code…it should be just about 11 Kb then it works..any help PLZZZ ???
Thanks Rosita! This is great, but for the “Invite Your friends” template, how do i get it to fit on the page properly? It seems to cut off the right hand side of the box. I noticed on your FB page that the box fits because there is no left hand information column. How did you do this?
Rosita -you are a wonderful resource! As a new nonprofit, I just wanted to tell you that I greatly appreciate this posting -you are totally awesome for sharing this!
same problem with “invite your friends” any suggestions on similar tab or what can i do?
Many thanks for the wonderful post. Very helpful! I have a problem with the new width on the pages that is causing the form to cut off on the right side. any idea how to fix this?
I used the code for “invite your friends” and the edge of it is cut off by the advertising therefore the ability to scroll is not there. Is there a way to increase size of the invite box?
thanks
To everybody asking how to change the width to 520px, I have kind of found the answer.
It’s not the form that’s stretching it out, it’s the multi-friend-selector, which defaults to 5 columns, if you add cols=”3″ it fits, but is a bit narrow, you may want to remove the border to make it not look narrow.
From the facebook page about the multi-friend-selector…
“The number of columns of friends to show in the multi-friend selector, which also determines the width of the invite box. The value must be one of: 2 (which sets the box to 368px wide), 3 (which sets it to 466px wide), or 5 (which sets it to 740px wide). Default value is 5″
I am getting the error when trying to send invites…can you help me out?
http://facebook.com/dealiocard
under the welcome tab
Hi,
Thanks for the code for the dialog box, but, is it possible to resize the box?
How to put information about size in the code?
[NAME OF LINK]
INSERT DIALOG TITLE
INSERT HTML CONTENT
?
Thank you, Jon.
I have posted a new updated code that fixes the issue regarding size. Please refer back to the post.
Errin,
I sent an email to you. Please check. Also the code above is new. It fixes all the issues.
Frosted,
I sent you an email with the new code. Please check.
Alfie,
Please take a look at the new, updated code. It fixes all issues.
Dear Rebeca,
I sent you an email to the address you provided. Also the code on this post have been updated. It fixes all issues. Please copy it and paste it on your FB fan page.
thanks rosita! very helpuful tool.
Hi Rosita,
great page, very helpful.
I have an issue with our invite friends tab. I use the multi-friend-selector (pretty much) exactly like you suggested above (of course I adapted).
It all works fine, until the very end when I get a new page saying
“Sorry, your request could not be processed.
Please try again”
I had the same issue with another fb-request form that I used.
Can you help? Thanks.
Bjoern
>
Great article. However, I cannot find a single MFS anywhere that actually works!
They all look great and appear to work. But I have not actually gotten a single invitation to any page out of dozens of attempts.
I am even discussing the big 1M plus pages that I have tried to send invitations to several of my profiles to test.
If anyone has a working MFS please post where it is located.
Thank You.
Hello,
Thank you for all this great information. I have tried the Invite Your Friends and also at end get: “Sorry, your request could not be processed. Please try again”
Any suggestions on how to fix this?
Thanks,
Jay
Hi Rosita,
love the blog post.
I cant get the code to work – i get the “error in processing” request message just when i have done everything and am expecting confirmation…
Pls help!!
cheers
Jody
Thanks for sharing but although you have updated the code for “invite your friends” template several times it is still not working. What could be the reason?
Hi Rosita
I have tried the Invite Your Friends and I also get the: “Sorry, your request could not be processed. Please try again” message ??
Any suggestions on how to fix this?
Hi Rosita,
Fantastic resource, thanks for post.
I’m having a problem with the dialog
When I put more than one dialog on a page the content from the first dialog appears in the second one?
Any ideas?
Ignore last post – I figured it – something a little silly as usual!
Hi Rosita
please help, invite friends not works.. just getting “Sorry, your request could not be processed.”
please send me the code
Thanks
Rosita, im not sure if you’ve answered this question yet but how do you put a picture into the dialogue window?
Also, im trying to put up several links to dialogue boxes on my FBML tab but every dialogue box that I put up had the same information as the first dialogue box. What im trying to do is create a company directory, if you will, that describes a little bit about each person. each person will have their own link to their personal dialogue box. sorry, i am new to this.
hi, I am using your templates, thank you very much. I am however having a problem.
when i send an invite the link box says:
Alan Devereux
Join British Business Group’s Fan Page
from Static FBML
how do I change the static FBML part?
thanks
If anyone can get this to work on an FBML tab:
-webkit-border-radius: 4px;
so that rounded corners work in Safari and Chrome, I’d love to see it. Facebook strips out that style rule. You can get around it using some FBJS, but that requires a user click to run so it’s not a real option.
Hi All,
Our Facebook Page (as opposed to our website) serves as the hub of our online presence, and is being developed as a true mashup implementation i.e. it includes YouTube-based video’s, Flickr-based pictures, tweets from Twitter, blog posts from Tumblr etc.
That being said, the (fan)page itself includes a fully-functional, embedded website, as well as integrated social media channels….all within just one (of the ten) Static FBML tabs that we can add to a Page. Needless to say, visitors first land on our “embedded” website, and from there they can switch back and forth – between our social media channels and the embedded website itself. All of our marketing material too has been changed to encourage people to visit us at our FB page (rather than our traditional .COM website).
We’ve also made use of social sharing and social bookmarking strategies to allow for our online sites to be spread far and wide.
Another thing you may notice is our consistent personal+corporate branding…which comprises of both a social badge (applied on all of our online sites, and listing all our URLs – amongst other things), and our corporate identity/colors.
Finally, we’re actually providing incentives for our visitors to both “Like” us, as well as to visit often….by providing both, discount coupons for our products and services, as well as regular posting of tips and tricks for Microsoft Office applications i.e. Word, Excel and PowerPoint. These (coupons and tips) will only be available to those who “Like” us.
Check out our Facebook page at:
http://www.SynergyIntegration.com/Facebook
Thanks,
Cyril Rose
Synergy Integration
this is great web site like a FBML online school..
keep it up
and thanks
Thanx a lot was searchin for it from a loooonf time
u Rock !!
nice post……!!!!!!!!!
do you have any idea in creating apps and adding it in our tabs.???
ive created a apps using the basic step only… but dont know how to include it in business page.
any examples?????? or tutorials like the one you posted here????
thanks in advance
thanks for your post.. it really saved me…..
The gallery template is not working for me.
When i click on the thumbnails the larger image does’nt come up.
pls help
so how do you move around a youtube video whats the code ive searched everywhere? hyper arts didn’t help me any answers would be great
Hey Rosita.. Thanks
Can u plz tell me how to give landing page name.
Such a great and helpful resource Rosita. Thankyou.
Hi Rosita
Thanks for sharing this great article. i tried this code but finally it says “Sorry, your request could not be processed.”
please send me the code
Thanks
@ Deene
Had the same problem with the dialogue windows showing same content.
Solution: Make sure to give each window a different “dialog id”
For example:
1st Window:
A
2nd Window
B
NOTICE: both “clicktoshowdialog” and “dialog id” need to be identical.
@ Deene
Had the same problem with the dialogue windows showing same content.
Solution: Make sure to give each window a different “dialog id”
For example:
1st Window:
2nd Window
NOTICE: both “clicktoshowdialog” and “dialog id” need to be identical.
Sorry bout that keeps activating my code.
1st Window:
clicktoshowdialog=”A”
fb:dialog id=”A”
2nd Window
clicktoshowdialog=”B”
fb:dialog id=”B”
NOTICE: both “clicktoshowdialog” and “dialog id” need to be identical.
Hi!
thanks for the great post!
I was wondering how to do to have more than 1 dialog box in a table?
Because I have 3 dialog boxes: 1 in each cell, but it’s only displaying the first dialog box content…
Can you help me to fix this?
Thanks
Mathieu
Thank you for sharing this helpful info. I also want share good resource where everyone can find good and free facebook templates:
We are pleased to provide a series of beautiful designer templates which, when added as a FBML page, create an amazing look for your Facebook account. With over 500Million users, Facebook and Social Media has a huge influence on all our lives, it is the way of the future. Businesses around the world are now joining in and creating a whole new feel for Marketing. A designer page will make you stand out from the crowd. Feel free to browse through our Free Facebook Templates and make your selection. They are easy to download and manipulate to create your own designer page on Facebook.
Free Facebook Templates – the best way to create your own facebook page.
Hi…I would like to ask as to why when i tried social media invite friends..my friends get the invite an asking them to accept..im following your codes and i manage to invite my friend…but the thing is the invite dont have any accept button but it has the static FBML button which when clicked will hide and ask whether u want to block the user or the apps
I tried to implement your invite your friends code on my Lucky Girl Contests Fan Page but when I try to test the invite – it gives me an error : Sorry, you have run out of requests to send with this application. Please try again tomorrow. I haven’t invited anyone yet… is the app working, is this normal? Does it limit you to 3 invites per day as it seems?Thanks so much for your code!!
Kristine
Hi Rosita,
great page, very helpful
How do i add multipule tabs to my page??
Hi Rosita,
I tried putting “Invite Your Friends” template in my facebook page but it seems not working even after I changed the URLs. etc. Can you help to check this for me?
http://www.facebook.com/singaporechurch
Here’s the code I pasted:
Thank you!!!
Hi Rosita,
Thanks for your great site – it is invaluable for non-profit organizations.
I am a volunteer at a not for profit cancer support charity group. I am new to social media and have the challenging task of maintaining the organization’s Facebook account. We are trying to expand our subscribers’ group and would like to add your ‘Include your friends’ template onto our fb page. We found your link to the FBML app only adds as a ‘favourite’ to our page and no editing. Also, it does not appear under ‘Apps’ on our edit page. Has the FBML app changed since your post? We would appreciate your advice.
Keep up your great work.
Thanks,
Julie
Hi Rosita, the Gallery Template does not work in iFrame tho it was working well in FBML. Pls convert the codes for iFrame HTML?
Thanks
i wanna make a gallery template but it’s doesn’t work on fbml
i uploaded the photos but it doesn’t appear in the same way as in this page help please ??
Hi Rosita,
Can’t able to invite friends, error: Sorry, you have run out of requests to send with this application. Please try again tomorrow.
http://www.facebook.com/therisinglofers
Please help me.