Facebook Fan Pages: How To Show / Hide Content From Fans

 
Thread Tools Search this Thread Display Modes
Old 10-11-2010, 07:07 PM   #1
Mod / ArchiBuilder

 
Cole's Avatar
 
Trade: Design/Build Pergolas & Pavilions
Join Date: Aug 2004
Location: ArkLaTexOma
Posts: 6,936
Rewards Points: 1,480
Post

Facebook Fan Pages: How To Show / Hide Content From Fans


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/applica...?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;
}[/CODE]

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>[/CODE]


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.

Last edited by Cole; 10-11-2010 at 08:18 PM.
Cole is offline  
The Following 3 Users Say Thank You to Cole For This Useful Post:
stephensaugnier (08-16-2016), TheFloorSource (08-21-2011), unhique (12-10-2010)

Warning: The topics covered on this site include activities in which there exists the potential for serious injury or death. ContractorTalk.com DOES NOT guarantee the accuracy or completeness of any information contained on this site. Always use proper safety precaution and reference reliable outside sources before attempting any construction or remodeling task!

   

Advertisement

 

Old 10-11-2010, 07:08 PM   #2
Mod / ArchiBuilder

 
Cole's Avatar
 
Trade: Design/Build Pergolas & Pavilions
Join Date: Aug 2004
Location: ArkLaTexOma
Posts: 6,936
Rewards Points: 1,480

Re: Facebook Fan Pages: How To Show / Hide Content From Fans


The next tutorial will be, how to embed a Youtube video in an FBML Page.

Advertisement


Last edited by Cole; 10-11-2010 at 07:12 PM.
Cole is offline  
The Following 3 Users Say Thank You to Cole For This Useful Post:
TorontoPlumbers (07-23-2012), unhique (12-10-2010), world llc (08-21-2011)
Old 01-30-2011, 08:33 PM   #3
Registered User
 
Dave-o's Avatar
 
Trade: Moving and Reconstructing
Join Date: Jan 2011
Posts: 1
Rewards Points: 10

Re: Facebook Fan Pages: How To Show / Hide Content From Fans


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.
Dave-o is offline  
   
 
Old 01-30-2011, 10:31 PM   #4
Pro
 
alongston's Avatar
 
Trade: Plumber
Join Date: Dec 2010
Posts: 103
Rewards Points: 75

Re: Facebook Fan Pages: How To Show / Hide Content From Fans


Great post, thanks for the time you spent typing this out to show people how to do it.
__________________
Denver Plumbers, HVAC Denver
alongston is offline  
Old 03-04-2011, 10:36 AM   #5
The Dude
 
smalpierre's Avatar
 
Trade: home improvement
Join Date: Jan 2011
Location: Sunny South Florida!
Posts: 2,019
Rewards Points: 1,946

Re: Facebook Fan Pages: How To Show / Hide Content From Fans


Quote:
Originally Posted by Dave-o View Post
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.
smalpierre is offline  
Old 03-04-2011, 04:02 PM   #6
Member
 
FramerKMC's Avatar
 
Trade: Framing
Join Date: Feb 2011
Location: Connecticut
Posts: 67
Rewards Points: 99

Re: Facebook Fan Pages: How To Show / Hide Content From Fans


Wow that was a little hightech there. I took the advice about opening a fake account to check how the settings work. Even though they offer a preview option it is hard to see how things look like for somebody you added with a filter. I filter people who add me without telling me who they are and where they found me.
__________________
Keith- Framer.http://www.keithmillerconstruction.com/
Facebook
FramerKMC is offline  
Old 03-06-2011, 09:53 AM   #7
Dan
 
ApgarNJ's Avatar
 
Trade: Remodeling Contractor
Join Date: Apr 2006
Location: Stockton, NJ
Posts: 4,822
Rewards Points: 2,000
Send a message via AIM to ApgarNJ

Re: Facebook Fan Pages: How To Show / Hide Content From Fans


I have it setup so that anyone who visits the page who isn't a fan is directed towards the About page, and it's a page by pagemondo , may have spelled that wrong but it works great.
ApgarNJ is offline  
Old 03-15-2011, 11:53 PM   #8
Pro
 
RhodesHardwood's Avatar
 
Trade: Hardwood Floors
Join Date: Jun 2010
Location: Minneapolis
Posts: 1,144
Rewards Points: 590

Re: Facebook Fan Pages: How To Show / Hide Content From Fans


Great post.
RhodesHardwood is offline  
Old 03-19-2011, 11:23 AM   #9
New Guy
 
bigbuckeye's Avatar
 
Trade: Painting
Join Date: Feb 2011
Posts: 23
Rewards Points: 10

Re: Facebook Fan Pages: How To Show / Hide Content From Fans


Is there tangible proof that face book, linked in increase your sales and business.
bigbuckeye is offline  
Old 03-27-2011, 08:58 PM   #10
Member
 
FramerKMC's Avatar
 
Trade: Framing
Join Date: Feb 2011
Location: Connecticut
Posts: 67
Rewards Points: 99

Re: Facebook Fan Pages: How To Show / Hide Content From Fans


It seems that FB is again making changes that make thing more complicated or impossible. I got stuck during the steps, after installing FBML I could get to the option of "Wall Settings" and after looking everywhere I got this answer
__________________
Keith- Framer.http://www.keithmillerconstruction.com/
Facebook
FramerKMC is offline  
Old 06-22-2011, 02:57 AM   #11
Stone21
 
