By andrea.corelli on

Hi guys,
I know I may look dumb, but I tried searching on help on how to solve this for 2 hours now and I haven't come up with any decent documentation on the issue. I am guessing it could be more related to tinymce than drupal actually, but still.

I want to add a Facebook Fan Box on a drupal block and I can't seem to be able to have it show. The code generated by facebook looks like this:

<script type="text/javascript" src="http://static.ak.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/it_IT"></script>
<script type="text/javascript">FB.init("92777f1a61b3a1da13b76559d593b861");</script>
<fb:fan profile_id="55328062716" stream="" connections="10" width="300"></fb:fan>
<div style="font-size:8px; padding-left:10px"><a href="http://www.facebook.com/pages/MODA-Music-Fashion/55328062716">M.O.D.A. - Music Fashion</a> on Facebook</div>

I added and to the allowed tags to the filtered html input format (which is the one I used to insert the content). but still they get filtered.

Any clues?

Thank you so much!
Andrea

⋅ Categories: Drupal 6.x

Comments

Skye07’s picture

Skye07 commented

Eh I'm not sure but use full HTML (no filtering) and make sure you're typing direct html and not through TinyMCE or any other wysiwyg.

andrea.corelli’s picture

andrea.corelli commented

Eh thank you, I had tried both and does not work sorry.

MacRonin’s picture

MacRonin commented

Full HTML with no filtering(or WYSIWYG) should work for this.

Exactly what are you seeing in the page where this block is included? Verify exactly by looking at the pages RAW HTML(in browser) after including the block

-Is the entire code block missing?
-Are the angle brackets (<>) and such escaped? but the rest shows up?
-Are the angle brackets and such removed? but the rest shows up?

andrea.corelli’s picture

andrea.corelli commented

Here is exactly what I get on the HTML after including the block:

<script src="http://static.ak.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/it_IT" type="text/javascript"></script>
<script type="text/javascript">// <![CDATA[
FB.init("3204cf6c114d5fd5ec7bbfe713706114");
// ]]></script>
</p>
<div style="font-size: 8px; padding-left: 10px;"><a href="http://www.facebook.com/pages/Listentoit/111469011125">Listen.to.it</a> on Facebook</div>

Actually it looks very strange. Couse when I open the HTML editor inside tinymce and insert the original code as any input format (including full html with no filters):

<script type="text/javascript" src="http://static.ak.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/it_IT"></script><script type="text/javascript">FB.init("3204cf6c114d5fd5ec7bbfe713706114");</script><fb:fan profile_id="111469011125" stream="" connections="10" width="300"></fb:fan><div style="font-size:8px; padding-left:10px"><a href="http://www.facebook.com/pages/Listentoit/111469011125">Listen.to.it</a> on Facebook</div>

Then I click update and get back to the tinymce. If I click on html again it shows this:

<p>
<script src="http://static.ak.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/it_IT" type="text/javascript"></script>
<script type="text/javascript">// <![CDATA[
FB.init("3204cf6c114d5fd5ec7bbfe713706114");
// ]]></script>
</p>
<div style="font-size:8px; padding-left:10px"><a href="http://www.facebook.com/pages/Listentoit/111469011125">Listen.to.it</a> on Facebook</div>

So there is obviously either a problem with TinyMCE adding those CDATA tags and stripping the FB tags or I am doing something else the wrong way.

In the meantime thanks everybody for their help. I really do apreciate it.
Andrea

MacRonin’s picture

MacRonin commented

This shouldn't make a diff, but I vaguely remember (from long ago) resolving some problem that was mangling my input text(I think it was JS) by removing the line-breaks/returns at the end of each line. I removed them, and made my input just one big long line and let the system wrap it visually, but not insert any returns.

that CDATA is probably from something trying to escape what it thinks is a PHP variable being set. But why it's doing it I don't know.

Is there a way to remove TinyMCE from the equation? My guess is that it's the culprit making you jump these hoops

andrea.corelli’s picture

andrea.corelli commented

Yeah, got it. Looks like a bug in TinyMCE. If I post it as full HTML (no filters) on a normal editor (excluding TinyMCE for this type of input) it works great.
I'll try to make the TinyMCE community aware.

Thanks everybody.
Andrea

aiyer1008’s picture

aiyer1008 commented

Hi, do you have any further information on how you got this to work? I disabled TinyMCE and posted using Full HTML and still have no luck. Any suggestions? Thanks

michelle’s picture

