Search code examples
facebookwordpressiframefacebook-iframe

Show/hide Iframe

I am using wordpress for my website and I am trying to set up my pages so that a user has to click a button to view the content. Yes, very simple with show/hide etc but the button I Want the user to click is this http://www.facebook.com/plugins/like.php

To display that in my page i need to use an iframe which is where it gets tricky. I have set up the show/hide code so that when a user clicks the like button (or anywhere in the iframe) it will display the content. But, no such luck!

This is my code

<div id="imagebox" style="display:none;"><?php $image = wp_get_attachment_image_src(get_field('image'), 'full'); ?>
                                <img src="<?php echo $image[0]; ?>" alt="<?php get_the_title(get_field('image')) ?>" /> </div>

    <div onclick="ShowDiv()"><iframe src="http://www.facebook.com/plugins/like.php?  href=http://www.facebook.com/BrandBang&amp;" allowTransparency="true">
            </iframe></div>

    <script language="javascript">
    function ShowDiv()
    {
    document.getElementById("imagebox").style.display = '';
    }
    </script>

I know that it is hard to use iframes to do what I am trying to do, but i am a total newbie when it comes to this stuff. Any help would be great!

Solution

  • Have tried giving your div an id="imagebox"?

    EDIT:

    This was already answered here. But, I didn't realize at first sight that you're loading something in the iframe that is not coming from your own domain, so you're going to fall in a cross site scripting event, which is not allowed.

    Afaik, you have to redesign some way your implementation. For instance, you could retrieve the generated html from facebook using curl and then outputting in your own div. Something like that should work.