stone21's Avatar
 
Trade: granite
Join Date: Jul 2008
Location: China
Posts: 27
Rewards Points: 25
Send a message via MSN to stone21

Re: Facebook Fan Pages: How To Show / Hide Content From Fans


Very useful information, great ! I will check my facebook account later
__________________
Best regards,
K.Lee
Stone group
stone21 is offline  
Old 08-21-2011, 12:37 PM   #12
Registered User
 
TheFloorSource's Avatar
 
Trade: Hardwood/Laminate/Vinyl Flooring
Join Date: Aug 2011
Location: Tampa Bay, Florida
Posts: 1
Rewards Points: 10

Re: Facebook Fan Pages: How To Show / Hide Content From Fans


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!
TheFloorSource is offline  
Old 09-19-2011, 04:06 PM   #13
Registered User
 
brad222's Avatar
 
Join Date: Sep 2011
Posts: 8
Rewards Points: 10

Re: Facebook Fan Pages: How To Show / Hide Content From Fans


Thanks for the help. Some hi-tech stuff, but totally made our page look better. Thanks for the tips.
Atlanta Fence Companies | Fence Contractors | Fence Installers
brad222 is offline  
Old 11-10-2011, 10:58 PM   #14
Registered User
 
GARConst11's Avatar
 
Trade: Homes
Join Date: Nov 2011
Location: AR
Posts: 14
Rewards Points: 10

Re: Facebook Fan Pages: How To Show / Hide Content From Fans


Thanks for sharing all the tips on this subject.
GARConst11 is offline  
Old 11-29-2011, 05:07 PM   #15
Registered User
 
GARConst11's Avatar
 
Trade: Homes
Join Date: Nov 2011
Location: AR
Posts: 14
Rewards Points: 10

Re: Facebook Fan Pages: How To Show / Hide Content From Fans


Great info - thanks for the details, although I heard FB wasn't going to be hosting the FBML as of June 1 of 2012, I dont know if this is for sure but it was posted somewhere on FB??
GARConst11 is offline  
Old 12-14-2011, 12:24 PM   #16
Registered User
 
StuartW's Avatar
 
Trade: Roofing
Join Date: Dec 2011
Location: Lincoln, NE
Posts: 3
Rewards Points: 10

Re: Facebook Fan Pages: How To Show / Hide Content From Fans


Awesome info...
StuartW is offline  
Old 02-07-2012, 02:39 PM   #17
Member
 
ReVisionsWindow's Avatar
 
Trade: Windows and Doors
Join Date: Apr 2011
Location: Cincinnati
Posts: 33
Rewards Points: 25

Re: Facebook Fan Pages: How To Show / Hide Content From Fans


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

Last edited by ReVisionsWindow; 02-07-2012 at 02:47 PM.
ReVisionsWindow is offline  
Old 06-04-2012, 02:46 PM   #18
Member
 
thecabinetguy's Avatar
 
Trade: Cabinetry
Join Date: Jun 2012
Location: San Jose, CA
Posts: 77
Rewards Points: 75

Re: Facebook Fan Pages: How To Show / Hide Content From Fans


Thanks for the great info!
thecabinetguy is offline  
Old 06-07-2012, 09:07 PM   #19
New Guy
 
plumbingcali's Avatar
 
Trade: Plumber
Join Date: Jun 2012
Location: Riverside, Ca
Posts: 20
Rewards Points: 10

Re: Facebook Fan Pages: How To Show / Hide Content From Fans


Great Information and details.
plumbingcali is offline  
Old 07-24-2012, 08:11 AM   #20
New Guy
 
SaniGLAZE's Avatar
 
Trade: Tile and Grout Restoration
Join Date: Apr 2012
Location: Jacksonville
Posts: 21
Rewards Points: 10

Re: Facebook Fan Pages: How To Show / Hide Content From Fans


Very helpful post. It looks like Facebook is always changing though. It's hard to keep up with social media. Do you think all companies need it?

Advertisement

__________________
SaniGLAZE - Tile and Grout Restoration Services
SaniGLAZE is offline  

Tags
code , facebook , fan content , fiveash renovaitons , html , non fan content


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Real Local Pages.com another yellow Pages company festerized Marketing & Sales 2 03-19-2010 08:42 PM
How can I PM someone? supwd Site Feedback and Suggestions 19 02-17-2010 01:29 AM
Facebook Settings? DaVinciRemodel Marketing & Sales 16 01-24-2010 09:38 AM
Is Yellow Pages working for you? cbscreative Marketing & Sales 41 11-01-2009 12:23 AM
Suggestions for License Test Content dokuhaku Flooring 6 11-26-2008 10:02 AM

Join Now... It's Fast and FREE!

I am a professional contractor
I am a DIY Homeowner
Drywall Talk is for
PROFESSIONAL CONTRACTORS ONLY!

At DrywallTalk.com we cater exlusivly to professional contractors who make their living as a contractor. Knowing that many homeowners and DIYers are looking for a community to call home, we've created www.DIYChatroom.com DIY Chatroom is full of helpful advices and perfect for DIY homeowners.

Redirecing in 10 seconds
No Thanks
terms of service

Already Have an Account?