“Like-Gate” your Facebook Page

Have "Before" Fan Pageyou ever gone to a Facebook fan page and found an in-your-face “LIKE ME!” request? Did it work? Strangely enough, it usually does, especially if you are given enough incentive. What works for you? A donation to charity? Ability to enter a contest? A promise of exclusive content or discounts?

Displaying “fans-only” content is a simple matter of fbml coding. It will look something like this (remove the space after the “<” on all lines):

<fb:visible-to-connection>
<div id=”outer”>
Content for Fans only.
<fb:else>
<div id=”non-fans”>
Content for non-fans.
</div>
</fb:else>
</fb:visible-to-connection>
</div>

You’ll need to add a little bit of CSS to your stylesheet to avoid having the non-fan content pushed way down the page. Add this:
#outer {
width:520px;
margin:0 auto; border:0; padding:0;
position:relative;
}
#non-fans {
width:520px;
position:absolute; top:0; left:0;
}

That’s it! If you test it yourself, you will see both versions (overlapping). Create a test Facebook profile so you can like (and unlike) pages to test them. I found that sometimes the css gets a little “funky” and you do need to use different tags to embed YouTube videos. Our embed code looked "After" Fan Pagelike this:

<fb:swf
swfbgcolor=”000000″ imgstyle=”border-width:3px; border-color:white;”
swfsrc=’http://www.youtube.com/v/v6EF7I0liL0&autoplay=1′
imgsrc=’http://www.myhomecareblog.com/fb/fbml/bfrrightbtr.jpg’ width=’261′ height=’171′ />

About the Author Alisa Meredith (311 Posts)

As co-owner and chief inbound marketing consultant at Scalable Social Media, Alisa Meredith spends a lot of time keeping up with online marketing trends for the benefit of our customers. Computers have been a passion of hers since her first T1-99, so inbound and social media marketing is a natural fit.

Comments

  1. friendlyswiss

    Hi guys, great tutorial but I could not get it right until I changed the nesting order of the and tags, instead of the other way around, like you have it.

    In other words, it only worked for me once I changed it to this:

    Content for Fans only.

    Content for non-fans.

  2. Your outer div is being closed outside of the visible-to-connection tag which was rendering a blank page for me. This worked for me.

    Fan

    Not a fan

  3. BLM

    where do you embed this code?

  4. Craig

    How or where do i add this :
    #outer {
    width:520px;
    margin:0 auto; border:0; padding:0;
    position:relative;
    }
    #non-fans {
    width:520px;
    position:absolute; top:0; left:0;
    }

    to get this to work. meaning i want the images to be on top of each other.

    I used the first code

    Content for Fans only.

    Content for non-fans.

    and added pictures but there’s a huge space. Can someone give me a complete code layout that would enable this to work properly?

Leave a Comment

Awesome! You've decided to leave a comment. Please keep in mind that comments are moderated.

Your email address will not be published. Required fields are marked *

XHTML: You can use these tags: