2010-10-06 3 views
1

J'ai un bouton facebook (édition iFrame) qui est superposé à une application Flash complète du navigateur. Le bouton "J'aime" est accroché pour ressembler à des images distinctes dans l'application, et quand chaque nouvelle image est affichée, le bouton "J'aime" est actualisé avec des données en utilisant ExternalInterface.Problème avec le bouton Facebook Like de Windows Firefox

Le bouton "J'aime" apparaît et disparaît pour chaque nouvelle image en utilisant JQuery fadeIn()/fadeOut(), à nouveau appelé avec ExternalInterface.

La question que je vais avoir est que sur Windows, cela ne semble pas vouloir travailler, dans Firefox spécifiquement ...

CSS:

 html { 
      height: 100%; 
      overflow: hidden; 
      min-width: 800px; 
      min-height: 600px; 
     } 
     #flashContent { 
      position: absolute; 
      top: 0px; 
      left: 0px; 
      height: 100%; 
      width: 100%; 
      z-index: 1; 
     } 
     body { 
      margin: 0; 
      padding: 0; 
      background-color: #000000; 
     } 
     #fb-like { 
      position: absolute; 
      bottom: 32px; 
      left: 510px; 
      width: 280px; 
      z-index: 9999; 
      display: none; 
     } 

fb-like est le div contenant l'iFrame, et son z-index est 9999 juste pour s'assurer qu'il est toujours au top.

Voici le JS utilisé:

<script type="text/javascript"> 

    var isVisible = false; 

    function showLikeButton(visible){   

     if(visible == true) 
     { 
      $('#fb-like').fadeIn('slow'); 

      isVisible = true; 

     } 
     else if (isVisible) 
     { 
      $('#fb-like').fadeOut('slow'); 

      isVisible = false; 

     } 
    } 

    var begOfUrl = "http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fmywebsite.com%2fdirectory"; 
    var endOfUrl = "&amp;layout=button_count&amp;show_faces=false&amp;width=150&amp;action=like&amp;colorscheme=dark&amp;height=21"; 

    function sendIdToLikeButton(title, id){     
     $('#facebook-like').attr('src', begOfUrl + "%3Fid=" + id + endOfUrl); 
    } 

</script> 

où la méthode sendIdToLikeButton prend l'identifiant de la photo envoyée par Flash à l'aide ExternalInterface pour recréer l'attribut src de l'iFrame.

Et bien sûr, car cela est une application flash, voici le code HTML minimal:

<body> 

<div id="fb-like"> 
     <iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fnfb.designaxiom.com/build13&amp;layout=button_count&amp;show_faces=false&amp;width=150&amp;action=like&amp;colorscheme=dark&amp;height=21" scrolling="no" frameborder="0" style="position: absolute; border:none; overflow:hidden; width:300px; height:40px;" allowTransparency="true" id="facebook-like"></iframe> 
    </div> 
    <div id="flashContent"> 
     <a href="http://www.adobe.com/go/getflashplayer"> 
      <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /> 
     </a> 
    </div> 
</body> 

Encore une fois, cela fonctionne partout sauf pour Firefox sous Windows, et je ne suis pas sûr de ce qu'il faut faire à ce sujet . Je suppose que c'est une erreur dans le CSS ou le Javascript quelque part.

Toute aide est grandement appréciée.

Merci d'avance.

Grammaire

Répondre

2

J'ai finalement compris cela après deux semaines de retour en arrière. Comme il s'est avéré que le problème était avec l'iframe étant placé au-dessus du contenu flash.

Cela a été résolu en ajoutant un param à l'appel swfobject - wmode la transparence à:

 var params = {}; 
     params.bgcolor = "#000000"; 
     params.allowfullscreen = "true"; 
     params.allowscriptaccess = "true"; 
     params.wmode = "transparent"; 

     var attributes = { id: "nfb", name:"nfb" }; 
     var swfUrl = "Runner.swf"; 

     swfobject.embedSWF(swfUrl, "flashContent", "100%", "100%", "10.0.0", false, flashvars, params, attributes); 

Réglage du wmode transparent autorisé pour l'iframe « transparent » pour être placé au-dessus de l'application chaque navigateur. Donc, il s'est avéré que ce n'était pas du tout un problème avec le bouton Facebook, mais avec les iframes et Flash. Bien sûr, si vous n'utilisez pas SWFObject pour afficher vos fichiers swf, le wmode est un paramètre qui peut être défini dans les propriétés de publication dans Flash lorsque vous publiez vos swfs.

Cheers