Contractor Talk - Professional Construction and Remodeling Forum banner
Status
Not open for further replies.

Facebook Fan Pages: How to Show / Hide Content from Fans

53K views 29 replies 26 participants last post by  Cole 
#1 · (Edited)
You may have seen this on a couple of Facebook fan pages before and probably thought, that's cool, how are they doing that. Well I am going to show you how they are showing certain content to fans who have "liked" the page and a complete different content to "non-fans", who have not "liked" the page. It's basically a big call to action, "Like us and you will receive something in return." In the end, you get exposure to new fans you might not have gotten and if your content is unique and people are interested, it can lead to new jobs. It's not hard to implement this code, but it can be confusing and I will help as much as I can.

With all that said, lets take a look at some examples: (Like the page to see it change)

http://www.facebook.com/1800flowers

http://www.facebook.com/RussellMackenna

http://www.facebook.com/TulsaWoodscapes (Yes this is my own and what I will be showing you how to create)





NOTE: If you are an admin of the page, you can easily get confused about whether or not everything is working correctly. If you're an admin on the Fan page and you're logged in, you will see the content whether or not you're actually a fan of the page. Let me break this down some more, in our situation you will see both images on top of one another. You must make a fake Facebook account to test your page, or have someone you know check the page by "liking and "un-liking" the page. ContractorTalk members can test your page as well, so you should have no problem finding someone to test it, as long as they're not an admin on the page.

1. Install the Static FBML Application on Facebook
http://www.facebook.com/apps/application.php?id=4949752878

On the left hand side under the image, you will see this text, "Add to my Page." Click on it and a popup will appear, find your Fan page and click, "Add to Page." Click Close.




2. Find your Page on Facebook and go to it. (IE: Search for your Page) Once you are on your page, on the left hand side under your profile photo click, "Edit Page."




3. Scroll down and look for the FBML Application. Click the "Application Settings" and make sure the tab is added. Click Okay.






4. Now while still looking at FBML Application, click the "Edit" text under the FBML title. You will be redirected to a new window. Here is where we will implement our code but let's first give the new tab button a title. In my case, we went with, "Welcome." So in the "Box Title", input what you want your tab title to be called and click, "Save Changes." From here you will see a new box at the top saying, "Changes saved." We are done in here for now and need to go back to your main page edit section, so look above the "Edit FBML" title,
for your page name and the text "edit", click the "edit" link to head back to your page editing section.




5. Now we need to go change a setting so that non fans once they click on your fan page, land on the new FBML tab you added. While you are still in the edit section of your page scroll to the top and find the, "Wall Settings." Click the "Edit" text, right under the title and it will expand. Here you have some decisions they are all up to you, we just need to change one setting. Look for the, "Default Landing Tab for Everyone Else" text. Click the drop down menu and find the name of the tab you added. So from now on, "Non-Fans" will land on the new tab you added. "Fans" will land on the default wall as usual.




6. Create the images. I don't care how you create your images or what content you use on your images, just make sure they are 520px max width. In my case, the images I created are 520px x 650px. You will need 2 images, one for "non-fans", which hopefully will entice them to "like" your page. You will need another image for fans, who "like" your page. In my case, I went with a 10% coupon. The great thing is you can change this coupon as much as you want. You can run a sweepstakes etc.. The possibilities are endless.





7. First things first, host your images through your own web server or a photo hosting service. (IE: Photobucket.com)


8. Let's create a css file to position the images where we want them. That is done with the following code:

Code:
#wrapper {
width:520px;
height:650px;
margin:0 auto; border:0; padding:0;
position:relative;
}

#non-fans {
width:520px;
height:650px;
position:absolute; top:0px; left:0;
}
Save this text in a file and give it a .css extension. You will now need to host that css file on a web server or on google sites. I could go on about how we are positioning the "non-fan" image with absolute positioning but honestly, you don't need to know how I did it, to implement this on Facebook. If some people request how and what absolute positioning is and does, I will put up another tutorial.


9. Now, I am going to assume you have both images created and hosted and the css file hosted as well. Well let's get started writing the code!


