Thursday, September 16, 2010

How To Create a "Share Us" Tab on Your Facebook Fan Page

Ever since being featured in Mari Smith and Michael Stelzner's webinar, "9 Companies Doing Facebook Right (And What You Need to Know)", I've seen a surge of activity on my Facebook fan page, and most new fans seem to be particularly interested in how I created my "Share Us!" tab.  So in lieu of sending PMs to each person who asks for help (which is what I've been doing thus far), I decided to go ahead and post my entire FBML code here for all the world to see. 

As I mentioned in my recent interview on the Composure Marketing Blog (be sure to check that out if you're interested in learning about the social media strategies I've used to grow nearly 1500 fans on my Facebook page), I'm not a web developer by trade.  And since Facebook is constantly changing the way FBML and fan pages work, my code generally needs to be "touched up" fairly regularly.  With that said, below is the way my code looks at the time of this writing.

Before we jump right in, however, there are a couple of key points worth mentioning.  First off, you'll need to generate a custom/alias URL that points to your fan page's main address, because using anything with "facebook.com" in it will will yield errors when folks actually try to use your Share tab (it has something to do with the fact that Facebook's domain has been blacklisted by anti-spam companies).  I used http://bit.ly to create my alias, but feel free to use whichever service you prefer.  Once you've done that, just plug in your custom URL wherever you see "YOUR PAGE ADDRESS" below, paying special attention to the quotes (don't add any or take any away from what's already there).  And of course replace anything else in RED letters with your own info.  Here's the code I currently have on my "Share Us!" tab:

<fb:request-form
method="post"
action="YOUR PAGE ADDRESS"
type="YOUR PAGE NAME"
invite="true"
content= 'TEXT FOR THE TOP OF YOUR INVITE BOX <fb:req-choice url="YOUR PAGE ADDRESS" label="TEXT LABEL FOR THE
SEND BUTTON-- e.g. GO or SEND
" />'
<fb:multi-friend-selector
actiontext="What you want the invitation to say-- e.g. Check out my super-awesome page"
cols="3"
max="8"
import_external_friends="false">
</fb:request-form>

Naturally, in order to be able to use the above code, you'll need to have the Static FBML application installed on your page.  Check out this great Custom Landing Page tutorial on Mari Smith's blog if you need help.  Alternatively, a quick Google search for "install Static FBML" will yield plenty of step-by-step tutorials as well.  It's really not very difficult at all....just a few steps.

Please click "Like" and leave a comment below if you found this code helpful, or if you have any additional questions about the methods I used to design my page. Thanks!








6 comments:

Matt Torres said...

Wow, this is awesome. This is the exact piece of code that I have been looking for. THANK YOU for posting!!

Tampa Band Photos said...

Absolutely....glad it helped you, Matt! =)

Jay Feitlinger said...

Russ, this is great so thanks! 2 quick questions:

1) I added the code to my Facebook page and noticed your Share Us reads share up to 8 friends where mine reads 6 friends. Any thoughts on how to customize that to increase that?

2) I added the code and did a test and the person I shared with did not get the share. Have you run into this before? If not, maybe its a time delay.

Thanks,
Jay

Tampa Band Photos said...

Jay: Facebook originally allowed you to specify the maximum number of friends that a user could invite using this code, but over time they gradually reduced it. My code still shows a max of 30, but as you pointed out, it's only allowing 8. Anyway, here's what I would suggest to you: go back up and take another look at the code I originally posted. A few minutes ago I added a new parameter (max="8")-- it's the 3rd line from the bottom. Try replicating this on your page and see if it addresses the issue.

Regarding your second question, if your friend still doesn't end up getting the share after a little while longer, please let me know. I've had to go in and modify this code numerous times due to bugs on Facebook's side, so it wouldn't surprise me if something were broken again. :-/

Jenny said...

Hi Russ,

I added the code and sent a test invite and it was never received.can you help.

Tampa Band Photos said...

@Jenny: Not sure what's going on with Facebook lately, but this code is giving me fits. Below is what I currently have on my "Share Us!" tab....feel free to modify it as needed:


<fb:request-form
method="post"
action="http://bit.ly/rrpfanpage"
type="Russ Robinson Photography"
invite="true"
content="Check out Russ Robinson Photography's Fan Page

<fb:req-choice url='http://bit.ly/rrpfanpage' ' label='GO' /> ">

<fb:multi-friend-selector actiontext="Please help us spread the word by sharing this page with your friends!" email_invite="false" import_external_friends="false" rows="6" cols="3" showborder="false" max="30" />
</fb:request-form>

Good luck!

Post a Comment

About Me

My photo
Tampa, FL, United States
I'm a commercial photographer in Tampa, FL specializing in band & musician promos, CD covers, press kits, posters, and the like. Please feel free to check out my website/blog using the link below, and give me a shout if I can be of service to you!

http://TampaBandPhotos.com

Search My Blog

Followers