placeholder for facebook, changing the overflow attribute for div tag

[frits]

Hi to you all,

I'm building a site for a client and want to add a facebook like button. I placed a placeholder on the page and added the facebook code to it. The width according to facebook should be 450 and the height 80 pix. And so I did. But when you press the like button a fly out box should be visible and it doesn't. But it opens in the same placeholder box which, with a height of 80 pix is to small. According to facebook one should change the overflow attribute of the div tag from hidden to visible, scroll or auto.

I tried this by changing the html after I uploaded the site. And it worked! But I did it with textpad and not with Designer Pro X. Does anyone know if it is possible to hack it in XDP. Otherwise I always have to change the file by hand after uploading it.

Here is the div part of the placeholder box:
<div style="position: absolute; left: 36px; top: 630px; width: 451px; height: 81px; overflow: hidden;">
<div class="fb-like" data-href="http://www.facebook.nl/mijnton" data-send="false" data-width="450" data-show-faces="true"></div>
</div>

Greetings,
Frits

[steve.ledger]

Have you tried adding it to your placeholder code?

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<div style="overflow: auto;"> 
<div class="fb-like" data-href="http://www.facebook.nl/mijnton" data-send="false" data-width="450" data-show-faces="true"></div>
</div>

[frits]

Great, that seems to work.
Thanks,
Frits