10. Once again, the code is written for 2 images, both the same size. I could once again break down what the code is doing etc.. but unless you are interested in html, you can implement the code without knowing what each line of code is doing. If we have some people requesting a breakdown, I will put together another tutorial. So look at the following code to get an idea of how I setup the FBML code. You can copy the code, word for word. Of course if you have different image sizes, you will need to change the value for each of those.

Code:
<fb:fbml version="1.1">

<link rel="stylesheet" href="http://www.tulsawoodscapes.com/images/facebook/style.css" />

<div id="wrapper">
<fb:visible-to-connection>

<img src="http://www.tulsawoodscapes.com/images/facebook/fan.jpg" width="520" height="650" border="0"/>

<fb:else><div id="non-fans"><img src="http://www.tulsawoodscapes.com/images/facebook/non_fan.jpg" width="520" height="650" border="0"/></div></fb:else>

</fb:visible-to-connection>
</div>

</fb:fbml>

11. Follow steps 2-5 to get back to the FBML edit box. Once there, copy and paste your updated code into the box and click, "Save Changes." You will once again, see the bar at the top stating that everything has been saved.


12. Log out of your admin status and into your wifes / girlfriends / friends etc.. profile and find your Facebook Fan Page. Do you see the image you created for "Non-Fans", if so click the "like" button, did the image change to the image you created for "Fans" of your page? If not, double check all the code and this tutorial. If you still are having problems, reply to this thread and let's get it fixed.


SOME NOTES: If you are logged in as an "Admin" of the page, you will see both the non-fan and the fan content. In our case, both images are stacked. You must log out and either have someone else check it for you or create a fake profile to check your work. To test the page, click the "like" button at the top of the page. To, "unlike" a page scroll to the bottom left hand side of the page and you will find a link that says, "Unlike." As always it is a good idea to cross broswer check everything.
 
See less See more
8
#3 ·
Please show me how to create, add and host my css file
everything was useful until the css part.

I have created the .css in notepad by copying:


Code:
#wrapper {
width:520px;
height:650px;
margin:0 auto; border:0; padding:0;
position:relative;
}

#non-fans {
width:520px;
height:650px;
position:absolute; top:0px; left:0;
}
Was I suppose to add anything to this code?
If not this code is on my computer and I do not know how to host it.
Please give us a step by step tutorial on how to host using google sites.
i have my images, script and everything else needed to accomplish the next steps.
I just do not know how to make the .css file into a url
thanks in advance man.
 
#5 ·
Please show me how to create, add and host my css file
everything was useful until the css part.

I have created the .css in notepad by copying:


Code:
#wrapper {
width:520px;
height:650px;
margin:0 auto; border:0; padding:0;
position:relative;
}

#non-fans {
width:520px;
height:650px;
position:absolute; top:0px; left:0;
}
Was I suppose to add anything to this code?
If not this code is on my computer and I do not know how to host it.
Please give us a step by step tutorial on how to host using google sites.
i have my images, script and everything else needed to accomplish the next steps.
I just do not know how to make the .css file into a url
thanks in advance man.
leave out the "code:" line, it should look like this:

#wrapper {
width:520px;
height:650px;
margin:0 auto; border:0; padding:0;
position:relative;
}

#non-fans {
width:520px;
height:650px;
position:absolute; top:0px; left:0;
}


then upload it to your webserver, and you can link to it with a link tag.
 
#12 ·
I am new at this and wanted to thank you for the info. I plan on modifying my page today. I have noticed the just by adding a "like us on facebook" button, it has made us easier to find on google. Does anyone have any experience with the facebook platform that has recently been released? Thanks again!:thumbup:
 
#17 · (Edited)
Really good, informative post! We've implemented something to this effect on our FB 'fan page' (and will now try to put some of your info into action!). The competition for a unique and intriguing FB page / landing page is on a rapid rise! It's interesting to see what many companies come up with. Gotta do your best to stay ahead of the game!

Thanks
 
Status
Not open for further replies.
You have insufficient privileges to reply here.
Top