Issue with Facebook Like button in Windows Firefox

StackOverflow https://stackoverflow.com/questions/3875364

Question

I've got a facebook like button ( iFrame edition ) that is overlaid on top of a full browser Flash application. The like button is hooked up to like separate images within the application, and when each new images is shown, the like button is refreshed with data using ExternalInterface.

The like button fades in and out for each new image using JQuery fadeIn() / fadeOut(), again being called with ExternalInterface.

The issue I'm having is that on Windows, this does not seem to want to work, in Firefox specifically...

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 is the div containing the iFrame, and it's z-index is 9999 just to ensure it is always on top.

Here is the JS being used:

<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>

where the sendIdToLikeButton method is taking the id of the photo sent from Flash using ExternalInterface to recreate the src attribute of the iFrame.

And of course, as this is a flash application, here is the minimal HTML:

<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>

Again, this works everywhere except for Firefox in Windows, and I'm not sure what to do about it. I'm assuming that it is an error in the CSS or the Javascript somewhere.

Any help is greatly appreciated.

Thanks in advance.

Grammar

Was it helpful?

Solution

I finally figured this out after a couple weeks of back and forth. As it turned out the issue was with the iframe being placed over top of the flash content.

This was resolved by adding a param to the swfobject call -- setting wmode to transparent:

        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 );

Setting the wmode to transparent allowed for the "transparent" iframe to be placed over top of the application in every browser.

So as it turns out this was not an issue with the facebook like button at all, but with iframes and Flash. Of course if you are not using SWFObject to display your swf files, the wmode is a parameter that can be set in the Publish Properties in Flash when you publish your swfs.

Cheers

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top