Talk:Fan Box
From Facebook Developer Wiki
[edit] Bug with connections parameter?
The number of fans to display in the Fan box stays at 10 no matter what I change the connections parameter to. Anyone else getting this?
- Please post your code or URL to your site so we can investigate. Thanks, Pete -- 563683308 09:35, 23 November 2009 (PST)
[edit] Secure version of Fanbox?
I need a secure (https) version of the fanbox and/or badge to put on my site. If I use the provided code where the content is fetched from an insecure site (http) I get security warnings in Internet Explorer. When will you support that?
- We already do. Just change the FeatureLoader script to:
- <script type="text/javascript" src="https://www.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php"></script>
+++++++++++++++++++++++++++++++++++++++++++++++
[edit] Haven't gotten an answer yet
Only small line of print shows up on my website I've tried everything... here is the link that it's telling me to copy and paste...can someone pleaaaaaaaase tell me what's wrong and provide me with a link that will work! Thanks the url we are trying to put it on is www.patchproducts.com (we would like to put the box where the back to school button is)
<script type="text/javascript" src="http://static.ak.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/en_US"></script><script type="text/javascript">FB.init("b10314bed2068b4b379f3653595cca87");</script><fb:fan profile_id="276247305120" stream="" connections="" width="300"></fb:fan>
<a href="http://www.facebook.com/pages/UberStix/276247305120">ÜberStix</a> on Facebook
This code breaks XHTML validation. Not good. Not usable. <fb:fan> tag should be replaced.
+++++++++++++++++++++++++++++++++++++++++++++++
Can I confirm that it's not possible to render a Fan Box within a Fan page? A client is running a contest that looks like "become a fan, go to our external site, and sign up for our product". I wanted a Fan Box inside a dialog, with a link to their external site below it. I can't get any of the iFrame options to show up on the Fan page. I'm using the Static FBML application. Thanks.
- That won't work. There's already a link on the Page for a user to become a fan. Pete (563683308 14:38, 10 September 2009 (PDT))
+++++++++++++++++++++++++++++++++++++++++++++++
Only small line of print shows up on my website I've tried everything... here is the link that it's telling me to copy and paste...can someone pleaaaaaaaase tell me what's wrong and provide me with a link that will work! Thanks
<script type="text/javascript" src="http://static.ak.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/en_US"></script><script type="text/javascript">FB.init("b10314bed2068b4b379f3653595cca87");</script><fb:fan profile_id="276247305120" stream="" connections="" width="300"></fb:fan>- Please supply the URL to your site so we can take a look. Thanks, Pete (563683308 18:29, 8 September 2009 (PDT))
the url is www.patchproducts.com
(we would like to put the box where the back to school button is)Is that possible?
Thanks for looking into this Pete
[edit] ===========================================================
Hi, I just tried to use the iFrame instructions in WordPress, and came up with nothing displayed except a teeny-tiny link to my business page on FB. The Javascript version didn't work either. Suggestions?
- Please supply a URL and we'll investigate when we can. Thanks, Pete (563683308 11:53, 3 September 2009 (PDT))
+++++++++++++++++++++++++++++++++++++++++++++++
I have a rather stupid question/suggestion. Under "Customizing the Fan Box/height" it suggests that you can just include the Become a Fan button, rather than the name of your site and the badge above the button, but there aren't any explicit instructions on how to do this elsewhere. I assume it just involves deleting particular parts of the code, but I can't seem to do this without getting rid of the button as well. Could instructions that be added to the main article?
"The height of the Fan Box in pixels. The height defaults based on the elements you include in the Fan Box. For a Fan Box that contains only the Become a Fan button, but no stream or friends, the height is 64 pixels. If you include all the features, the Fan Box is 554 pixels high. If you change the number of connections shown, you may need to edit the height to ensure they are all visible."
HELP! I have installed the Fan Box from the wizard. Chose "+ OTher" and then copy pasted it to a page. All that is showing is the Page Name on Facebook part at the bottom of the box.
Any ideas?
http://slugstore.ucsc.edu/ePOS?form=shared3/gm/main.html&this_category=223&store=721
+++++++++++
Looks LIke the iFrame works however.
[edit] Is it possible to limit the number of stream stories in FanBox?
I have this page in FB that's updated with several stories a day.
I would like to limit the Fan Box to the last X entries, this way i wouldn't have to scroll a huge list.
Thanks in advance.
- Not at this time, no. Pete (563683308 11:05, 7 August 2009 (PDT))
¿can it be embed into a Wiki page? [1]
- Doubtful. Wikis typically don't allow JavaScript or iframes to be embedded for security purposes. Pete (563683308 12:07, 27 July 2009 (PDT))
<script src="http://www.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script> <script type="text/javascript">FB.init("API_KEY", "");</script> <fb:fan profile_id="YOUR_PAGE_ID" stream="1" connections="10" width="300"></fb:fan> <a href="VANITY_URL">PAGE_NAME</a> on Facebook
Above code works perfectly fine in Mozilla Firefox. The fan box gets rendered properly. But the same code doesn't render a fan box in IE,chrome and not even in Safari. Request admin to please check in and update the post accordingly.
PS : The Iframe version of code works fine in all browsers.
- Chirag Mehta
- Thanks for reporting this. We've seen another instance of this, so I added a Known Issues section to the article. Pete (563683308 14:57, 8 July 2009 (PDT))
- The widget cannot be embeded on myspace. It displays something like the following as a result:
......FB.init("1610e8bdf51593a908fcf85cf2075935");...... Sample_Page on Facebook
- iframe code also gives a similar result:
<[iframe] scrolling="no" frameborder="0" src="http://www.facebook.com/connect/connect.php? id=&connections=10&stream=1" allowtransparency="true" style="border: none; width: 300px; height: 550px;">.. Sample_Page on Facebook
- Most of the widgets related with music and collecting fans embed well into myspace. I think this is an important ability to have, since myspace functions as a musician's directory and we(musicians) put a great effort to acquire fans to our pages from myspace visitors.
- myspace doesn't allow iframes on profiles; it's against their developer TOS. You can put an iframe in a myspace application on the canvas page.
[edit] Fan Box Won't Load
I have put a fan box on my business website [2] but can't get it to work properly. Any help would be much appreciated and thanx to those who have helped in the past :o)
- Hi Nikki, it looks like you're encoding your iframe incorrectly. Your code is:
- <iframe scrolling="auto" height="550px" frameborder="0" width="800px" align="left" marginheight="0px" marginwidth="0px" &connections="10&stream=1&css=PATH_TO_STYLE_SHEET"" 92789211430="" src="http://www.facebook.com/connect/connect.php?id=">
- but it should be:
- <iframe scrolling="auto" frameborder="0" style="height:550px; width:800px;" src="http://www.facebook.com/connect/connect.php?id=92789211430&connections=10&stream=1"></iframe>
- Pete (563683308 17:51, 19 August 2009 (PDT))
Previous Problems:
I have tried to add a fan box to my website [3] but it only half loads the box and will not let me view the page.
I'm using Microsoft Office Live to build my site and used a feature called module > HTML which should allow me to insert the code. When I use the Java script code, it asks me to save a file. I'm not sure what this is but don't think users would want to do this. When I use the iframe code it only shows half a page and won't allow page to be viewed.
Could anybody help me and see if there are faults in my code? I'm new to this and really have no idea what I'm doing!
The code facebook generated is:
<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script><script type="text/javascript">FB.init("3651c3986184e6529f85fad1aec98ddc");</script><fb:fan profile_id="92789211430" stream="1" connections="10" width="300"></fb:fan>
This didn't work and the web design program says: To make script tags using the "src" attribute work correctly when using the HTML module, defer="defer" has been added after the URL.
So I tried the iframe code from the fan box article:
<iframe scrolling="no" frameborder="0" src="http://www.facebook.com/connect/connect.php? id=&connections=10&stream=1"
allowtransparency="true" style="border: none; width: 300px; height: 550px;"></iframe>
And changed the bits I thought I needed to:
<iframe scrolling="no" frameborder="0" src="http://static.ak.connect.facebook.com/connect/connect.php? id=&connections=10&stream=1"
allowtransparency="true" style="border: none; width: 300px; height: 550px;"></iframe>
Any help would be much appreciated :o)
- For the JavaScript version, can you supply a URL to your page?
- For the iframe, the URL has a space in it. It should be:
src="http://static.ak.connect.facebook.com/connect/connect.php?id=&connections=10&stream=1"
- See if this works for you. Thanks, Pete (563683308 11:33, 10 July 2009 (PDT))
I agree about the comment regarding adding the fan box to myspace pages. Has there been any developments with that?????
- myspace doesn't allow iframes on profiles; it's against their developer TOS. You can put an iframe in a myspace application on the canvas page. Pete (563683308 13:15, 13 July 2009 (PDT))
Thanks.
RE: FAN BOX WON'T LOAD
I tried your code, the only difference it makes is the half loaded fan box shows in my web design program.
The java code is:
<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript" defer="defer"></script><script type="text/javascript">FB.init("3651c3986184e6529f85fad1aec98ddc");</script><fb:fan profile_id="92789211430" stream="1" connections="10" width="300"></fb:fan>See the defer="defer" which my web design program automatically inserts.
Thanks for your help Pete
- I followed up with the engineer. First, add a defer="defer" to the script for FB.init. What might be happening is your code is trying to initialize the Facebook connection before it loads the features, which are being deferred by the first defer="defer". Like this:
- If that doesn't work, try adding FB.Host.parseDOMTree to your FB.init script:
- And if that doesn't work, can you try using the IFrame method, as mentioned in the docs? Pete (563683308 13:15, 13 July 2009 (PDT))
- Binhvn Hi all, i tried to put Fan Box to Wordpress blog by using add Text Widget but it doesn't work, after paste FB code to Text box, on the Side bar appear this text:
I tried all your solutions above but seem not work Thank so much for all your help
Pete's suggestion of adding FB.Host.parseDOMTree to your FB.init script worked for me! It was the only solution that did. I use Wordpress hosted on HostMonster.
[edit] Stream needed?
When i try to produce a fanbox that just has the join button and the Fans section it doesn't work for me, the code just produces a small text link to my facebook page, when the option to include the stream is selected the full fanbox works, but as the stream and the site i'm putting it on have similar content i'd rather remove the stream section for a smaller fanbox. I'm using Chrome if that makes a difference? Thanks
- This was tested in Chrome and the engineer didn't notice this behavior. Are you still seeing it? Pete (563683308 13:37, 10 July 2009 (PDT))
yes - if i manually edit the code to not display the stream it works fine, it is just when I am using the wizard it doesn't generate properly
- Could you please file a bug and include the URL where you put the Fan Box, the code from the wizard, and the code that works. Thanks! Pete (563683308 17:26, 27 August 2009 (PDT))
[edit] Can this be used on a group page?
Can the code be modified so this will work to drive people to join a group page?
I have this question too.
- No it can't. Thanks, Pete (563683308 13:37, 10 July 2009 (PDT))
[edit] iFrame
I'm trying to use iFrame
<iframe name="Advert" src="http://www.facebook.com/connect/connect.php?id=&connections=10&stream=0&css=99984372991" allowtransparency="true" scrolling="yes" width="308" frameborder="0" height="279"></iframe></div>
it's not working?
- What's the css parameter referencing? Is that a URL-encoded URL to your CSS? Pete (563683308 20:12, 10 July 2009 (PDT))
Huh? I just changed a few iFrame options, either way i can't make it work if I try to make the src into anything other than just the url of the page
- What does the &css=99984372991 refer to? You need to specify your Page ID for the id= Pete (563683308 11:16, 13 July 2009 (PDT))
[edit] Add a Fan Box???
it says, click on the link under my profile picture or edit my profile and click on add a fan box.
i don't see any such links anywhere.
do i need to make my profile public first?
or am i missing something.
- This works on a Facebook Page, not a personal profile. You need to be an admin of the Page in order to see the link. You can read about Facebook Pages at http://www.facebook.com/advertising/?pages Pete (563683308 11:10, 13 July 2009 (PDT))
I am the admin of my own profile, of course... but can't find any possibility to add my Fan page to my proile though...
[edit] Mutiple Fan Box on one page
I am trying to add multiple Fan Boxes on one page. The Script works fine in Safari and IE - but does not work in Firefox. The second box does not load and the only thing shown is the link. SEE - www.napachamber.com/members.html
Using one API key does not resolve the issue.
- Try referencing FeatureLoader and FB.init only one time. As the docs say: "Important: If you want to place a Fan Box on a page on your site that already references Facebook Connect (that is, the page contains one script that calls FeatureLoader.js.php and another that calls FB.init), then you must not reference these scripts again. You simply can just put in the fb:fan tag where you want the Fan Box to appear." Pete (563683308 16:19, 31 July 2009 (PDT))
I think this may follow the same issue. I am trying to implement both connect and fb:fan. I've already excluded the scripts and i've only included the fb:fan tag. This works propertly in IE but in Firefox it does not show the fb:fan widget. SEE - www.jarbas.net/fyi
[edit] Would Like to Put Fan Box on a Facebook Profile
I work for a musician who has both a music/band Page and a personal profile. I'd like to put his Page's Fan Box on his personal profile. I assume it's not really an option because FB strips <script> tags in profile boxes, but maybe this can be a future feature request?
- No this won't work on personal profiles at this time. The Fan Box needs to reference a Page ID. Pete (563683308 11:07, 13 July 2009 (PDT))
I have the same request, would like to add my business fan page to my personal profile. Thanks I would also like to put a fanbox on my personal profile, many thanks stefania
Would like to endorse the above three requests that FB allow users to add fan boxes to our profile pages. Thx!
[edit] Where do you add the code?
Where do you add the code? That seems like a pretty big missed step in the explaination of how to use this.... "Copy it to the page you want it displayed" ...thats great..how do you do that? Its not explained anywhere.
Are the developers actually even reading these posts? These are ALL legitimate questions and it seems they are being ignored.
The obvious first step seems to be to perfect the ability to add the widget onto a FACEBOOK PROFILE FIRST. When this has been
simplified so anyone can do this THEN it should be geared toward use with other sites. Please address this !
- The weekend just passed. I am catching up to these posts now, which all came in between late Friday night and Sunday afternoon, California time.
- You need to copy the code to a Web page where you want to display the Fan Box. To do that, you need server access, a text or HTML editor, and some knowledge of how to lay out an HTML page so you paste the code in the correct place. Thanks, Pete (563683308 11:06, 13 July 2009 (PDT))
The answer does not help at all. I don't understand the language that is being used. I am the admin of my site, I pull the link for a fan box, but have not a clue where it needs to go. Please give me instructions in lamens terms. I don't get it.
- Simply add the code you get from Facebook for the Fan Box literally on the page where you want the Fan Box. Just copy and paste into the body of the page where you want the Fan Box to be displayed.
- This is a different user/same question- From what I am understanding of the above conversation is that the fan box can only be added to an external site (www.yourownwebpage.com), not another facebook profile? I have created a Fan page for an event I am hosting and wanted to add the fan box to my personal profile page on facebook. I am administrator on both. However I do not know how the end user has the ability to edit code since we are not given server access to our own profile. Is this correct?
- You're correct -- the Fan Box can be installed only on external websites at this time. The point of it is to promote your website on Facebook. You can encourage people to become a fan of your Fan Page from Facebook in other ways -- share a link to it in your Feed, use Facebook Ads, for example. To see an example of the Fan Box in action, go to http://www.npr.org/services/npr_on_facebook -- this Page on npr.org links to the NPR Fan Page on Facebook. Pete (563683308 16:17, 16 July 2009 (PDT))
[edit] Problem viewing stream when not logged in
I was able to place the code on my page and everything shows up perfectly (in Firefox, IE and Chrome) but only when I am logged in to my facebook account. If I log out, I can still see the fan box and it shows the name and displays the fans, but there is no profile picture and no stream (it's just empty). Just in case, here is the exact code I have: <script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script><script type="text/javascript">FB.init("e5ae00e3fa9b587dad058ca4e72a408f");</script><fb:fan profile_id="20818868219" stream="1" connections="6" width="200" height="570"></fb:fan> Can somebody please help me?
- I can't reproduce this when I try on my test site. I log out of Facebook, force refresh of the site where the Fan Box is, and it performs as expected -- the stream persists, as does the list of friends. Can you send me your URL please? Thanks, Pete (563683308 16:02, 13 July 2009 (PDT))
Hi Pete, thanks for looking into this! Here is my URL: http://www.dateraters.com/articles/BeingGoodExInBadBreakUpFrame.html and I still get the same problem! Please let me know if you find anything .... Thanks a lot!
- Thanks for sharing the URL, Anya. I can repro your issue when I log out. It's really strange. The only thing that jumps out at me is that you're referencing a different FeatureLoader than the one we mention in the doc. Can you try it with http://www.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php instead? Also, did you get that script reference from the wizard? In the meantime, I'll bring this up with the engineer who worked on this feature. Thanks, Pete (563683308 23:10, 13 July 2009 (PDT))
Hi Pete, I got the script off the wizard, but I tried a different FeatureLoader (the one you suggested, you can see from my code, I already updated it) and same thing. Could it be something to do with a setting on my Fan page?
- What's likely going on is your page has a minimum age setting of 18. When a person is logged out, we can't tell the age of the viewer, so we assume the content shouldn't be shown. Interesting corner case for privacy. Pete (563683308 12:27, 14 July 2009 (PDT))
So the only way to fix this is to remove the age restriction? There is no way for me to force it to show the stream? We really don't have any restricted content but since it's an online dating related page we figured we would add the age restriction...
- I'd suggest removing the restriction temporarily to verify that this is the issue (which seems likely, as we do perform age-related checks on content). But at this time there isn't a way to force the stream to appear regardless of the age restriction. The privacy and other checks we do are not trivial things to change.
- Do you require people to verify their age to be on your site? If so, then you can remove the age restriction since you know your viewers are already of age (or at least should be). If you don't verify ages for the site overall, then is there a reason to restrict what people see on Facebook? Another option is to not display the stream. Pete (563683308 13:53, 14 July 2009 (PDT))
Pete, thanks so much for your help! I removed the age restriction and everything started to work perfectly! I guess we don't really have to have an age restriction there. Thanks a lot again!!!
- Glad it worked! Pete (563683308 17:37, 14 July 2009 (PDT))
Hi, I have the same problem on my site. But I don't know how to remove age restriction on my page. I searched facebook help an found some information:
- As a Page admin you can select who is able to search for and become a fan of your Page. To do this, follow the steps below:
- 1. Click the "Edit Page" link beneath the Page’s photo.
- 2. Click the pencil icon in the Settings section and select "Edit" from the drop-down menu that appears.
- 3. Make country and/or age restrictions.
- 4. Click the "Save Changes" button.
But I can't do the same things. Can you help me, please?
[edit] SSL and Profile Pics
I can't seem to find a work around for securing the fan page profile pics. The content itself comes in secure but the pics do not. Here are the referencing urls:
The source comes in fine through a ssl connection: https://www.connect.facebook.com/connect/connect.php?
But the images do not (in at least two different places): (the fan page profile pic) http://profile.ak.fbcdn.net/object3/... (fan page story pics) http://profile.ak.fbcdn.net/object3/...
The connections pictures do come in secure via:
https://secure-profile.facebook.com/v225/647/...
(sorry to post twice but the first post was batched in with another)
- Investigating now. Pete (563683308 16:02, 13 July 2009 (PDT))
- Thanks Pete! ~Sean
- Any update here? Were you able to duplicate the issue?
- Any updates on this? We're having the same issue and the boss is all over us to get this widget up and running on our e-commerce site!
- This should work. If your photos aren't able to load correctly, please file a bug and include the URL to your site and your Fan Box code. Thanks, Pete (563683308 10:39, 18 August 2009 (PDT))
[edit] Where do I add the Fan Box on my Business Page?
Is this possible? I want to add a Fan Box on a Business Page that I am the admin for. The way all of the help topics are written, it sounds like the Fan Box is for websites outside of Facebook. Can you please assist me in plain English? I'm not a web script writer or anything, just trying to get my contacts to be able to Become a Fan of the business page I created. Please help!
- No, you would add this to your business's website (not on facebook.com), so they can become a fan of your Business Page on Facebook (for example, see http://www.npr.org/services/npr_on_facebook -- this Page on npr.org links to the NPR Fan Page on Facebook). If you want to encourage Facebook users to become a fan of your business page, you could promote the Page with Facebook Ads. There's a link to do so right under your Page's picture. And there's a link for a visitor to your Business Page to become a fan at the top of your Page. Pete (563683308 21:27, 13 July 2009 (PDT))
Other business pages have this on a business page on facebook.com i.e. JCPenney.
[edit] Can I first render my page and then start loading and displaying FB control
I love the control, but it takes a while to load it. I wonder if there is a way for me to render the page and then onLoad() after all my essential components are loaded and displayed (like menus and such) execute the script that would first load the js and then display the control?
I would love to show comments from my fans on tour city website. all we can show is our own comments. http:www.sarasotacitywebsite.com
[edit] what is a "canvas page on myspace"? the old widget worked on myspace
i took your old widget off of my myspace today to add this new one and am frustrated because this one doesn't work on myspace and i don't have the code for the old widget now. i read your posts about putting an i-frame on a canvas page and being totally computer illiterate, have no idea what you're talking about. can you explain what a canvas page is? how exactly can i put a widget on my myspace (in non-computer terms) for my facebook fan page? and is there a way i can just get the old widget and use that one?
[edit] were to add the text on my profile
I have tried adding like you would on myspace but nothing comes up so were do i add the text to.
[edit] Fan Box Height
I tried to decrease the fan box height (excluding connections) to less than 300px, and it cut off the bottom of the fan box so the right scroll button was not visible. Why is this happening? What is the minimum height for a fan box without connections? --1702475315 14:07, 2 October 2009 (PDT)
Is it possible to increase the height of the actual stream window?
- Not at this time, Jerry, no. It's a good feature request so it'll likely happen at some point. Pete (563683308 15:19, 17 July 2009 (PDT))
--100000025446830 22:39, 17 July 2009 (PDT)--100000025446830 22:39, 17 July 2009 (PDT)--100000025446830 22:39, 17 July 2009 (PDT)
Surely it would be possible to add height="200" (or pixels to your preference) after reference to the width?
- The height attribute controls the height of the overall Fan Box, not the stream portion of it. Pete (563683308 12:41, 17 August 2009 (PDT))
Is their a solution yet for increasing the height of the stream window? Is it possible with an iframe? --23501551 17:52, 29 September 2009 (PDT)
- I too would like to know if there is any progress being made on the height issue 6226495 12:59, 6 October 2009 (PDT)
I was unable to affect a change to the height at all. I noticed "height" was not in the script I copied, so I added it. No change.
is ther any update to this problem, i would like to use my facebook fan page to update my own website and a resize of the fan box would be great.
It would also be hand y to have a facebook notes widget which allowed you share your notes on your webpage.. it is possible with rss reader but it is very ugly
[edit] Age Restriction
Can the fans that go through to the fan box be restricted that only fans over 18 go through for example
- Are you asking if you can limit which fans that get displayed in the Fan Box? So you want to show only those who are over 18? Pete (563683308 11:06, 20 July 2009 (PDT))
Yes if this is possible
- You could try wrapping the fb:fan tag in fb:restricted-to tags and see if that works, as in:
[edit] Help
Hi I have the fan box on my site veggywood.com -- it shows up great on Safari, but not on IE and not on Firefox...?? It just says Veggywood on Facebook in really small letters. Any suggestions? Thanks
- The fonts look fine to me in Firefox 3.5 on OSX, and on IE7 and FF2 on Windows. There's some extra space between the bottom of the stream and the div containing that text which is coming from the fact that you're not displaying fans. Pete (563683308 12:39, 20 July 2009 (PDT))
hmmm thats so weird i can't see anything except that one line on firefox and IE on my HP work computer, or on my apple laptop at home (running osx)... well, at least if someone can see it... you see more than just that one line? i don't want to show feed or fans, just the "find veggywood on facebook" in the cool big font + image
thanks!
- Hi Polly, I see the Fan Box only on this post: http://veggywood.blogspot.com/2009/07/wont-you-be-our-neighbor.html where it contains the stream and the button, but no fans. Looking at your page source, you should set stream="0" and connections="0" in the fb:fban tag and see how that looks. Do you have JavaScript disabled on your work machine and Firefox on your home laptop? That could be why you don't see the box. Pete (563683308 13:26, 20 July 2009 (PDT))
[edit] RSS Feed - Don't want it repeated in this box
The Fan Box looks like a great addition, but there is one problem with it currently. We have all of our news and updates streamed from our site, to Facebook. Now all of these updates would appear in the Fan Box which is rather redundant then if we would put the Fan Box back on our website. Is there any way to disable specific posts from displaying in the fan box? (Specifically we'd want to hide all imported posts from the fan box)
- No there isn't a way to filter directly in the Fan Box. You could set it up so you display only the Become a Fan button (set connections and stream both to 0), then use stream.get to import a filtered view of the Fan Box. Pete (563683308 11:35, 21 July 2009 (PDT))
[edit] W3C Validation
Is there any workaround to get valid HTML 4.01 code? see W3C validator output. Thank you. --M/ 16:26, 20 July 2009 (PDT)
- Using the iframe version, slightly modified, it validates. --M/ 17:19, 20 July 2009 (PDT)
- Is there a special concern about W3C validation? Pete (563683308 11:35, 21 July 2009 (PDT))
- Generally speaking, valid HTML code can be of help, especially when dealing with pages that can be accessed through a variety of client softwares, terminal types, definition and sizes... --M/ 16:01, 21 July 2009 (PDT)
- I've removed allowtransparency="true", that was not valid and css path, that is not used at this location. Please also note that "&" has been replaced with &.
<iframe scrolling="no" frameborder="0" src="http://www.facebook.com/connect/connect.php?id=23676627794&connections=10&stream=1"
style="border: none; width: 300px; height: 550px;"></iframe> <div style="font-size:8px; padding-left:10px"><a href="http://www.facebook.com/ComputerVille">ComputerVille</a> on Facebook</div>
- May I suggest that you add a note to the article page, for instance under the "Using an IFrame instead of JavaScript" title? Thank you, M/ 07:32, 22 July 2009 (PDT)
[edit] Adding to Email
Is there anyway to add this Fan Box to my emails?
- You could try but JavaScript most likely won't work in the email. If your email client allows for embedding iframes, then perhaps, but again, not all of your readers will have the ability to read the email. You could put a link to your Facebook Page in the sig of your email -- since that's just text, it'll work. Pete (563683308 12:01, 22 July 2009 (PDT))
[edit] This is a sample of what everyone watching is saying
Hello!
On bottom of fan box I see this This is a sample of what everyone watching is saying.
Is there a place were I can remove this?
- Are there any posts in your Page's stream? If not, please supply a URL. Pete (563683308 14:12, 23 July 2009 (PDT))
[edit] How to Edit the CSS-Style
Hey there,
according to you documentary I can edit the CSS Style by adding my own CSS-File, to edit text-sizes and stuff. But I don`t get it to work. I included the fan box via javascript:
... <fb:fan profile_id="11... " stream="1" connections="10" width="300" css="http://www. ... /test.css"> ...
If I now put some new styles in the css-file nothing happens, for example: .fan_box .full_widget .connect_top { background-color: #FF0000; }
- Please file a bug and include your URL so we can investigate. Thanks, Pete (563683308 13:22, 24 July 2009 (PDT))
SOLUTION!!!
Hello there, I too was having problems with this... you can find the solution here: [4]
It basically involves putting a version number at the end of your CSS url (e.g. css="http://www. ... /test.css?2" - this will reference the second CSS edit). The cache is apparently quite odd.
Your CSS should look something like this:
@charset "utf-8"; /* FB Fan Rev 2 */
.fan_box
.full_widget
.connect_top {
border: none;
background-color: #990000;
}
.fan_box
.full_widget {
border: none;
}
.connect_top a {
color: #FFFFCC;
}
.connect_top a:hover {
color: #FFFFCC;
}
.fan_box
.connections {
background-color: #990000;
border: none;
color: #FFFFCC;
}
.fan_box
.connections_grid
.grid_item
.name {
color: #FFFFCC;
}
.video_extra embed { width: 185px; height: 176px; }
The last command (.video_extra embed) is very useful; it determines the size of Youtube videos and other video media. The default is way too big and flows off the screen.
You need to re-embed the code in your html file for Firefox on the Mac to recognise the changes. i.e. delete the code, save, upload, then re-embed the code with your CSS sheet referenced, then re-upload.
Hope this helps,
Ali 3rd August 2009
This is so helpful, perhaps I am not looking in the right places, but where are the rest of the css options, or styles having to do with the fan box?
Juli 4th August 2009
- Whatever isn't in the article here (and I updated it to address the CSS issue) is to check the fb:fan article. Pete (563683308 11:29, 4 August 2009 (PDT))
I'm still having trouble getting CSS to work on my site: http://crew.wustl.edu/ I'm using an exact copy of Ali's code from above with the colors changed.
- Have you tried adding a cachebreaker to the CSS URL, as per the note on the fb:fan page? Pete (563683308 18:40, 8 September 2009 (PDT))
[edit] How To Include Fan Posts Into Fan Box Stream?
Any way to include fan posts on FB Page into Fan Box stream?
Pref can be set on FB Page, but does not pass through to Fan Box.
TIA!
Kurt
Thanks, but that script also just includes the Page admin's posts, as far as I can tell - I run the same here: http://worldslongeststrawchain.org/
But on my Facebook Page, I allow Fans to post in the main stream - see: http://www.facebook.com/pages/Worlds-Longest-Straw-Chain-2009-Organization/107140263188
I am trying to pull the Fan posts from the FB page into my website, but the script does not appear to allow this action.
- That wasn't a real answer, Kurt -- someone vandalised the talk page. :( Anyway, right now it reads the Page's posts only. Pete (563683308 08:00, 27 July 2009 (PDT))
Thanks, Pete! Would be a nice feature, IMO. Take care and thanks for your response.
- You're welcome, Kurt. Indeed, it would be a good feature. I won't make any promises, but there are things we'd need to consider on our end before we could implement it. Keep an eye out -- we'll let you know on the Developer blog or some place if we add this feature. Pete (563683308 23:35, 27 July 2009 (PDT))
[edit] Iweb
Trouble adding fan box to Iweb page, what's the trick?
- Can you explain what issue you're seeing? Are you inserting the JavaScript as an HTML snippet? Pete (563683308 16:53, 27 July 2009 (PDT))
I have a problem with this too. Using iWeb 2008 I have added the JavaScript provided by FB as an HTML snippet. Once I enter the code iWeb creates a wire box for the snippet that is 300 pixels wide by 10008 pixels tall - and it extends the page to fit... I've changed the code to set width=250 and also a height but to no effect. I can manually resize the box to the width of 250, but if i lift the bottom corner of the box to reduce the height it just moved the top corner of the box in proportion - ie moves as opposed to resizes. Any help gratefully appreciated! Edit to say: I have discovered that I can resize the box by entering values in the Inspector - but not by dragging. So problem sort of solved - but not elegantly.
- Hmm, interesting. I'll add this workaround to the Known Issues section of the article. Thanks for noticing this. Pete (563683308 10:22, 28 July 2009 (PDT))
[edit] # of Fans not updating on my site
Has anyone else had this situation? Fan Box loads great, looks great...but when number of fans changes on Facebook, it does not update on my site. The only way to get it to match is by copying code and re-pasting the HTML into my site. Any ideas?
- This could be a bug. Could you please file one in Bugzilla, and include your URL so we can investigate. Thanks, Pete (563683308 10:22, 28 July 2009 (PDT))
[edit] No Fan Box on my widget, just an "I am a Fan"
Using the wizard on my Facebook page, I get a Fan box with "I am a Fan" at the top where I'm supposed to have a Fan box link. What's happening?
- I'm not sure I understand -- you put the Fan Box on your Facebook Page? You add the Fan Box to your website and it points back to your Facebook Page. Facebook Pages already contain the ability for viewers to become a fan. And if you're already a fan, the Become a Fan button changes to You Are a Fan. If I'm misinterpreting this, please add the URL to your Page here. Pete (563683308 08:45, 29 July 2009 (PDT))
I figured out the problem. If you are logged into Facebook on your computer than when you look at the widget box on your site. you will see "I am a fan." Howver, if you log off Facebook and then look at the widget then you will see the "Become A Fan" box.
[edit] fb:fan css attribute misbehaves in IE7
The fan box seems to work quite well, except for the CSS attribute. I was able to get it working in Firefox/Chrome/Opera/Safari, but in IE7 the style sheet just doesn't seem to load.
I tracked down the problem with Firebug/Debugbar, and noticed the following differences in the way http://www.facebook.com//fbml_static_get.php handles the CSS parameter of the fb:fan tag. In Firefox, the URL is escaped and the ampersands (&) are left intact. In IE though, the URL is escaped in a similar fashion, except that the ampersands get converted to their HTML equivalent (&). When I try to load the resulting URL in a browser, the CSS file won't load, instead I get a "bad signature" error. I'm guessing this is because fbml_static_get.php can't find any parameters in the query string due to the "processed" ampersands.
Is there any way around this?
UPDATE: Seems like I'm just losing my mind; apparently right after I posted this, the CSS file loaded properly without any changes even in IE7.
[edit] Only small line of print shows up on my website
Can't get this to work-- only the small line of print at the bottom shows up on my webpage when I paste in the code
Can somebody help? I've tried everything
- Please supply the URL for your site so we can investigate. Thanks, Pete (563683308 17:31, 30 July 2009 (PDT))
- I have the same problem... www.mirr-midlo.org. Thanks, Ray
- You're not referencing the fb:fan tag anywhere. Also you're calling both Facebook JavaScript scripts (FeatureLoader and FB.init) twice. You only need to call each of them once. Pete (563683308 22:33, 2 August 2009 (PDT))
I am also having this same problem. Only a small line with a link to my FB page shows up on my website:
www.seagatepto.org
my FB Link :
I actually had it working well, and then I was editing the website and wanted to move the widget box and messed everything up.... Please Help because it is a great feature for my website!! Dana
- I just checked and it's working fine for me in Firefox 3.5. Two things tho:
- You should include the closing </iframe> tag.
- Since you're not using your own CSS, you should remove the "&css=PATH_TO_STYLE_SHEET" from the src attribute in the iframe tag.
- Pete (563683308 11:47, 20 August 2009 (PDT))
Hi there, I seem to be fine when I paste the code into a normal page, it's just that when I try to paste it into the HTML Widget section on Mr. Site, only the line shows up. I want to try your advice above, but do not understand how to include the closing </iframe> tag. Here is the code:
<script type="text/javascript" src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/en_GB"></script><script type="text/javascript">FB.init("054a1494eddbd1132005734ef5b49ebf");</script><fb:fan profile_id="191999704504" stream="1" connections="10" width="300"></fb:fan>- Hi Becky, if you want to do the iframe method, use only this code:
- <iframe scrolling="no" frameborder="0" src="http://www.facebook.com/connect/connect.php?id= 191999704504&connections=10&stream=1" allowtransparency="true" style="border: none; width: 300px; height: 550px;"></iframe> <div style="font-size:8px; padding-left:10px"><a href="http://www.facebook.com/pages/Becki-Biggins/191999704504">Becki Biggins </a> on Facebook</div>
- Let me know if that works for you. Thanks, Pete -- 563683308 11:59, 26 October 2009 (PDT)
[edit] Bebo
is there a way to add the fan box to a bebo profile
- Much like MySpace, you probably have to create an application that contains the Fan Box, and add the application to your Bebo profile. You'll also likely have to use the IFrame method. Are you familiar with developing for Bebo? Pete (563683308 13:41, 3 August 2009 (PDT))
don't have any experience developing for bebo - some pointers would be greatly appreciated.
[edit] Add business page fan box to a personal Facebook profile
Would it be possible to get the fan box from a business profile to display on a personal FB profile under the boxes tab? Or would you have to use the Widget medthod to create an application that contains the Fan Box, and add the application to your personal FB profile? or would the Widget method not work either? 1181029451 20:59, 9 August 2009 (PDT)
- It's not possible at this time -- application tabs can't contain iframes or XFBML, which are the two ways to render the Fan Box. If we release an FBML version, then this would be possible. Thanks, Pete (563683308 11:15, 10 August 2009 (PDT))
[edit] Does the Fan Box track how many people click it or how many people become a fan?
Does the Fan Box track how many people click it or how many people become a fan?
- At this time, you can track interactions with your Facebook Page overall on the Insights tab: http://www.facebook.com/business/insights/?pages&i=YOUR_PAGE_ID. We're working on integrating the Fan Box specifically here, but we don't have an ETA at this time. Thanks, Pete (563683308 13:34, 25 August 2009 (PDT))
I second this. It's important that we be able to see how many fans our fan box is driving.
[edit] Problem with FB Code from Wizard
I have the Fan Box loaded in my website and it looks fine. But I get a "cancelled opening the page" error in the status bar in Safari. When I looked at the Error Console in Firefox, these were the errors it was finding:
Warning: Unknown property 'zoom'. Declaration dropped. Source File: http://static.ak.fbcdn.net/rsrc.php/z5GY4/hash/3x5gmvl5.css Line: 17
Warning: Expected declaration but found '*'. Skipped to next declaration. Source File: http://static.ak.fbcdn.net/rsrc.php/z5GY4/hash/3x5gmvl5.css Line: 17
Warning: Expected color but found 'invert'. Error in parsing value for 'outline-color'. Declaration dropped. Source File: http://static.ak.fbcdn.net/rsrc.php/z5GY4/hash/3x5gmvl5.css Line: 54
Warning: Expected end of value but found '.'. Error in parsing value for 'line-height'. Declaration dropped. Source File: http://static.ak.fbcdn.net/rsrc.php/z5GY4/hash/3x5gmvl5.css Line: 73
Warning: Error in parsing value for 'display'. Declaration dropped. Source File: http://static.ak.fbcdn.net/rsrc.php/z5GY4/hash/3x5gmvl5.css Line: 76
Like I said - it displays ok, but there are errors which I don't like... if I remove the FB code, then I have no errors, so it is definitely the code from the wizard.
- Thanks for letting us know. This is related to the CSS for the Fan Box. Someone will take a look. Pete (563683308 11:45, 13 August 2009 (PDT))
I have the same problem :( Anyone have a tips? (520114845 12:21, 24 October 2009 (PDT))
This problem does not appear to occur when using the iframe technique.
[edit] Always including stream, never fans.
I am trying to add a box that just includes fans on my website. I have unchecked "include stream" on the Add a Connect Widget page and generated the code gives the stream as "". This showed on my site as only the stream, no fans. Ugh. I then edited the stream to "0" (because this is what your help states it should say). Still only stream, no fans. Editing the stream to "1" gave me both stream and fans. I just want the fans. Shouldn't the stream set to zero show only fans, no stream? Am I doing something wrong?
Thanks for your time.
Got it to work...had to clear my cache. I still feel the behavior was very odd. Why just leave out the fan info?
I have the same problem, but clearing the cache is not working for me. i've limited the appearance of the stream by editing the height, but it's still loading in the background, even though my code is stream="". I can't get the Fans to appear. Any suggestions?
[edit] Joomla?
Can this be used with a Joomla 1.5 website?
- It should. A quick Google search indicates you can get JavaScript to work on Joomla: http://docs.joomla.org/Adding_JavaScript Pete (563683308 11:45, 13 August 2009 (PDT))
[edit] SSL version for shopping cart pages?
Hello! We would love to use the Fan Box in the margin of our e-commerce website, but the only problem is that our secure pages will render a warning since the Facebook Connect code is not on a secure server. Is there an https version of the code we could use so we could render the Fan Box on all of our pages? Thanks!
- Yes, just change the FeatureLoader script to:
- <script type="text/javascript" src="https://www.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php"></script>
- Thanks, Pete (563683308 12:08, 13 August 2009 (PDT))
- Hey pete, i tried the code you provided but it keeps telling me some items are insecure, as soon as i remove the box it's fully secure. Any ideas on what i can try? Thanks
- Are you seeing insecure images loading? Someone else reported that issue. SSL should work if you're loading the Feature Loader over HTTPS, as per above. If you want, please file a bug and let us know which items are insecure. Thanks, Pete (563683308 10:38, 25 August 2009 (PDT))
[edit] Icon size, layout
The article explains how to set the width and height of the overall Fan box, but how does one adjust the width of the icon/avatar, which seems to take the thumbnail version of what I have uploaded to the Fan Page...
- You can't style the icon at this time.
How do you control the layout? The Fan box seems to be indented from the left, whereas I would like it flush with the left of text on my page
- Not sure what you mean here. It's another inline element that can be put in a div, so you can position it however and wherever you like. Pete (563683308 12:39, 17 August 2009 (PDT))
Is it to do with the fact that the box has to be at least 200px wide? When I had mine at 185px, there was a space to the left of it but was lining up on the right. Once it got over 200px wide, it started to enlarge on the right.
[edit] Multiple windows opening
Hi, I've added the Become a Fan widget, with streaming, and love the way it looks. HOwever when I click on BEcome a Fan on the website, multiple windows start opening and I have to open TAsk Manager to kill IE to stop the proliferation of windows.... something is looping somewhere but I dont know what... Erica
- Erica, if you could supply the URL to your site where the Fan Box lives, we can investigate. Thanks, Pete (563683308 09:44, 21 August 2009 (PDT))
Thanks, it is www.powerslim.co.nz
- Erica, I verified that it works on IE7/WinXP -- I was logged out and the login dialog popped up, just once. Then I successfully became a fan. Also verified it works on OSX/Firefox 3.5. What version of IE/Windows are you using? Pete (563683308 14:13, 21 August 2009 (PDT))
Thanks Pete. I am using Vista. IE7.
- Erica, could you please file a bug and include all the information here so we can investigate? Thanks! Pete
[edit] At a loss....fanbox not showing up?
I love the idea of a fanbox but all I get is a little shaped box and no content. I tried putting the supplied code in various boxes all over the homepage and none worked...right now it's on the lower left hiding at the bottom of the page, if you can look and see what's causing the trouble: http://cardsforheroes.org Thanks!
- You're only referencing the Feature Loader script, but none of the code to actually render the box. It needs to look like the following, replacing API_KEY with the string of letters and numbers you get from the wizard, and replacing YOUR_PAGE_ID with the numeric ID for your page, which the wizard also supplies.
- <script src="http://www.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script> <script type="text/javascript">FB.init("API_KEY", "");</script> <fb:fan profile_id="YOUR_PAGE_ID" stream="1" connections="10" width="300"></fb:fan> <div style="font-size:8px; padding-left:10px"><a href="http://cardsforheroes.org">Cards for Heroes</a> on Facebook</div>
- Pete (563683308 11:27, 22 August 2009 (PDT))
Thanks for trying, Pete - that works even less. When I used the straight code that was supplied at least I saw *some*thing. Now all I get is a text link. :(
[edit] Wordpress
My website is on Wordpress, and they don't allow java scripts. How do I add my Fan box to the website, would the HTML version work? Thanks in advance!
- Yes, try the iframe method described in the article. Thanks! Pete (563683308 11:22, 24 August 2009 (PDT))
- JavaScript works fine with Wordpress, but fails to display with Firefox 3.5.2 OS X. The Iframe has problems with Safari 3.2.3, it shows up, but ignores the parameters. Chrome OS X works with both methods.
- iFrame works with Safari 4. Seems to be a known issue with the old Safari.
Actually I think Wordpress does not allow java scripts for blogs they host. I tried it on Firefox and Safari 4 and both do the same thing when you try to save the info in a widget; it erases the parts of code with "javascript" in it. Does anyone know a work around or do you have to be self-hosted in order for it to work? Email me at billieisme(at)gmail(dot)com if you know. Thanks.
[edit] No one answered my question about tracking how many clicks or fans for the Fan Box.
I asked over two weeks ago if there was any way we could track how many people clicked or became a fan using the facebox and I have still not received a response. I did notice that all the questions above and below did get answered, can someone please respond?
- Apologies. There are many comments here and I missed this one. At this time, you can track interactions with your Facebook Page overall on the Insights tab: http://www.facebook.com/business/insights/?pages&i=YOUR_PAGE_ID. We're working on integrating the Fan Box specifically here, but we don't have an ETA at this time. Thanks, Pete (563683308 13:34, 25 August 2009 (PDT))
Thanks for getting back to me I appreciate it, and I think that would be a very useful tool to guage the sucess of the Fan Box!
[edit] more detail on myspace issues
Could someone please provide indepth instuctions on how to put the fan box on a bands myspace profile. I already read what it on here about creating an application and iframe but its too general.
[edit] Terrible load times and Javascript lag in IE 7 or below.
I know it has already been noted, but surprisingly the code has not been improved since the release of this feature.
The Fan Box loads extremely slowly in most versions of IE, especially (it seems) in 7. In our case we are trying to use the Fan Box in a dynamic all-ajax application/site. When the Fan Box is being loaded it bogs down and halts Javascript executions, making our navigation unusable while the user waits for the Fan Box to load. This makes our application look poorly written, when it is in fact Facebook's code causing the problem. On older computers the Fan Box appears to almost halt the entire system.
I'm baffled as to why this is the case, surely the code can be optimized. We aren't trying to display THAT much data!?
Using Iframes seems to help a tiny bit, but not an amount that our users would notice. Due to this issue we are contemplating dropping the Fan Boxes all together.
Is there a way we can cache the Facebook data? Or does anyone have any advice for speeding up the load-times? I'm all ears!
For the record; the load times are decent and there is no Javascript bog-down in Chrome, Safari, or Firefox.
[edit] Recent Fanbox changes
It perplexes me to see the recent fb update of showing our "official" forum posts (posts made by the page) in the fanbox stream. Is there any way to turn this functionality off? I'm using the fb box (and my page) as more of a microblog/updates platform, and seeing these fragments of my conversations is more than a little bit annoying. Any ideas on if I can filter the stream or not? --1283264904 08:30, 30 August 2009 (PDT)
[edit] IE 8 and ssl issues
When we add a fan box, either via javascript or iframe, to a members only part of our website that is served via ssl, we get security warnings under IE 8. Here's the behavior we see under both methods when you answer yes or no to the "display unsecure content" question:
Javascript version: "No": works fine (now THAT's puzzling! I'd think the opposite) "Yes": Doesn't show up at all
iFrame version: Doesn't work at all unless we change the src attribute of the iframe to an https url, after which it loads, but we still get the unsecure content warning: "yes": everything works but the page logo/profile image is broken "no": logo and a seemingly random assortment of fan profile pics are broken
Any advice or code changes to help this work in ssl sites in IE 8 would be great. Works fine via javascript or iframe in firefox and IE 7, btw.
Thanks,
-David Mercer dmercer@mymxm.com
- Is the unsecure content an image? Read earlier on this page about issues with loading images via SSL. Thanks, Pete (563683308 17:27, 31 August 2009 (PDT))
[edit] FB Fan Box w/ FB Connect only on 1 page
We're trying to work on a revision of our blog. We're planning to use the FB Connect tool only on places where users can comment, but have the FB Fan Box visible throughout in the right side bar. Would I use only the snippet for the Fan Box throughout or should I have different code for the variations?
For example, on a post page, I will have Connect so I should use only the snippet for the Box, but for the homepage I will not have connect so need to use the full JavaScript for the box? Is that correct?
Thanks for the clarification.
-Nicole.
[edit] There's no border when connections and streams are set to 0
Displaying the fan box in my blog (WordPress) works fine, but when I set connections and stream to "0", there's no border around my Fan Page Button (checked with Firefox 3.5.2 and Safari 4 under MacOS X 10.5.8). Is there any chance to display the border, so the fan box looks more like a button?
[edit] Number of fans without picture and name
Is it possible to display the number of fans WITHOUT showing their pictures and names?
[edit] Fan Box Not Showing up on Wordpress Blog
I went through the wizard on Facebook and got the code to paste into a text box in my widget sidebar on my Wordpress blog, but when I paste this and then click "save," the code changes and when I view my blog, there is some nonsense text and "Become a fan" in very small letters. What is happening and how do I get it work? Thanks! My blog is http://violetriot.wordpress.com/
[edit] Microsoft Office Live
Hi how do I add the fan box to a microsoft office live page as the script on its own does not work. It keep saying defer=defer or something. Can you tell me exactly what to put in the html box please?thanks!
- There are instructions about what to do for Microsoft Live earlier on this page. Pete (563683308 11:53, 3 September 2009 (PDT))
[edit] Bottom edge is cut off of fan box
For some reason the bottom edge of my fan box is being cut off in some browsers on my site: http://crew.wustl.edu When using Javascript only a few pixels are missing, and when using iframes even more is cut off (that's what's on there now). Any ideas? could it have to do with my site's existing css? It looks correct for me with Firefox 3.5.2 and Mac OS 10.6, but in Safari and some of my friend's browsers (including Firefox on Ubuntu) the edge is being cut off.
- I'm seeing this, too. I wonder if it has to do with how narrow the box is. Try adjusting the width if you can (for test purposes, I see that you're dealing with a really narrow column here) and if that fixes it, let us know what the minimum width is, either here, or file a bug. Thanks, Pete (563683308 18:29, 8 September 2009 (PDT))
[edit] Aligning the Fan Box to the center
I want my fan box to be aligned on the center of the page. By default, mine is aligning on the left and I don't know what to change or add to the code to make it align center. It can be viewed at www.naidw.org. Thanks for the help
- Try wrapping the fb:fan tag in a div that's aligned to the center. Pete (563683308 18:29, 8 September 2009 (PDT))
[edit] This CODE is not working on Myspace Artists Page, Why?
I want to know why it's not working on Myspace Band Page. and What code I need to make it works? and How i solved the problem?
Thank you, Omri.
- Myspace doesn't support iframes on pages. See the Known Issues section of this article. Essentially, you need to create a myspace app and reference the Fan Box there. Pete (563683308 18:29, 8 September 2009 (PDT))
Fan Box javascript code help please
the following code is what i have. it works on the blank page, but it does not show up on the full webpage. <script type="text/javascript" src="http://static.ak.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/en_US"></script><script type="text/javascript" defer="defer">FB.init("a41fcb62ad61abf55b7374c4b8a9517b"); FB.XFBML.Host.parseDomTree();</script><fb:fan profile_id="125688424149" stream="1" connections="16" width="470" height="550"></fb:fan>
i could not get the iframe version to work, it comes up as "client server" or blank. <iframe scrolling="no" frameborder="0" src="http://static.ak.connect.facebook.com/connect/connect.php?id=125688424149&connections=16&stream=1" allowtransparency="true" style="border: none; width: 470px; height: 550px;"></iframe>
any help with this would be much appreciated! -t
- Please let us know what the URL to your site is, so we can investigate. Thanks, Pete (563683308 18:29, 8 September 2009 (PDT))
Hello, please help!
the following is my current code:
<script type="text/javascript" src="http://static.ak.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/en_US"></script><script type="text/javascript" defer="defer">FB.init("a41fcb62ad61abf55b7374c4b8a9517b"); FB.XFBML.Host.parseDomTree();</script><fb:fan profile_id="125688424149" stream="1" connections="16" width="470" height="550"></fb:fan>
it works on a blank webpage, but it does not work on the actual webpage. could it be due to having other javascript? i've tried pasting the <script type="text/javascript" src="http://static.ak.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/en_US"></script> after the body but it still does not work. only the top section shows.
i've also tried the iframe version, but only get "client server" in text and nothing else. any and all help would be much appreciated! -T
[edit] teeny fan page link on my site
I see that others are having this issue, too.
Here's my site: http://www.aprylza.com
Thanks
- You're not referencing the fb:fan tag anywhere in your code. Pete (563683308 17:37, 8 September 2009 (PDT))
[edit] CSS not being recognized via iframe
I'm using the iframe option, and included a URL-encoded path to my stylesheet (in many different combinations, to see if any would take). The iframe looks like so (except with the specific URL changed):
<iframe scrolling="no" frameborder="0" src="http://www.facebook.com/connect/connect.php?id=MY_ID&connections=0&stream=1&css=www.notmydomainname.com%2Fdirectory%2Fcss%2Ffb2.css" allowtransparency="true" style="border:none;width:100%;min-height:800px;overflow:visible;"></iframe>
I've included the http prefix as well, and no dice... What am I doing incorrectly?
(I've checked via Firebug, and it doesn't seem to be fetching the CSS file at all.)
[Edit] I can't seem to make it work with js either... Are there perhaps permissions issues? I can call up the CSS file in my browser by means of the URL, so I know it's correct and generally available.
- It's probably a caching issue, if you've updated your CSS since you added the Fan Box. Check the workaound in the fb:fan tag doc. Thanks, Pete (563683308 17:37, 8 September 2009 (PDT))
- Thanks, Pete, but the CSS file in question hasn't changed at all. Digging deeper, in the javascript version, it looks like it tries to grab the file, but for some reason stuffs the following in
while I've just done
<fb:fan profile_id="My_ID" stream="1" connections="" width="570" height="800" css="http://www.My_URL.com/directory/css/fb2.css"></fb:fan>
- To make sure, I saved the file to another filename, uploaded, and get the same result.
- And the same goes for the iframe version, I've just confirmed.
- Sorry you're still having troubles, Dan. Could you either put your URL here so we can take a look, or just file a bug? Thanks! pete (563683308 18:45, 8 September 2009 (PDT))
- [deleted by user 108200417 18:11, 9 September 2009 (PDT) ] Here you go.
- Thanks! I followed up with the engineer and he said currently we have a height style in our code that can't be overridden in CSS. He's going to change this tho for the stream height. I can't give you an exact ETA but expect it soon. Pete (563683308 16:33, 9 September 2009 (PDT))
- Thank you, Pete. Really appreciate it. Still a bit mystified, because !important should do it, but I'll wait for the fix. Cheers!
Every tome I try to create a fan box widget for my page it display the page but underneath, instead of showing a "Become a Fan" button it just shows the line 'I am a fan'. I am the admin for my page so why won't it display the become a fan button. http://www.facebook.com/facebook-widgets/fanbox.php?page_id=106679408572
- That's because you're already a fan of your Page. Try having someone else who isn't a fan view it. Or else, log out of Facebook and look at the Page. Pete (563683308 12:21, 13 September 2009 (PDT))
[edit] fb:login and fb:fan firefox
I am trying to implement both connect and fb:fan. I've already excluded the scripts and i've only included the fb:fan tag. This works propertly in IE but in Firefox it does not show the fb:fan widget. SEE - www.jarbas.net/fyi
PS. Sorry for previous post.
[edit] Box not Loading
Hi, I'm trying to integrate the Facebook Fan Box, the code is at the bottom of this page: http://redwall.wikia.com/wiki/MediaWiki:Common.js
However something isn't working properly, as you can see the implementation here at the bottom only displays small text: http://redwall.wikia.com/wiki/Sandbox
Advice please.
- As mentioned above, wikis typically don't allow JavaScript or iframes to be embedded for security purposes. Pete (563683308 23:41, 21 September 2009 (PDT))
- Hi Pete, Wikia actually does allow JS embedding, if you looked at the page you would see I already have code for embedding Twitter, DocStoc, and other widgets. This is work ok!
- Right, because in your case you're the admin to the wiki, so you can have it do whatever you want. I just meant that you can't arbitrarily put some JS into a wiki article and expect it to run.
- As for the issues you're having, wouldn't it be easier for you to just render an iframe instead of the Connect JS? Would be lighter weight. See Fan_Box#Using_an_IFrame_instead_of_JavaScript. Pete -- 563683308 13:47, 11 November 2009 (PST)
[edit] Add Fan Box to Outlook Signature
How do I add a "Become a Fan box" to my Outlook Signature?
Along with a "Become a fan" logo?
What do I replace the <fb> tag with? Its not working on IE for me either.
AdondeSalir.com todo lo que buscas está aqui!
[edit] insecure/secure messages with IE7
Both the IFrame and the JavaScript methods, this fanbox on our page will give us an IE7 message about both secure and insecure content. Without individually disabling the browser settings to stop showing the message, how can I go about getting this on my page without the messages displaying?
The messages happen EVERY time someone navigates to the page.
Can someone give an example on how to do this to a newbie.
Ok, the page itself is fine but the profile picture (thumbnail) is the one that causes the error....
[edit] fan box XHTML validation and performance
While developing a blog system i used a simple fan box solution with js, provided here. Well, the idea is quite good, but i believe that implemention is pure rubbish. Not only fan box makes page not validable, because of <fb> tags, but also a proccess of loading is quite annoying. It is using multiple css and js files, loaded one after another. With my quite poor bandwith it is around 10s. Why can't we just download css/js once, combine it with exisiting, minify, gzip and all this cool stuff? Even fans data could be loaded once by curl request, stored on OUR server (what will avoid resolving multiply dns requests over and over) and then just displayed? I understand, that solution should be as simple as possible and available for everybody, but now it's killing all our efforts to improve website performance.
(http://www.facebook.com/fridek 23:51, 13 Oct 2009 (GMT+1))
[edit] i need to make my fanbox width 200 to fit on my typepad blog
i have a 200 pixel wide sidebar and i would like to use the fanbox but i am not able to make the width 200 from the default 300.
help
thanks
[edit] need to make my fanbox 200 pixels wide
i need to change the default 300 pixel width to fit it on my side bar of my 200 pixel wide typepad blog.
thanks
- Add width option as described in this wiki
<fb:fan profile_id="YOUR_PAGE_ID" stream="1" connections="10" width="300"></fb:fan>
--djevrek 02:34, 16 October 2009 (PDT)
[edit] Won't even give me a code...
When I try to hit the "other" tab on the widget page. It says to copy and paste the code below...but there is no code below. It's just a blank line...
Same problem experienced by another user. Persistence paid off. Perhaps wait longer for preview to load? Tried in multiple browsers and for multiple pages, it finally worked...not sure why.
Same here - got IE to display the code when Chrome wouldn't/ 55100738 19:43, 13 November 2009 (PST)
- I just had the same problem. Is it possible to read the page source and grab it from there? 555380156 19:57, 22 November 2009 (PST)
[edit] Using iWeb to develop website
Just confirming that this DOES work in iWeb developed websites, right? I'm copying the following text into the iWeb generated html file:
<script type="text/javascript" src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/en_US"></script><script type="text/javascript">FB.init("42c14f9d5801dbb69c11df81397302cb");</script><fb:fan profile_id="141153311781" stream="1" connections="10" width="300"></fb:fan>...but all that is rendering is a tiny link Brumley MusicFest on Facebook.
[edit] Fan Box for iWeb managed websites
Just confirming that this DOES work in iWeb developed websites, right? I'm copying the following text into the iWeb generated html file:
<script type="text/javascript" src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/en_US"></script><script type="text/javascript">FB.init("42c14f9d5801dbb69c11df81397302cb");</script><fb:fan profile_id="141153311781" stream="1" connections="10" width="300"></fb:fan>...but all that is rendering is a tiny link Brumley MusicFest on Facebook.
Also noticed that when I first click the Other option (on where to put the Fan Box html) nothing shows up in the html box, until after I uncheck/re-check the formatting options.
[edit] Duplicate Fan Box
Hi,
I have copied the html code onto my web page and it looks great but I am getting 2 fan boxes instead of one. Any thoughts on what I should look at....I am using a mac with firefox.
Thanks
[edit] Verification is needed to connect
I'm using an fb:iframe inside an iframe app page using severfbml and the connect JS library. The button appears but when you click it it's replaced with a link, "Verification needed to connect." When you click it it just takes you to the fan page, with no instructions to the user. If the user is logged out, it's even worse, they get a pop-up asking them to login to become a fan, but the submit button doesn't work. How is all of this any better than just having a "become a fan" button that links to the fan page?
- Can you put the URL to your Fan Box here so we can take a look? Thanks, Pete -- 563683308 12:00, 26 October 2009 (PDT)
- Hi Pete, here is a test URL. It does the same thing in the iframe. [URL Removed]
Thanks - 12:33, 26 October 2009 (PDT)
- I notice you changed the code while I was testing this, removing the fb:login-button stuff, which isn't needed for a Fan Box. Are you trying this with a test account? Perhaps one that's unverified? I tried it with my real account and my test account. The real account worked fine for me. For the test account, that "verification is needed" link appeared. Going to your Fan Page, I clicked the Become a Fan link and was presented with a CAPTCHA, which is the verification that's needed here. Agreed, it's not too intuitive of a scenario, especially for a new user. If you want, you can file a bug and note this behavior for unverified accounts. I'm not sure how much we can do here, as the CAPTCHAs are there to help verify identity. Pete -- 563683308 13:08, 26 October 2009 (PDT)
- Thanks for getting back to me. I couldn't test with my real account because I'm an admin of that page and I didn't want to lose that. But I'll have friends test. Thank you
I'm getting that "Verification is needed to connect" message. I tried with JS and iFrame and I got the same error message. I also tried with different accounts and also same problem. What is that verification they're talking about ?
[edit] IFrame loses transparency
Hi, I have issues with fanbox and transparency. I have it working perfectly with Iframe, allowtransparency="true" etc. Just added google translate flags into website header. Whenever you click on google translate flag for other language, the page translates inline, but the fan box loses transpareny and becomes white (which looks doesn't work for site aesthetic)
This is the code;
<iframe scrolling="auto" allowtransparency="true" frameborder="0" style="background: transparent;" src="http://www.facebook.com/connect/connect.php?id=99881532998&connections=0&stream=0"></iframe>
Now I have read articles about adding css page and commands like <style type="text/css"> body { background: transparent; } </style>, but truth is I am not a developper, i don't understand how or where you put that code or how I would do the css sheet. I just want the fan box to always remain transparent even if page is translated.
I originally used js code but there are other js features on page, and it was running slow sometimes and would'nt load at others, the iframe works everytime - it just loses transparency when translated.
Any clues, pointers or even code for a wysiwyg web builder? thanks.
- Sounds like the google translator is messing up the CSS. Can you give us your URL to repro? Thanks, Pete -- 563683308 09:07, 30 October 2009 (PDT)
I tried to add a fan box to my website - all I get is the code. What am I doing wrong? Thanks
[edit] Still Seeking Advice
I'm trying to integrate the Facebook Fan Box, the code is at the bottom of this page: http://redwall.wikia.com/wiki/MediaWiki:Common.js I'm implementing it here: http://redwall.wikia.com/wiki/Sandbox However this is only working in Firefox for some reason, and not IE8 or Chrome (evidenced here: http://browsershots.org/http://redwall.wikia.com/wiki/Sandbox ) Advice would be helpful
- Have you tried using the IFrame method instead? See Fan_Box#Using_an_IFrame_instead_of_JavaScript for details. Pete -- 563683308 13:49, 11 November 2009 (PST)
[edit] Wiki Reloaded
Hey! I'm admin on a wiki and I'd like to insert the FB Fan Box on the main page. Is there any possibility to allow myself to insert the JS-Code? Maybe on the template on the server or with a PHP-Include? 1366972759 04:17, 5 November 2009 (PST)
[edit] Fan Box content varies depending on FB status?
Q. Is it true, as my tests suggest, that Fan Box shows no feed for people who aren't logged in to Facebook? I'd like them to see what my FB page has to offer, but I don't think I'm willing to put a widget on my page that appears as a large empty box (except for the "Become a Fan" button at top and photos of fans at the bottom) whenever the user isn't someone who is logged in to FB.
If my supposition is true, is there a way to deal with this other than omitting the feed and using just the "Become a Fan" button?
For the time being, while I try to sort this out, I'm leaving the Fan Box at the bottom of the right sidebar on my blog (inyourface.freedomblogging.com). Although it looks dumb to many people, that's far enough down on the page to be tolerable for a while.
A. The problem was that I had set an 18-plus age restriction on the blog. People who aren't logged in could be any age, so they're excluded from seeing the content. That was mentioned in the midst of a previous item (Problem viewing stream when not logged in) but I had overlooked it.
P.S. I don't know what this is: http://emlak.ilkon.com/FORMS/EMLAKCI/Emlakci_Profil.aspx?ownerid=4946
[edit] IMPORTANT NEW CHANGES MESSED UP THE WIDTH AND HEIGHT OF FANBOX IF NOT LOGGED IN
Something happened that disrupted totally ON ALL BROWSERS the width and height of Fan Box where by no matter what width you use you actually will SEVER the rest of Fan box ..... check my website you will understand what I am saying http://beirutnights.com I have used this for months and now I might have to stop using fanbox because it disrupted the whole symmetry of the page MAKE SURE YOU ARE LOGGED OUT OF FACEBOOK WHEN YOU DO IT!!!! THANKS
__
[nov-09] Same for me! Problem shows up in Firefox & IE, but only when you are not logged into Facebook.
[edit] anyone in facebook connect watching this would like to comment on what i said???
is there any one who develops facebook connect watching this
[edit] =============repeat issue, however i could not find the answer ==================
i'm having an issue with adding the javascript box. i tried the iframe, it showed up, however it changes all my tables, etc. so i would pefer the javascript.
the code i was given by face book is (i put some spaces inwhere they don't belong so you could see all the code)
<script type="text/javascript" src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/en_US"></script><script type="text/javascript">FB.init("c74523d536519c8cd7670bc6e911799e");</script><fb:fan profile_id="66508542181" stream="1" connections="" width="300"></fb:fan>< div style = "font-size:8px; padding-left:10px"><a href="http://www.facebook.com/pages/pyxie-photography/66508542181">pyxie photography on Facebook</a> < / div >
all that shows up is a link - no box. i saw others with this issue, however i was unable to follow where the response was.
the page i wanted to put it on is here http://www.anonymous-production.com/pyxie-girl/contact/contact-index.html
is there an html or xhtml version? thank you i hope all be wonderful
[edit] Need help
Hello,
I am representing an Association which is call JADE, European Confederation of Junior enterprises. We have jsut set up a new website, and we would like to know how to put fan box on it.
We have tried many times, but seems to be is not working. Our website is behind Joomla interface.
My question is : is it possible to put a fan box in joomla website ?
Thanks
Rico Eva
ricardo.ponce@jadenet.org
- Googling "iframe joomla" or "javascript joomla" brings up links to a couple ways to do this. The IFrame version might be easier for you to implement. Pete -- 563683308 11:18, 19 November 2009 (PST)
[edit] Fan box for the Keep
I've tried adding this to my website's front page but it only shows the small font with the name of the Fan Page (right below the Authorize.Net seal. Any suggestions would be great. I don't want to include the stream (if at all possible) but would like to include the fans.
https://www.keeperofthecauldron.com/
[edit] "Connections" parameter ignored
I'm putting a value in the "connections" parameter and am still getting the default of 10 connections. Anyone else getting this? Is it a bug?
