5 Must-Have FBML Templates for Your Facebook Page ~ Hacking Freaks

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.

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.

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://www.facebook.com/hackingfreaks1" type="www.HackingFreaks.in" invite="true" content="Join Hacking Freaks Fan Page">
<fb:req-choice url='http://www.facebook.com/hackingfreaks1?v=app_7146470109' ' label='Check It Out' /> "
<fb:multi-friend-selector actiontext="Join Hackingfreaks.in 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 -->
ALOG TITLE</fb:dialog-t<fb:dialog id="dialog">
<fb:dialog-title>INSERT D
Iitle>
<fb:dialog-content>
INSERT HTML CONTENT
lose_dialog=true />
</fb:dialog-content>
</fb:dialog>
<!-- END FBM<fb:dialog-button type="submit" value="Close" 
cL 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 {
e-block;
padding: 4px;display: inli
n
outline:0;
color: #3a599d;
}
#3a599d;
text-deco.un-links a:hover {
background
:ration: none;
color: #fff;
border-radius: 4px;
4px;
}
</style>
<div class=-webkit-border-radius: 4px;
-moz-border-radius:
 "un-links">
://www.hackingfreaks.in" target="_blank">[TITLE OF YOUR LINK]</a><br />
<a href="htt<a href="htt
pp://www.facebook.com/hackingfreaks1" target="_blank">Hackingfreaks on Facebook</a><br /> <ahref="http://www.facebook.com" target="_blank">facebook</a>
</div>
<!-- END TEXT LINK -->

4. Gallery Template (HTML)

Social Media for Nonprofits 5 Must-Have FBML Templates for Facebook

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">
ICTURE URL]"/>
</div>

<div id="<img src="[YOUR 
Pimage2" style="display: none;">
</div>

<div id="image3" style="<img src="[YOUR PICTURE URL]"/>
display: none;">
image4" style="display: none;">
<img src="[YOUR PICTURE URL]"/>
</div>

<div id=
" <img src="[YOUR PICTURE URL]"/><br />
</div>

<!-- set up our thumbnails -->
"http://www.rositacortez.com/images/fbml_templates/socialmedia1_th.p<a href="#" clicktoshow="image1" clicktohide="image2,image3,image4">
 <img src
=ng"/>
</a>

<a href="#" clicktoshow="image2" clicktohide="image1,image3,image4">
 <img src="[YOUR PICTURE URL]"/>
</a>

licktoshow="image4" clicktohide="image1,image2,image3">
 <img src="[<a href="#" clicktoshow="image3" clicktohide="image1,image2,image4">
 <img src="[YOUR PICTURE URL]"/>
</a>

<a href="#" 
cYOUR 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- https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7bOWALXTblhRSWyydW5SeaGp739jsCy35i8rID2Z8P6KcBatLqBnpFYdIujmb7TpCTRKBrbynXJIzEuoYKPrKlYg4rDBsAIxCLBW2lOcu3A6k0doQtoFeZdz8jI3i-4sIpfWUn-AhvOg/ (video background graphic)

[Download file]

2- https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBibBPSfF91ind0TpGwGr4kBKF9U7wNe9SAR56UbnFn_eftduwpaOQI2ujmUnV-zIJ11Aaf3lZ7Pq6qQNBbWWp2cELE-eHz6cm6lFmv3woDCo7SrrVZNvdv2lkmfTN7SrjvXom2IA_r1E/ (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">
: 661px;
height:24.videobackground {
widt
h1px;
clear:both;
padding-top: 15px;
tp://www.hackingfreakspadding-left:33px;
background: url(h
ttez.com/images/fbml_templates/video_background.png);
600px;
height:180px;
overflowbackground-repeat: no-repeat;
}
.videoinframe {
width
:: auto;
}
.videorow {
width:1000px;
height:208px;
clear:both;
margin-bottom:5px;
mages/fbml_templatpadding-left: 5px;
padding-top: 5px;
background: url(http://www.hackingfreaks.in/
ies/video_skin3.png);
background-repeat: repeat-x;
}
.video1 {
float:left;
width:190px;
5px;}
.clear { fmargin-left:8px;
}
.videos { float:left; width:190px; margin-left:27px; padding-bottom:
 ont-size: 1px; line-height: 1px; height: -1%; clear:both; }
</style>
<div class="videobackground">
mgstyle="border-width:3px;<div class="videoinframe">
<div class="videorow">
<div class="video1">
<fb:swf
swfbgcolor="000000" 
i border-color:white;"
swfsrc= 'http://www.youtube.com/v/[INSERT YOUTUBE VIDEO ID]&hl=en_US&fs=1&autoplay=1'
idth='190' height='1waitforclick='false'
wmode='transparent'
imgsrc='http://img.youtube.com/vi/[INSERT YOUTUBE VIDEO ID]/2.jpg' 
w45' />
</div>
<div class="videos">
<fb:swf
swfbgcolor="000000" imgstyle="border-width:3px; border-color:white;"
om/vi/[INSERT YOUTUBE VIDEO ID]/2.jpg' width='190' height='145' />
</div>
<p class="swfsrc='http://www.youtube.com/v/[INSERT YOUTUBE VIDEO ID]&hl=en_US&fs=1&autoplay=1'
imgsrc='http://img.youtube.
cclear"></p>
</div>
</div>
</div>
<!-- END VIDEO SLIDESHOW -->