Digital Points
Hi... My Dear Visitor nice to meet you here in this forum kindly register for being in touch with us..... Smile Smile



 
HomePortalCalendarGalleryFAQSearchMemberlistUsergroupsRegisterLog in
Affiliates

Latest topics
» SEO Stater to do list
Facebook Fan Pages - Show Content to Fans - Hide from Non-Fans - FBML - Reveal Tab  EmptyFri Feb 15, 2013 3:17 pm by rachil

» Top 55 Social Bookmarking Websites
Facebook Fan Pages - Show Content to Fans - Hide from Non-Fans - FBML - Reveal Tab  EmptyFri Feb 15, 2013 3:13 pm by rachil

» Hiiiiiiiiiiii
Facebook Fan Pages - Show Content to Fans - Hide from Non-Fans - FBML - Reveal Tab  EmptyTue Feb 05, 2013 5:01 pm by boon_pal

» Analytics tool
Facebook Fan Pages - Show Content to Fans - Hide from Non-Fans - FBML - Reveal Tab  EmptyTue Feb 05, 2013 4:49 pm by boon_pal

» Benefits of Search Engine Optimization
Facebook Fan Pages - Show Content to Fans - Hide from Non-Fans - FBML - Reveal Tab  EmptySat Jan 19, 2013 12:09 am by fivestarawards

» Basic job of a SEO is to optimize a website
Facebook Fan Pages - Show Content to Fans - Hide from Non-Fans - FBML - Reveal Tab  EmptyThu Jan 17, 2013 8:35 pm by boon_pal

» what is the SEO and SEM Difference
Facebook Fan Pages - Show Content to Fans - Hide from Non-Fans - FBML - Reveal Tab  EmptyThu Jan 17, 2013 8:32 pm by boon_pal

» Google Dancing
Facebook Fan Pages - Show Content to Fans - Hide from Non-Fans - FBML - Reveal Tab  EmptyThu Jan 17, 2013 8:17 pm by boon_pal

» how to increase websites page rank
Facebook Fan Pages - Show Content to Fans - Hide from Non-Fans - FBML - Reveal Tab  EmptyWed Dec 26, 2012 10:30 pm by fivestarawards

September 2019
MonTueWedThuFriSatSun
      1
2345678
9101112131415
16171819202122
23242526272829
30      
CalendarCalendar
Social bookmarking
Social bookmarking digg  Social bookmarking delicious  Social bookmarking reddit  Social bookmarking stumbleupon  Social bookmarking slashdot  Social bookmarking yahoo  Social bookmarking google  Social bookmarking blogmarks  Social bookmarking live      

Bookmark and share the address of Digital Points on your social bookmarking website
Sponsors

Share
 

 Facebook Fan Pages - Show Content to Fans - Hide from Non-Fans - FBML - Reveal Tab

Go down 
AuthorMessage
sasikumar

sasikumar

Posts : 47
Points : 144
Reputation : 6
Join date : 2011-09-21

Facebook Fan Pages - Show Content to Fans - Hide from Non-Fans - FBML - Reveal Tab  Empty
PostSubject: Facebook Fan Pages - Show Content to Fans - Hide from Non-Fans - FBML - Reveal Tab    Facebook Fan Pages - Show Content to Fans - Hide from Non-Fans - FBML - Reveal Tab  EmptyMon Sep 26, 2011 6:06 pm

[Facebook FBML] 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: 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, seeing either both fan and non-fan content, or one or the other images covering each other.

ALSO NOTE: You no longer need to have the <fb:fbml version="1.1"> </fb:fbml> tags, as much documentation on the Web specifies.

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!

See the Troubleshooting Your FBML Code and Testing Your FBML Code sections, below.

How to Show Different Content to Fans and non-Fans - Reveal Tab
Code:

    <fb:visible-to-connection>
    Fans will see this content.
    <fb:else>Non-fans will see this content.</fb:else>
    </fb:visible-to-connection>

Removing the Space above the Non-Fan Content

The best way to prevent the non-fan content from pushing the fan content down the page, use this method:

Use "position: absolute" CSS which takes the non-fan content out of the document flow (See this article on using the CSS absolute-position element) and positions it relative to its containing element (usually a DIV).

In the following example, I have given the containing DIV the ID "wrapper" and used CSS to style it "position: relative". Then the non-fans content is in the DIV with the ID "non-fans" and is "position: absolute" and is set to be flush against the left and top margins of the "wrapper" DIV:

The code in the FBML box:

Code:
 <div id="wrapper">
    <fb:visible-to-connection>
    FANS-ONLY CONTENT
    <fb:else>
    <div id="non-fans">CONTENT FOR NON-FANS</div>
    </fb:else>
    </fb:visible-to-connection>
    </div>

The CSS:

Code:
  #wrapper {
    width:520px;
    margin:0 auto; border:0; padding:0;
    position:relative;
    }
    #non-fans {
    width:520px;
    position:absolute; top:0; left:0;
    }
When using the "position:absolute" in CSS the crucial thing to remember is that the element you're positioning absolute will be positioned RELATIVE to the element in which it's contained.

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.

# 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;

Testing your Show/Hide Code

It's important to remember that if you're logged in to Facebook as the user who is the Page admin, you will see both the fans-only and non-fans content.

To properly test your code:

* Set up a new Facebook personal profile, to be used just for testing purposes;
* Log in the Facebook as that new test user and view your Page;
* If you see the "Like" button at the top, then you're not yet a fan (duh!);
* Assuming you're not yet a fan, you should see the content of <fb:else>
* Click the "Like" button; you should then see the fans-only content and the non-fan content will be invisible;

If you need to do tweaking to the code and re-testing, you'll have to log out as the test user and log back in as the admin to edit the Static FBML.

TIP: Open, say, Firefox and be logged in there as the page admin, and do your testing in a different browser (Internet Explorer or Safari) logged in as the test user. Then you can just switch between browsers to edit and test.

To "Unlike" a Page you've Liked, click on the Wall tab and scroll down to the last links in the left column. You'll see the "Unlike" link:
[unlike]
So you can toggle back and forth between being and fan and not being a fan to test your code.
Back to top Go down
View user profile https://digitalpoints.forumotion.com
 
Facebook Fan Pages - Show Content to Fans - Hide from Non-Fans - FBML - Reveal Tab
Back to top 
Page 1 of 1

Permissions in this forum:You cannot reply to topics in this forum
Digital Points :: Marketing :: Social Networks :: Face Book-
Jump to: