Skip to main content

5 Must-Have FBML Templates for Your Facebook Page

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
5 Must-Have FBML Templates for Facebook
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

5 Must-Have FBML Templates for Facebook
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)


5 Must-Have FBML Templates for Facebook

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 /> <a
href="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


YouTube FBML Template

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/AVvXsEh-s_lrXzis_JfrUAYQQk8ZDkzDolNObSDWf1bamhcAT99h5hYG6b4GBltJo6DauAKKNCbXKNm5kkjd5V2-u-p2twN-TZ7gupLDJGiE60tYSZVZ_c6_xtmA-Dnd9sNyTvcYtrXO3HMuOxw/ (video background graphic)

2- https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVdPTCb9sM0p-tUAb2nI_h7JcfU37UBLJbUDbBLMObVfWMHrtfem6wrbaswlGmMq1U7i1ReM-HwOP7VoL6PgP5RnGG27SbcmLlo8UT10JTec_5BOCoqXxPwKA8HC8hjc19yNPzmXolIKI/ (video skin graphic)

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.hackingfreaks
padding-left:33px;
background: url(h
ttez.com/images/fbml_templates/video_background.png);
600px;
height:180px;
overflow
background-repeat: no-repeat;
}
.videoinframe {
width
:: auto;
}
.videorow {
width:1000px;
height:208px;
clear:both;
margin-bottom:5px;
mages/fbml_templat
padding-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 { f
margin-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='1
waitforclick='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 -->

If you liked this post please help spread the word by joining the HackingFreaks Fan Page on Facebook.

Comments

  1. Good Blog about templates, even though I prefer totally customizable pages like you can do at lujure.com

    It's really just preference though.

    Thanks again!
    Ross

    ReplyDelete

Post a Comment

Popular posts from this blog

Valentine's week

Celebrate your Valentine's week with  Your Valentine 7 Feb Rose Day 8 Feb Propose Day 9 Feb Chocolate Day 10 Feb Teddy Day 11 Feb Promise Day 12 Feb Kiss Day 13 Feb Hug Day 14 Feb VALENTINE'S DAY 15 Feb Slap Day 16 Feb Kick Day 17 Feb Perfume Day 18 Feb Flirting Day 19 Feb Confession Day I want to confess dear sweetheart!! (*-*) 21 Feb Break Up

Free download XSS SHELL v0.3.8

XSS SHELL v0.3.8 WHAT IS XSS SHELL ? XSS Shell is powerful a XSS backdoor and zombie manager. This concept first presented by "XSS-Proxy - http://xss-proxy.sourceforge.net/  ". Normally in XSS attacks attacker has one shot, in XSS Shell you can interactively send requests and get responses from victim. you can backdoor the page.  You can steal basic auth, you can bypass IP restrictions in administration panels, you can DDoS some systems with a permanent XSS vulnerability etc. Attack possibilities are limited with ideas. Basically this tool demonstrates that you can do more with XSS. FEATURES XSS Shell has several features to gain whole access over victim. Also you can simply add your own commands.  Most of the features can enable or disabled from configuration or can be tweaked from source code. Features; - Regenerating Pages - This is one of the key and advanced features of XSS Shell. XSS Shell re-renders the infected page and keep user in virtual environment...

Portable World Cup Cricket 20-20

Portable World Cup Cricket 20-20 [maroon[Portable World Cup Cricket 20-20 v1.0English | Extract to Play | 57 MBWorld Cup Cricket 20-20 is a fabulous 3D cricket game for the PC. Players can choose from amongst their favorite teams, their favorite players, and most popular stadiums. The game offers several game modes - some standard and some new - combined with fabulous gameplay, outstanding graphics and full voice commentary. World Cup Cricket 20-20 strives to truly simulate the ultimate 20-20 cricketing experience! Players can partake in tournaments and watch as their team wins the ultimate trophy, increase team and player rankings, and build up their career innings! http://hotfile.com/dl/77645970/a f1f4aa/phar_masud_worl-cri-20-por.rar.ht ml OR http://www.fileserve.com/file/UABhxg d