If you want to show content to your fans, and require that a visitor to your Fan Page become a fan in order to view the content, here’s a nice bit of FBML to render content on your Facebook Fan Page only to fans. Easy as pie….
NOTE: It is easy to get confused about whether or not this working when you’re testing. Remember, if you’re an admin of the Fan Page you’re using this FBML in, and you’re logged in, you will see the content whether or not you’re actually a fan of the Page. People get confused about this and think the tags aren’t working.
ALSO NOTE: If you follow the below instructions and it’s not working, try removing the <fb:fbml version=”1.1″> </fb:fbml> tags. I think Facebook may have changed its API.
FINALLY: If you want to copy and paste my code, MAKE SURE you convert all quotes to plain-text (straight up and down) quotes! Otherwise, your code will not work!
Content for Fans Only
First, on your Static FBML page, begin with the following:
<fb:fbml version=”1.1″>
Wrap the content you want to hide from non-fans within these tags:
<fb:visible-to-connection></fb:visible-to-connection>
Then end your page with:
</fb:fbml>
And that’s it! The content contained between <fb:visible-to-connection> and </fb:visible-to-connection> will be visible to fans only.
How to Show Different Content to Fans and non-Fans
<fb:fbml version="1.1">
<fb:visible-to-connection>
Fans will see this content.
<fb:else>Non-fans will see this content.</fb:else>
</fb:visible-to-connection>
</fb:fbml>
Removing the Space above the Non-Fan Content
Many folks complain that before a user becomes a fan, and the “non-fan” content is displayed, the “fans-only” content still takes up the space it would if it were being displayed. To fix this, put paragraph tags (<p> … </p>) around the image or the text for the non-fan content, and set a negative margin on the paragraph tag equal to the height of the fans-only content.
In the example below, the fans-only content is 100px tall:
<fb:else><p style=”margin-top:-100px;”><img src=”[IMAGE URL]“></p></fb:else>
OR
<fb:else><p style=”margin-top:-100px;”>Text content for fans only</p>
If your fans-only image is bigger than your non-fans image, and you find that your image is getting cut off:
Surround the entire <fb:visible-to-connection> … </fb:visible-to-connect> with a <div> tag that includes a style setting the height to the height of the tallest image (600 pixels in the below example):
<div style="height:600px;">
<fb:visible-to-connection>
[content]
</fb:visible-to-connection>
</div>
Troubleshooting
If you aren’t having success implementing this code, it is most likely due to one of the issues described below. PLEASE carefully read this post and the troubleshooting tips below before asking questions via the comments.
- IF YOU SEE BOTH FANS-ONLY & NON-FANS CONTENT: To test whether you’ve implemented this feature correctly, you MUST NOT be logged in as an admin for the page you’re adding this to, or you’ll see both the content for fans and for non-fans. The best way to test is to create a user profile for testing and log in as that user. You can then “Like” the page and “un-Like” the page to test the display of content. To “unlike” a page, click on the Wall tab for the page and at the bottom of the left column you’ll see an “Unlike” link. Click that to unlike the page;
- NO “CURLY” OR “FANCY” FORMATTED QUOTES: Your quotes, whether single or double — and ALL your code — MUST be plain-text. If your quotes aren’t straight up and down, then they’re formatted quotes and should be fixed or your code will NOT work;
- MATCHING QUOTES: Make sure quotes around values are both the same, either single or double, but they have to match!
- HEIGHT SETTINGS: My fix for the extra space above the non-fan content uses an example height. Make sure you set the height value and the “margin-top” negative values for your individual case.
- TEST YOUR URLS: If you can’t access the URL for an image or file directly in your browser, it won’t work in your code. Make sure your URLs are correct;
- URLS must be properly formed: After the domain name (“TLD”), URLs are CASE SENSITIVE. They should also contain NO SPACES or, as mentioned above, no specially formatted characters.
Other Resources
Facebook Developer Wiki – fb:visible-to-connection
Static FBML Code Templates for Sale!
#1 by Joe - May 9th, 2010 at 14:55
The spacing removal doesn’t seem to be working for me, do you have any other suggestions? By the way, thank you so much for all of the great information you are posting to your blog, it has helped me immensely! Keep up the excellent work!!
#2 by Linde - May 10th, 2010 at 03:12
Hello,
great information that has helped me!
can you please take a look at this website? : [URL REMOVED]
How do they do it? As in like they ask you to like the page, then suggest to everyone before a link is shown.
Thanks,
Linde.
#3 by timware - May 11th, 2010 at 08:23
How to show/hide content is the subject of this post, and it’s pretty clear. I didn’t look at the page in question.
#4 by Rg - May 19th, 2010 at 23:35
Hello, it’s not working for me.. I’ve tried it for real but then, it’s just not working the way it should.
#5 by timware - May 19th, 2010 at 23:41
Well, if the answer isn’t in this post or the comments, I doubt I can help. We’ve pretty much covered how to do it and why it might not be working. Mainly, if you’re viewing the page while logged in to Facebook, you will see both the visible and hidden content if you’re either a fan or an admin of the page. You have to test while *not* logged in to FB.
#6 by CRS - May 20th, 2010 at 15:46
Help please!!
I used an FBML box to display some photoslideshows. I successfully made these slideshows visible to only fans of my page. Non-fans just see a blank white box…
But does anyone know if there is a way to have a message to non-fans like “These slideshows are visible to fans only. To view, click the “Like” button above to become a fan.”
#7 by timware - May 20th, 2010 at 18:07
Well, yes. That’s the entire subject of this post. Just follow the instructions.
#8 by David B - May 21st, 2010 at 10:32
Hi,
I’m a huge fan of HyperArts. I couldn’t afford to hire someone to build m fan page, so I built it around your excellent multi-tab code that I bought at the beginning of 2010. And it ended up being 10x more “me” than if I had hired someone to do it. It’s working great by the way, and I HIGHLY recommend it to anyone wanting to create their own fan page. And the fact that it already had built into it the soon-to-be implemented (but WHEN FB, W-H-E-N?) 520px fan page width was a real plus. But that’s not why I’m writing here, so sorry for gushing!
I have tried every possible way I can see to configure the “no-fan” and “fan” code as instructed above (and they are really great instructions, as usual from HyperArts, thanks), but I get the
no-fan content blanked out just fine and wonderfully, but the text for the non-fan to see, doesn’t show. I just get the blank screen. (You can see it here at http://www.facebook.com/macrobioticsamerica And I can live with just the blank screen, but I would love to have the non-fan see the text encouraging them to become a fan in order to see the content. I’ve gone as far with it as my code know-how will take me, it seems. Can I send my code to someone at HyperArts and have them fix it for me? I’m ready to pay for it if necessary.
Thanks much.
-David B.
#9 by timware - May 21st, 2010 at 11:03
David, Just post your code here and I’ll take a look. I tried view the “For Fans” tab both as a fan and non-fan and both states show no content. It’s probably an easy fix.
#10 by David B - May 21st, 2010 at 20:36
Hi Tim, thanks for getting back to me. I finally figured out how to get the “non fans” content to show. I missed the “ALSO NOTE” part at the beginning, and by removing those tags as you instructed there, the non-fan content showed up. BUT I haven’t for the life of me been able to get the code right so that the text shows at the top of the page rather than all the way down at the bottom. I’ll keep working on it. BTW: Your pic says it all!
#11 by Peggy Dolane - June 16th, 2010 at 12:30
I absolutely LOVE how your H2 (?) headers come with code so that when I cut and paste one into my facebook page as a quote, it automatically generates a link. When I have a bit of spare time, I’m going to have to figure out how you did that.
#12 by timware - June 22nd, 2010 at 17:36
Thanks Peggy! That’s a nifty little service called Tynt. You can log in and get stats on what’s being scraped or copied from your website or blog.
#13 by Alex - June 23rd, 2010 at 23:41
David how did you move the text to show at the top rather than at the bottom ? Please explain .
#14 by Chris - June 24th, 2010 at 08:35
Thank you for writing this article. This is working great for me except that I cannot get the negative top margin working. The fan only image is still taking up the space above the non-fan image. Both images are the same size, any ideas?
#15 by Kinda - June 24th, 2010 at 16:52
May I translate your content and put it in my blog and add the link to the source?
#16 by timware - June 24th, 2010 at 18:36
That would be fine
#17 by Kinda - June 25th, 2010 at 20:19
Excelent!
#18 by RM - June 25th, 2010 at 19:45
Hi could you please take a look at this code? I am trying to display one image linked to a website for fans, and another one telling Non-Fans to “Like” the page to show the content. Right now it works for Fans but for Non-Fans, it just shows a white screen. What am I doing wrong?
Thanks, here is the code I am using:
<fb:fbml version="1.1">
<fb:visible-to-connection>
<a target="_new" href="http://www.j-vic.com"><img alt="Official J.Vic Website" border="0" src="http://j-vic.com/files/Facebook - Already Fan.jpg" /></a>
<fb:else><img border="0" alt="" src="http://j-vic.com/files/Facebook - Non-Fan.jpg" /></a>
</fb:else>
</fb:visible-to-connection>
</fb:fbml>
#19 by RM - June 25th, 2010 at 20:00
Update: I figured out it wasn’t that the Non-Fan page was white…the image was just still shifted down. The Fan image is still taking up the space above it. I tried you technique with the code below and still have the same problem. Please help when you get a minute. THANK YOU!
Here’s the current code:
<fb:visible-to-connection>
<a target="_new" href="http://www.j-vic.com"><img alt="Official J.Vic Website" border="0" src="http://j-vic.com/files/Facebook - Already Fan.jpg" /></a>
<fb:else><p style=”margin-top:-700px;”><img src="http://j-vic.com/files/Facebook - Non-Fan.jpg" ></p>
</fb:else>
</fb:visible-to-connection>
#20 by timware - June 27th, 2010 at 20:14
Your link to the non-fans image isn’t correctly. Test it by trying to access the URL directly in your browser. It should go to an image, but it doesn’t.
#21 by RM - June 29th, 2010 at 12:56
Thanks for the reply Tim! I tried pasting the link to the non-fan image in the browser and it goes to the correct image (http://j-vic.com/files/Facebook – Non-Fan.jpg). The problem is that when a Non-Fan sees the page, the image is shown but it is shifted far down, underneath the hidden image that is displayed to fans.
This is the code that I am currently working with, notice that I am trying to shift the Non-Fan image up 700 px, but it doesn’t seem to work:
<fb:visible-to-connection>
<a target="_new" href="http://www.j-vic.com"><img alt="Official J.Vic Website" border="0" src="http://j-vic.com/files/Facebook - Already Fan.jpg" /></a>
<fb:else><p style=”margin-top:-700px;”><img src="http://j-vic.com/files/Facebook - Non-Fan.jpg" ></p>
</fb:else>
</fb:visible-to-connection>
Any help would be greatly appreciated!
Thank you.
#22 by timware - June 29th, 2010 at 13:10
You should change the URL of that image. It may be working for you in the browser you’re using, but with Firefox it doesn’t work – it results in this which, for me, is an XML feed. You should NEVER have spaces in URLs, never! Once you’ve sorted that out, why don’t you try the code I suggest in this post.
#23 by RM - June 29th, 2010 at 13:08
Sorry, I was logged into my website management tool so the image worked for me but not everyone else. Below is the new code but I am still having the problem with the image for Non-Fans not shifting up when the Fan image is hidden:
<fb:visible-to-connection>
<a target="_new" href="http://content.bandzoogle.com/users/jvictorymusic/images/content/Facebook-Fan.jpg?2"><img alt="Official J.Vic Website" border="0" src="http://j-vic.com/files/Facebook - Already Fan.jpg" /></a>
<fb:else><p><p style=”margin-top:-300px;”><img src="http://content.bandzoogle.com/users/jvictorymusic/images/content/Facebook-Non-Fan.jpg?2" ></p>
</fb:else>
</fb:visible-to-connection>
THANK YOU!
#24 by RM - June 30th, 2010 at 14:56
Hey Tim, I’m still having the issue with the above code. Any ideas?
#25 by timware - June 30th, 2010 at 17:01
You haven’t fixed the image URL which has spaces and shouldn’t have spaces, specifically:
http://j-vic.com/files/Facebook – Already Fan.jpg
And you haven’t used the code in this post that I suggest at the very end of the post.
#26 by RM - July 1st, 2010 at 19:00
Hi again Tim.
Well I have tried everything and adding the code at the very bottom of your post does not help. Right now I can see the Fan image but when I am logged out of everything and go to the page, all I see is white.
Am I doing something wrong? Here is my code, if you have any ideas I’d really appreciate it. If not, no worries. I think I’ll have to give up on this tactic…
<div style="height:600px;">
<fb:visible-to-connection>
<a target="_new" href="http://content.bandzoogle.com/users/jvictorymusic/images/content/Facebook-Fan.jpg?2"><img alt="Official J.Vic Website" border="0" src="http://content.bandzoogle.com/users/jvictorymusic/images/content/Facebook-Fan.jpg?2" /></a>
</a>
<fb:else>
<p style=”margin-top:-600px;”>
<img border="0" alt="" src="http://content.bandzoogle.com/users/jvictorymusic/images/content/Facebook-Non-Fan.jpg?2" />
</p>
</fb:else>
</fb:visible-to-connection>
</div>
#27 by timware - July 2nd, 2010 at 08:50
You’re very close.
First, your images are actually 700px tall, not 600px, so you need to change the “height:600px;” and “margin-top:-600px;” to the correct value of 700px.
Second, in your <p> tag after the <fb:else>, I think you have “fancy” or “curly” quotes, not plain-text, straight-up-and-down quotes which you MUST have or it breaks things. This is ONE OF THE MOST COMMON ERRORS people make.
Third, you have an extra </a> tag just before the <fb:else>.
I tested this with these fixes and it worked perfectly.
#28 by Bob - July 4th, 2010 at 23:24
wow. I appreciate your patience!! #27 straightened things out for me and should help many others too!
#29 by RM - July 5th, 2010 at 10:46
Tim! Thank you so much. Works perfectly! Sorry for all the back and forth. I think this is a great addition to the facebook site. I will be sure to refer people to your site for this trick.
Thanks again!
#30 by Arie - July 6th, 2010 at 14:56
Hi,
Great post. However I get a problem when using fb:swf on IE as the visible-to-connection content.
The link on the preview image of the flash is hidden at the very top and after clicking it the whole flash behaves strangely. buttons do not react. seeing this on IE only. If I use the fb:swf separately on the static fbml..I get no problem. Any idea?
Here is the code:
<style>
.image span{
background: transparent !important;
}
</style>
<fb:fbml version="1.1">
<div class="image">
<fb:visible-to-connection>
<fb:swf
swfsrc='http://zibaba.gns.co.il/careline/vac.swf'
imgsrc='http://zibaba.gns.co.il/careline/pre.jpg'
width='520' height='562'/>
<fb:else><p style="margin-top:-562px;">
<div style="background-image:url(http://zibaba.gns.co.il/careline/landing.jpg); background-repeat: no-repeat; background-position:center center; width: 520px; height: 562px; display: block; position:relative;">
<a href="http://www.careline.co.il" target="_blank">
<div style="position:absolute; display: block; width: 210px; height: 37px; top: 246px; left: 48px; border: 1px solid black"/>
<a href="http://bit.ly/carelineshare" target="_blank">
<div style="position:absolute; display: block; width: 86px; height: 25px; top: 522px; left: 9px; border: 1px solid black"/>
</a>
</div>
</p>
</fb:else>
</fb:visible-to-connection>
</div>
</fb:fbml>
#31 by Sarah M. Weinberger - July 6th, 2010 at 17:45
Hi (Tim?),
I noticed that in order for the style parameter in any HTML to work that single quotes and double quotes have strange effects. The only thing that works is whatever character code your special type of double quotes is. I copy and pasted your code above and saw that the double quotes in the fbml is different than in the paragraph tag style attribute.
Good and Works: ” [ASCII 148]
Does not work: “, ‘ [ASCII 34 and 39 respectively]
If I use ASCII 34 or 39, the text gets cut off after the part way through the first paragraph line, whereas using ASCII (or is that ANSI) 148, then everything works. Your code makes that difference. I got the working code by copy and pasting your code above. In a text editor (i.e. TextPad) 148 shows up as a box.
Thanks in advance.
#32 by timware - July 9th, 2010 at 11:37
Sarah, I would say to just use plain-text quotes rather than ASCII characters for formatted quotes. This is a problem when copying and pasting my code, and you’ve made me realize I’ve got to call that out more obviously here, and I will! Thanks.
#33 by Sarah M. Weinberger - July 9th, 2010 at 22:39
Hi Tim,
Thank you for writing me back. Plain text resolves down to ASCII codes. Regular plain text quotes is ASCII code 34. I only got into the this code or that code, when I saw the code not work.
My first attempt was to write the code using my text editor by hand. That did not work. After that I copy and pasted your code, which worked. That led to more hand coding and only after a lot of debugging did I find out that regular double quotes and regular single quotes, both which work in HTML did not work for me for whatever reason. Only your code, not that I know why on that. I could try again, but now that I know a work around, it is not so important. I am merely mentioning it.
I am just happy that this module exists, as it really does help facebook. Thank you!
#34 by Mike - July 8th, 2010 at 22:26
Hi Tim,
I’m having a problem where my non-fan content is covering up my fan-only content weather you are a fan or not. When you are not a fan it covers it up with the image as desired. However, when you ARE a fan it is covered with “white-ness.”
I even tried it with the code posted by #26 (along with your corrections from post #27). And I get the exact same result. Any ideas?
#35 by Mike - July 8th, 2010 at 22:56
Correction (changed the non-fan offset to match the height of my fan-content):
<fb:visible-to-connection>
<div style="height:300px;">
<table>
<tr>
<td><a href="http://www.facebook.com/pages/Neon-Cough/146971614779?v=wall&ref=ts">Wall</a> - Latest news
about the band.</td>
</tr>
<tr>
<td><a href="http://www.facebook.com/pages/Neon-Cough/146971614779?v=info&ref=ts">Info</a> - Band members and
bio</td>
</tr>
<tr>
<td><a href="http://www.facebook.com/pages/Neon-Cough/146971614779?v=app_2344061033">Events</a> - Check out
Neon Cough's upcoming performances and their recent show history.</td>
</tr>
<tr>
<td><a href="http://www.facebook.com/pages/Neon-Cough/146971614779?v=photos">Photos</a> - Live photos on
stage.</td>
</tr>
<tr>
<td><a href="http://www.facebook.com/pages/Neon-Cough/146971614779?v=app_2392950137">Video</a> - Coming
soon!</td>
</tr>
</table>
</div>
<fb:else>
<p style="margin-top:-300px; z-index:-1;">
<img style="z-index:-1;" src="http://c2.ac-images.myspacecdn.com/images02/85/l_6f0b99b4fa284849ae8d9e5f9f9d2f29.jpg">
</div>
</fb:else>
</p>
</fb:visible-to-connection>
#36 by timware - July 9th, 2010 at 11:34
You appear to have an extra closing </div> before the </fb:else> tag.
Also, remember that if you’re viewing the page and your an admin of the page, you’re going to see both the fans and non-fans content.
I’d also get rid of the z-index style.
#37 by DJ NightLife - July 13th, 2010 at 17:41
Everything is working fine, except that when you like the page, the content doesn’t show up anymore, the negative margin seems to apply for the ‘new’ content… Help ?
Here is my code: http://pastebin.com/eyJ4QBCU
#38 by timware - July 13th, 2010 at 21:35
This is tricky. I tested your code and it’s basically fine. What I would do is 1) transfer styles to an external stylesheet, rather than inlining the styles — creating separate IDs for the top and bottom pieces; 2) Although your rather non-standard way of using HREF tags to include all the styles seems to sort of work, you might try making IDs for each of those 3 linked graphics, assigning all the styles to each, and surrounding those DIVs with the HREF tags.
I see exactly what you’re seeing.
One thing, you don’t need the single quotes around the URLs in the url( …. ) styles. Just: url(http://…… .jpg);
Let me know how it turns out. Nice designs, BTW.
#39 by DJ NightLife - July 13th, 2010 at 23:34
http://www.w3schools.com/css/pr_background-image.asp
Says the single quotes are required on background-image property.
And what do you mean by “non-standard way of using href” ?
Are you sure Facebook can handle a link tag to an external stylesheet?
#40 by DJ NightLife - July 14th, 2010 at 00:02
Honestly, I gave up… With a tag it ended that only admin side could see the design, it was completely blank for other users. I’m so tired of Facebook with their weird non-standard coding.
I’ll let it with a “Click like” mention even for ‘already fans’.
#41 by timware - July 14th, 2010 at 05:24
DJ Nightlife: Although most browsers will handle quotes around the background-image URL property, it’s non-standard and ill-advised, regardless of what W3 School says. I learned CSS years ago and have stayed up on it and Eric Meyer and the other “gurus” of CSS don’t use quotes and apparently some browsers choked on the quotes. Although they’ll usually work, because Facebook is such a weird & unpredictable platform on which to develop, I’d stick to the tried & true. There’s my 2c on that.
Generally, it’s better to use external stylesheets with Facebook, although the server on which they cache your stylesheets sometimes goes down, but I’ve found that overall it’s better to go the external route. And easier to maintain.
What I meant by non-standard method of using the HREF tag is that you’re turning it into a container object and not linking an object — surrounding text or an image — with the <a href….></a> tags. Although it seems to be working somehow, I’ve never seen this done and I believe it’s not a good way to do it and, again, with Facebook, I’d stick close to standard use of CSS.
Take it or leave it, and it looks like you’re leaving it.
#42 by Subail Sunny - July 16th, 2010 at 10:02
hello tim,
i want to create a tab that will check the user whether he is a fan or not. if he is a fan then it will show a link. by clicking that link a textarea will show up. if click the link the box is not showing up. my code is given below.
[ FBML deleted ]
<script type="text/javascript">
<!--
function show_box(){
var code="<textarea cols='45' rows='6' readonly='readonly' >We will soon supply the CODE.</textarea>";
document.getElementById('box').setInnerFBML(code);
}
//-->
</script>
please help me out. i am not understanding the java script part. will u make correction of my code? please
#43 by timware - July 16th, 2010 at 10:40
Your FBML looked fine. I can’t provide support for JavaScript or FBJS. Sorry.
#44 by Casey - July 20th, 2010 at 20:20
It took my reading the entire comment stream but I finally made my code work! Thanks so much Tim!
One side note, I did not understand at first that the tags required the as well. Once I made that fix, I was golden!
http://www.facebook.com/pages/CLB-Social-Communications/133815816653470?v=app_6009294086
#45 by yan - July 21st, 2010 at 08:15
Hello Tim.
Thank you for the usfull info.
I have a problem with my code. im getting a blank white square after a person pressed the like button. it seems like the non-fan contant is overlapping the fan contant.
here is my code:
<fb:fbml version="1.1">
<fb:visible-to-connection><img border="0" alt="" src="http://i1035.photobucket.com/albums/a432/yanroz/5bf32dce.jpg">
<fb:else><p style="margin-top:-720px;"><img border="0" alt="" src="http://i1035.photobucket.com/albums/a432/yanroz/mey-tav_plus_like.jpg"></p>
</fb:else>
</fb:visible-to-connection>
</fb:fbml>
Thanks
Yaniv
#46 by yan - July 21st, 2010 at 08:30
iv fixed the height isue but still the same result – please advise.
<fb:fbml version="1.1">
<div style="height:610px:">
<fb:visible-to-connection>
<img border="0" alt="" src="http://i1035.photobucket.com/albums/a432/yanroz/5bf32dce.jpg">
<fb:else><p style="margin-top:-610px;"><img border="0" alt="" src="http://i1035.photobucket.com/albums/a432/yanroz/mey-tav_plus_like.jpg"></p>
</fb:else>
</div>
</fb:visible-to-connection>
</div>
</fb:fbml>
thanks
#47 by timware - July 21st, 2010 at 09:15
You have a colon “:” instead of a semicolon:
<div style=”height:610px:”>
and remove the extra </div> before the </fb:visible-to-connection>
#48 by Sean - July 22nd, 2010 at 13:16
Hi there,
just came across this website in my search for a solution.
I want to post a piece of content on a website just to users that have liked the page (nothing to do with Fan page or being a Fan etc)
is this possible ?
Tnx
Sean
PS : Great job on your site – looks like a mine of info, and ill check it out in more detail shortly !
#49 by Boaz - July 22nd, 2010 at 13:24
It looks like the behavior is different between IE8 and Firefox. I have a very simple test code:
thank you for being our fanplease press the like button
On FireFox it works great but on IE when I like the page, the ‘non fans’ blank area, which is ‘pulled up’ by the negative margin, hides the fans text.
#50 by Boaz - July 22nd, 2010 at 14:05
Here is another solution that works on IE8, Firefox, Chrome (without using the negative margin method):
<div>
<div style="height: 800px;">
<fb:fbml version="1.1">
<fb:visible-to-connection>
<div style="position: absolute; top:0px;left:0px; width:100%; background-color:white">
thank you for being our fan
</div>
<fb:else>
please press the like button
</fb:else>
</fb:visible-to-connection>
</div>
<div>
#51 by timware - July 24th, 2010 at 10:13
Yes, absolute positioning can accomplish this, although it can also cause problems (but so can any code in the hands of the inexperienced!). As long as the absolute-positioned element is inside a containing element (eg DIV) that is set to “position:relative” it should be okay. Thanks!
#52 by yaniv - July 25th, 2010 at 00:26
Hi Boaz
Works like a charm!
10x!
#53 by Lara - July 28th, 2010 at 04:03
Thank you soooooooo much for this Tim, it took me a while as a complete non-html person, but I finally have it working!!!
#54 by Kathleen - July 28th, 2010 at 12:18
Tim, I’m wondering if there is a way to hide the non-fan content from the fans.
For example, if you have something the non-fans see like “To see this content, click the Like Button”, can you hide that from your fans?
Thanks
#55 by timware - July 28th, 2010 at 15:02
As clearly laid out in this post, this is exactly how it works. When a user “likes” the page, the fan content shows and the non-fan content disappears.
#56 by Kathleen - July 28th, 2010 at 15:57
As usual, you’re right. I was doing 10 things at once earlier, and missed that. Sorry. Great post.
#57 by Sandeep Chouksey - July 28th, 2010 at 17:21
Hey,
Can you hide entire tabs for non-fans? Only display the tab if its liked? Or does this only apply to content within the tabs?
Thanks.
Sandeep
#58 by timware - July 28th, 2010 at 17:55
That is a good question! You can’t do it with the top main tabs (Wall, Info, YourTab, YourTab), I don’t believe. You could probably do it on our multi-tab subnav as seen on our HyperArts fan page, but I don’t think that’s what you’re asking.
#59 by Sandeep Chouksey - July 29th, 2010 at 08:42
Yeh, I would like to entire tab element to now show up if you are a non-member and show up and be clickable if you are a member. But doesn’t seem like that can be done.
But here is another question? Is it possible to set it such that non-members can’t see the facebook fan page wall?? I don’t see it anywhere in the settings.
#60 by timware - July 29th, 2010 at 10:19
Can’t be done, as far as I know. I suppose Facebook wants to discourage gated communities.
#61 by Tess Losen - July 29th, 2010 at 07:00
<div style="height:648px;">
<fb:visible-to-connection>
<a href="http://www.johngroupinteractive.com/client_images/sunbelt/SUNBELT_July_Coupon.pdf"><img border="0" src="http://www.johngroupinteractive.com/client_images/sunbelt/8417_coupon_1.jpg" /></a>
<fb:else>
<p style="margin-top:-648px;">
<img border="0" src="http://www.johngroupinteractive.com/client_images/sunbelt/8417_coupon_2.jpg" />
</p>
</fb:else>
</fb:visible-to-connection>
</div>
I cannot figure out why this isn’t working. The only image that’s appearing is the fans-only image, and it isn’t linking to the pdf. I’m sure it’s a simple fix. Any thoughts?
#62 by timware - July 29th, 2010 at 19:12
I tested this and it works for me. However, you have the 2 images reversed. If one is a fan they see coupon_1 which is the image that DOESN’T ask the user to become a fan.
And remember that if you’re an admin of the page and logged in to facebook, you’ll see both versions and, with the negative margin, one image will cover the other.