michelle
she/her
Primary language English
Location Wisconsin, USA
commented

The HTML format has a linebreak filter that can mess with scripts. Try the PHP input format, even though it's not PHP. If you dont' have the PHP filter module enabled, you can also make a new "raw" input format that doesn't have any filters assigned to it at all.

Michelle

andrea.corelli’s picture

andrea.corelli commented

Thanks Michelle. Tried that one but did not work either I'm afraid...

Anyone else?
Andrea

zylys’s picture

zylys commented

I had this same problem, fan box was not being displayed on IE , I created a block for the fan box and added this to the html tag:

< html xmlns:fb="h ttp://www.facebook.com/2008/fbml">

(i added a space in the middle so it was displayed)

I hope this is useful for someone

debonator’s picture

debonator commented

hey there,
i see you added that to the html tag. do you mean in the page.tpl.php template? i just realized right now that the fan box doesn't show up in IE (looks fine in firefox, safari, etc).

anyway, where do i add that code? i'm a big confused. and did you mean to put the space in between the h and the ttp?

thanks!

debonator’s picture

debonator commented

open your themes' page.tpl.php file. right near the top you'll see the html tag. add this to the html tag (thanks zylys!) 

xmlns:fb="http://www.facebook.com/2008/fbml"

hit save and everything should work fine on IE!

wildmtsky’s picture

wildmtsky commented

Ack! Same problem but all of these suggestions are not working. The only output I get is the link to fb nothing else. I have inserted the tag into page.tpl.php. Even tried adding the javascript to that page. Nothing works. I disabled the fckeditor so that I am just typing in text. The format is full html. Nada....

Anyone else have problems? What did you do to solve?

MacRonin’s picture

MacRonin commented

Beyond what is displayed on the visible page, I would suggest going into the actual page HML and seeing what made it thru. Sometimes tags are missing, or buried in a comment

wildmtsky’s picture

wildmtsky commented

Here's what made it out in the view source html:

<div id="block-block-41" class="clear-block block block-block">


  <div class="content"><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("5885d008821a659d0f79255b8d5a9bcc");</script><fb:fan profile_id="146704311893" stream="1" connections="" width="300"></fb:fan><div style="font-size:8px; padding-left:10px"><a href="http://www.facebook.com/pages/......(actual name here)....">....... on Facebook</a> </div></div>
</div>
wildmtsky’s picture

wildmtsky commented

every once and a while it seems like it is going to work then it just hangs with the 4 bars going across on the right side of the box.... errrrrr.

wildmtsky’s picture

wildmtsky commented

Okay it is not just my theme.. switched back to garland and it still doesn't work... frustrating!

wildmtsky’s picture

wildmtsky commented

Hard coded the facebook script into my page.tpl.php and it works fine. So, it has something to do with drupal stripping out the script in the block. Why would it do this and how do I avoid it?

debonator’s picture

debonator commented

my guess is your input format is set to something other than full html. make sure you're using the right format and see if that works. also, make sure you turn off "html corrector" (or whatever it's called) under admin: input formats.

wildmtsky’s picture

wildmtsky commented

Thanks but I did all of that.. I even used the php format. I created a format that had no filters and tried that. I even tried a suggestion that included something along these lines: 

<?php
   print "<scr";
   print "ipt"?>
 type="text/javascript" src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/en_US">";

  
<?php
   print "</scr";
   print "ipt>";
?>

Nothing works... I just don't get it....something is stripping it out and it is not my theme or input format from what I can tell.

wildmtsky’s picture

wildmtsky commented

Finally!!!! Here's the code for any one else that may have issues like I did. You have to break the javascript up... 

<?php
   print "<scr";
   print "ipt"?>
 type="text/javascript" src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/en_US">"
<?php
   print "</scr";
   print "ipt>"
?>   
<?php
   print "<scr";
 print "ipt" ?> type="text/javascript"<?php print ">"?>
FB.init("5885d008821a659d0f79255b8d5a9bcc")
<?php
   print "</scr";
   print "ipt>"
?>   
<?php
   print "<fb:";
   print "fan"
?>   
  width="175" connections="" stream="1" profile_id="Profile #"<?php print ">" ?>
<?php
   print "</fb:";
   print "fan>"
?>
<div style="font-size: 8px; padding-left: 10px;"><a href="http://www.facebook.com/pages/*******Actual page******">****Name****</a></div>
shopseal’s picture

shopseal commented

