Many readers have requested a step-by-step guide on how to add the Facebook “Friend Invite” function to their pages. On this post, I will show you how to add and customize this Facebook feature to fit your particular needs.

As many of you may have noticed, Facebook re-sized all its Page tabs as of mid-August. The code in this post takes into account the new 520 pixel Page width so that your layout will look as sleek and professional as ever.

Add the FBML application to your Facebook Page and create a new tab. For  step-by-step instructions, please read  my previous post “How to Create a Custom Tab For Your Facebook Page.”

Copy and paste the following code into your new FBML tab. You will have to replace my fan Page 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>

After pasting the code above into your new FBML tab, preview your Facebook Page. It should look exactly as the Friend Invite that is on the “Social Media 4 Nonprofits” page.

Tip: Many people have reported getting an error right after the dialog window that gives users the option to also send the invite to their email contacts.  If you do, here is the way to fix it. Find the following line in the code above:

<fb:req-choice url=’http://www.facebook.com/socialmedia4nonprofits?v=app_7146470109′ ‘ label=’Check It Out’ /> “>/>.

Now replace my Page URLs  (http://www.facebook.com/socialmedia4nonprofits) with yours BUT be careful not to delete the last part “?v=app_7146470109‘.”

For example, let’s say you want to add the Invite a Friend feature to your “Save the Children” Facebook Page. The code will look like this:

<div style="margin-left:-5px;">

<fb:request-form method="post" action="http://facebook.com/savethechildren" type="Save the Children" invite="true" content="Join Save the Children Fan Page">
<fb:req-choice url='http://www.facebook.com/savethechildren?v=app_7146470109' ' label='Check It Out' /> ">/>
<fb:multi-friend-selector actiontext="Join Save the Children Fan Page" showborder="true" rows="3" cols="3" />
>
</fb:request-form>
</div>

Customizing Your Facebook Friend Invite. You can control three crucial elements: the subject line, the main description and the invite button that directs users to your Facebook Page. The invite also includes a “message” field so that users can write a personal message if they wish to do so.

Before diving into details, let’s take a look at how the invite looks:

The subject line: This is the first thing the user sees upon receiving an invitation to your Page. In the example above, the user sees “You have a Social Media 4 Nonprofits invitation” (first orange box above).

The structure, by default, is You have a [user input] invitation. For this reason, it is best to always use your organization’s name on this field.

Look for the following piece of code (highlighted in orange) to customize the subject line. Caution: only change what’s highlighted in orange below.

<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”>

Main description: A good description is important as potential visitors use it to decide whether or not to visit your Page. Therefore, spend some time writing a compelling paragraph about your organization. Remember to consider your users’ WIIFM (what’s in it for me).

Here is the piece of code you need to change for the description:

<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”>

Invite button: Although it may seem insignificant, you should choose the wording on the invite button that takes users to your Facebook Page. In my example, the button says “Check it Out.” Once a user clicks on it, she or he is directed to the Social Media 4 Nonprofits Facebook Page.

You can change the wording on the invite button by tweaking the following piece of code:

<fb:req-choice url=’http://www.facebook.com/socialmedia4nonprofits?v=app_7146470109′ ‘ label=’Check It Out’/> “>/>.

Test the Friend Invite function. After selecting from your friend lists, a dialog window will open up giving you a preview of how the invitation looks. See above screen-shot.

The User’s Experience

Are you wondering what happens after you send the invitation? No problem. Let’s take a look.

Depending on the user’s settings, she might receive an email through her personal account notifying her of the invitation. If the user opted not to receive notifications, then the next time she logs into Facebook, a notification will be waiting on her homepage, under “Requests.”

If the user has received many Page invitations, the notification looks like this:

However, if the user only receives a couple of  invitations, the subject of each invitation will be displayed on her “Requests” box.

When the user clicks on either “See All” or the subject of the invite,  she will see the detailed version of the invitation:

At this point, the user have 3 choices: to visit your page, to ignore your invitation or to block you from sending more invitations. It is always best to exercise prudence when sending invitations. People don’t like being inundated with the same page request over and over. Don’t risk being “blocked” by your own friends.

Facebook Friend Invite is a powerful tool that can help turn your supporters into active advocates of your cause. Use it wisely and you might just see your Facebook community increase exponentially.

Related posts:

1. 5 Must-Have FBML Templates for Your Facebook Page
2. What’s Facebook Poke All About?
3. Creating an Effective Facebook Profile
4. Changes to Facebook Pages: What Your Nonprofit Needs to Know!
5. How to Create a Custom Tab For Your Facebook Page

I realize that poking someone may sound like a really informal form of communication. But that is exactly the point. Your communications in the social media world don’t always have to be so formal. While it is true that you want people to take your organization and its cause seriously, don’t forget that social media and networking sites, especially Facebook, are about making new friends and cultivating relationships. To this end, you can use the poke feature on Facebook. When you poke someone, they will receive a poke alert on their home page and, depending on how the recipient’s account is set up, an email will also be sent notifying them of the poke. This friendly nudge can remind friends of your organization and mission as well as attract the attention of other users. In contrast, a formal communication (like a wall post soliciting donations) might not be noticed among all the information constantly streaming through the site.

By giving a simple poke you are showing your members that you care about them and that you want to connect with them. In return, they may be more likely to visit your Facebook Page. Users may even be more inclined to make a donation, sign a petition or spread the word about your cause if a sense of connection is established first. Poking provides a subtle reminder of your organization’s presence without overwhelming and scaring donors away, as would be the case if their inbox were constantly overflowed with invitations and reminders.

The key take-away is that social networking sites are about relationships. Show your members that you care about them. Show them that they are not just one more person in your contact list you turned in every time you need money. Cultivate a relationship with them. And remember to have fun along the way.

Facebook, with over 500 million users, can be a very powerful component of your nonprofit social media strategy. However, most organizations are becoming savvy to this fact and are already making use of the features and resources available to them. Aim to stand out to avoid fading into the background and losing your members to a more engaging cause.

How to Poke Someone on Facebook

Our friends at Mahalo have a great YouTube video explaining the how-to. Check it out.

Related posts:

1. 5 Must-Have FBML Templates for Your Facebook Page
2. Facebook Friend Invite: The Ultimate Guide
3. Creating an Effective Facebook Profile
4. How Much Does Motive Matter? Facebook CEO Donates $100 Million to Newark’s Public Schools
5. How to Create a Custom Tab For Your Facebook 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.

Related posts:

1. How to Create a Custom Tab For Your Facebook Page
2. Facebook Friend Invite: The Ultimate Guide
3. What’s Facebook Poke All About?
4. Changes to Facebook Pages: What Your Nonprofit Needs to Know!
5. Creating an Effective Facebook Profile

In order to create and add a custom tab to your organization’s Facebook page, you must be an administrator. If you are not sure if you have administrator privileges, go to your organization’s page and look under the main logo (left column). If you see the link “edit page,” then you are an administrator. If you do not see the link, contact the person who set up the page for you and request to be added as an administrator.

TIP: Even if you are not going to create a custom Facebook tab, it is essential that a responsible person inside the organization is listed as an administrator. After all, whoever is administering your page, has complete control over the content and features that are presented to visitors. Yet, it is your organization’s reputation and image that is on the line.

Adding a Custom Tab on Your Facebook Page

Add the Facebook Static FBML application (FBML) to your page. You can do this by clicking on the above link or by typing “FBML” in Facebook search box. Although FBML is Facebook’s mark-up language, you can use HTML as well.

When you click on “add to my page,” a dialog box will ask you to select the page you wish to add Static FBML to. If you are the administrator of more than one page, go ahead and select the page of your nonprofit. In my case, I am the administrator of “Social Media for Nonprofits” so I will click “Add to Page” to the right of that page name. Once you’ve selected “Add to Page,” close the dialog box and return to your page.

Back on your page, choose “Edit Page.”

You will find the FBML under “Applications.” Click on “Edit.”

Start customizing your tab. In the “Box Title” enter the name of the new tab. Content goes on the “FBML” box. Don’t worry if you don’t know FBML. As I mentioned before, FBML allows HTML. So go ahead use HTML complete with images, sign-up forms, etc. In this case, I am going to create a custom tab inviting new visitors to join my page.

Once you are done, click on “Save Changes.” It is that simple! Your custom page is ready. You can always edit or add more later. Now, it’s time to add it to your page (main tabs) and make it your landing page on Facebook.

Go back to your page and click on the plus sign (+), which should be the last tab in the row:

When you click the plus sign, a drop down menu shows a list of all the applications available to add to your tabs. One of the choices should be the “Box Title” you entered when editing the FBML box. Click on it and it will be added to your page. I entered “Welcome” as the “Box Title.” Once I click on it, the new tab “Welcome” will be added to my page.

Rearrange your tabs. Facebook will let you display six tabs at a time. Although you cannot move the “Wall” and “Info” tabs, you can rearrange the order of the other four tabs. For example, I chose to have the “Welcome” tab right after the “Info” tab.

Make your new custom tab your landing page for new visitors (existing fans will be routed to your “wall”). To make your new custom page the default landing page, go to “Wall Settings” (you get there by clicking “Edit Page”), click on “Edit.” For the “Default Landing Tab for Everyone Else” option, select the tab that you have just created.

That’s it! To test your new Facebook landing page, log out of Facebook and then check your profile using the Facebook URL of your organization.

You should land on your new custom tab.

If you liked this post please help spread the word by joining the “Social Media 4 Nonprofit” community on Facebook. Next post, I will be posting some great FBML templates you can use on your new custom Facebook pages.

Related posts:

1. 5 Must-Have FBML Templates for Your Facebook Page
2. Changes to Facebook Pages: What Your Nonprofit Needs to Know!
3. Facebook Friend Invite: The Ultimate Guide
4. Creating an Effective Facebook Profile
5. What’s Facebook Poke All About?

The tips below assume that you already know that  providing relevant content on regular basis on social media networking sites is key. Content can be in the form of news, links to interesting articles, photos, videos or other material. Regular updates build community, attract supporters and inspire engagement. In short, it keeps people coming back to your site. You can be as creative as you want as long as your content is relevant and updated regularly.

Now that we underscored the importance of quality content, let’s take a look at a few tips and best practices to build an effective Facebook page.

1. Create Custom Tabs

Custom tabs give your organization the opportunity to offer a unique experience to your page visitors. By grabbing visitors’ attention right from the start, there’s a greater likelihood you’ll succeed in converting them into fans. Customizing your profile becomes a powerful tool when you link users directly to specific tabs. Although creating custom tabs requires some skill and an investment of time, it’s well worth the effort.

Let’s take a look at how nonprofits use this feature. The One Campaign, for example, uses a custom tab to invite visitors to join its mailing list. Talk about a great strategy to quickly build your mailing list!

Source: http://www.facebook.com/ONE?v=wall

2. Don’t Let New Visitors Land on the Wall

Why on earth would I tell you not to let new visitors to land on the wall?  The main reason is that you have less control over the information visitors will encounter on your wall. Your wall features content provided by you as well as content provided by your followers. Although you provide engaging content, your followers might not. By avoiding the wall as a landing page, you can better manage the introduction your visitors will receive to your organization.

Your introduction should, of course, feature the best of your organization. Maybe a succinct “about us” paragraph, sprinkled with some pictures of the people you help and a list of your core programs. You can even have a call action to donate, sign a petition, or spread the word. The possibilities are endless. The point here is that you want new visitors to enter through a controlled environment. Once properly introduced to your organization, they can then proceed to navigate through less structured areas like your wall.

Take a look as this example. The American Society for the Prevention of Cruelty to Animals (ASPCA) does a great job of providing a customized landing page (tab) for its visitors.

Source: http://www.facebook.com/aspca

Remember, one of the great features of Facebook is that it allows you to link users directly to specific tabs. But don’t go crazy creating tons of custom tabs. Facebook will only let you display six tabs at a time. All others get buried on the drop down menu located to the right of your tab panel.

3. Create a Unique Page Image

This is one of the most important components of a fan page. As I discussed on my previous post “Creating an Effective Twitter Profile,” your profile picture should be related or reflective of your nonprofit’s logo. This does not mean, however, that it has to be boring.

Facebook recommends that page pictures be 200px wide. Height, however, can be varied as needed. The height flexibility can be used to your advantage. Take a look how one organization uses the height of its profile image to its advantage.

Source: http://www.facebook.com/CharityHappenings

Your profile image is one of the first things users look at when visiting your page. A great picture can grab people’s attention right away, increasing their interest in your organization. So, make it good!

4. Claim Your Vanity URL

Facebook now makes it possible to create a customized link for your page (also known around the tech world as a “vanity URL”). Vanity URLs are now open to all organizations whose pages have at least 100 fans. Choosing your URL is on a first-come, first-serve basis so nab yours now before someone else does. Having your own vanity URL (e.g., http://www.facebook.com/hivlawproject) is a strategic component of any social media plan as they are easy to remember, easy to share and makes it easy for users to find you on Facebook.

Tip: Try to secure your organization’s name on as many social sites as you can.

5. Optimize Your Website’s Share Preview

The “Share” feature is a must-use feature because of its viral potential. Through this feature, you essentially include special code on your website that allows supporters and fans to share your links (news, reports, petitions) with their networks instantaneously. Literally, through the “Share” button, any of your links have the potential to spread like wild fire on the web. All people have to do is click on “Share” and the information goes to their profile walls.

Let’s look first at a poorly optimized Share Preview example. This news article was taken from Oxfam International Blog (http://bit.ly/cWnzxP). The post features four pictures so when the user clicks the “Share This” button (a third-party application, not the same as the  Facebook “Share” button) and chooses Facebook, the user is presented with Facebook’s “Share Preview” button. What is the problem with this? Well, it is simply not optimized for viewers or search engines. First, below the heading (first red block), the web address that is shown is not the one of the organization (@Oxfam). Second, the user is presented with four pictures to choose from to accompany the news release. Not only does this create more work for the user, it also allows the user to select a weak or inappropriate visual for the article. And, of course, it allows the user to opt-out of posting a visual altogether. (How attractive will this text heavy update be for the next reader?) Third, the Description Meta Tag is not used so Facebook will pull the first few lines of the article as the description.

To avoid the problems above and effectively optimize Facebook’s Share feature on your page, there are a few key things you need to bear in mind. First, you should define a custom “Share Preview” image. See details on customizing how the shared item appears on Facebook. This will prevent the user from choosing an inconsistent image (you post a release of the emergency in Haiti, but the user selects a picture related to the Tsunami in Indonesia) or no image at all. Second, make sure you always include a well-written Description Meta Tag for your posts. Facebook will pull the Description Meta Tag from your site into the news feed. If you don’t include a Description Meta Tag, Facebook will grab the first few lines of your article by default — which may or may not hook readers. A good Description Meta Tag can make the difference in having people clicking through to read the link or ignoring it. To implement the Description Meta Tag, see Facebook Share documentation for details. Third, don’t use third parties buttons (e.g., “Share This,” “Add This”) to share your content . Use the  “Share” button provided by Facebook as it will automatically grab your website’s URL.

An optimized “Share Preview” (using Facebook’s “Share” button)  looks like this:

Tip: Do not make users think. Make it as easy as possible (one click) for them to share your content in an appropriate and attractive manner.

On my next post, I will continue exploring ways to create an engaging, fun and attractive Facebook page for your nonprofit. Until then, try to implement the tips on this post. Remember, Facebook provides you access to an audience of over 200 million people worldwide. Putting some time and effort into customizing your profile can give you an edge that allows you stand out from other organizations.

Related posts:

1. Creating an Effective Twitter Profile
2. Facebook Friend Invite: The Ultimate Guide
3. Changes to Facebook Pages: What Your Nonprofit Needs to Know!
4. What’s Facebook Poke All About?
5. How to Create a Custom Tab For Your Facebook Page