facebookiframeonclickfacebook-likexfbml

iFrame Like Button on Facebook custom onClick, the correct way of implementing?


EDIT

I just found a way to remove my "share" box after clicking the XFBML button:

.fb_edge_widget_with_comment span.fb_edge_comment_widget iframe.fb_ltr {
   display: none !important;
}

FOUND HERE

Now what event triggers for the iframe button?

I'd like to know how one does implement the custom onClick event for an iFrame Like button.

I've read that it should be used with FB.Event.subscribe('edge create',... but this method only seems to work with an XFBML button and not with an iFrame one.

(I'm using the iFrame like button because it doesn't ask you to share the page when clicked on it, whilst an XFBML button does ask you. If it's not possible to create custom code with an iFrame button, then is there a way to remove the "share" box after clicking an XFBML button?)

Here's a piece of the code that I'm using now, and if I change the button to an XFBML button the custom clickEvent works!

<div id="loginContainer">
    <iframe
        src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FRoyal-Translations%2F323613591009141&amp;send=false&amp;layout=button_count&amp;width=450&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21&amp;appId=273312646075066"
        scrolling="no"
        frameborder="0"
        style="border:none; overflow:hidden; width:450px; height:21px;"
        allowTransparency="true">
    </iframe>
</div>



<script type="text/javascript">
    window.fbAsyncInit = function() {
        FB.init({appId: '273312646075066', status: true, cookie: true, xfbml: true});
        FB.Event.subscribe('edge.create',
            function(response) {
                document.getElementById("loginContainer").className += "invisible";
                document.getElementById("formContainer").className = "visible";
            }
        );
    };

Solution

  • then is there a way to remove the "share" box after clicking an XFBML button?

    Yes, you can do it with a little but of css to hide the DOM element that facebook adds.

    .fb_edge_widget_with_comment span.fb_edge_comment_widget { display: none !important; }