just switching to PHP input format works for me, had same problem, switched from full html to php, pasted code, problem solved

thanks

nelsonlee’s picture

nelsonlee commented

Thanks to zylys and debonator postings, my problem solved.

I edit the file in my Drupal /sites/all/themes/<my theme>/page.tpl.php
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml" lang=....>

Then add a block and disable the FCKeditor and put the code in the body as
<script type="text/javascript" src="http://static.ak.connect.facebook.com/connect.php/en_US"></script> <script type="text/javascript">FB.init("954737b6bc7501248521f7d97abdeb4e");</script>
<p><fb:fan width="200" logobar="1" connections="0" stream="0" profile_id="189746317447"></fb:fan></p>
<div style="font-size: 12px; padding-left: 5px;"><a href="http://apps.facebook.com/flashfans/">Facebook application to show your photos in slideshow format</a></div>
<p>&nbsp;</p>

Choose php code as the input mode and save. Done. It works in IE6, Firexfox and Google Chome.

danzsmith’s picture

danzsmith commented

You can also just add a new input format and turn off ALL filtering...even the Full HTML still has filtering that prevents javascript from running.

To do this go to admin/settings/filters/add

create a new filter, call it "Enable Javascript" and DESELECT all the filters by clicking on the checkboxes that have them enabled by default.

shaundychko’s picture

shaundychko
Location Vancouver, Canada
commented

After following the instructions here I still wasn't having any luck, until I copied the code after clicking on the "Fan Box" link in the "Facebook Connect Playground". You can get to the playground via http://developers.facebook.com/setup.php
The Fan Box code generated via the fan page itself didn't work.

lionsharz’s picture

lionsharz commented

God this was headache! I had the same issue and followed this courses of action. None of the following 1 - 5 had any effect:

1) Input filters - tested cutting out the code and saving an empty content area. I then reopened and changed the input format to Filtered HTML, Full HTML, PHP Code and no editor at all.
2) Adding more allowed HTML tags to the HTML filter - ticked the checkbox "HTML Filter" and then pasted in more tags as needed in the list (normally found at /admin/settings/filters/2/configure). Security might be advised here from what I have read but I started by adding an exhaustive list just to test it - probably disabling the HTML filter would achieve the same thing - but not sure. But also did not solve the problem.
3) Changed theme - no effect
4) Changed editor from TinyMCE (through WYSIWYG & WYSIWYG Bridge) to FCK Editor. No effect
5) Configuring my editor in various combinations - far as I remember this had no effect at any stage of the problem.

Lastly I then went to admin/performance to disable the JavaScript Optimize option. I turned this off and hey presto all was well! I believe the options in the performance section can often get in the way and sometimes cause different issues on different browsers.

AppleBag’s picture

AppleBag commented

Here's a module to do it really easily. You just add your facebook fan page profile id in the admin settings, and add the block to your page: http://geekdrop.com/content/geekdrop-facebook-fan-page-like-box-block-fo...

winnie80’s picture

winnie80 commented

where can i find the download link for this?
and i read that they only have for drupal5?

i made a facebook fan module for drupal6 sometime ago but need to compare to other available module out there
just to make sure i do it correctly
i have test it on my site and it works like a charm
or otherwise can you guys test it for me?
and tell me what i miss

http://gsmtoppers.nl/sites/default/files/fb_fan.zip

Pls’s picture

Pls commented

Thanks for your share. I found some bugs. There's a bug with logo checkbox settings not being saved. Don't you mind if I create a project with all bugs fixed + language field to change fanbox language? Thanks.

Drupal is my hobby, passion and love - all in one.

brandon.dixon’s picture

brandon.dixon commented

For all those looking to a solution for this issue, I coded up a Drupal module that takes all the Facebook box information and displays it in a box. You can grab it here:

http://www.dueyesterday.net/node/39

luka srbija’s picture

luka srbija commented

geekdrop-facebook-fan-page-like-box-block-for-drupal

How about this module for Drupal 7? anybody?

mitsuko’s picture

mitsuko commented

Hi

You can find a Drupal 7 version of this module on my website :
http://www.mitsuko-web-factory.com/blog/ajouter-une-facebook-fan-box-son...

hkirsman’s picture

hkirsman commented

http://drupal.org/sandbox/hkirsman/1786610

Fixed some bugs, syntax and integrated it with fb module. But I'm working on it. I need to know how to add multiple fanboxes, is the config path correct (now that it's integrated with fb) etc.