Hide Facebook Like Box content which is comes from IFRAME

Question

I use Facebook 'Like Box' in my home page which is comes from Iframe. but what i want is that need to hide or remove highlighted part which is mention in image.

Please help me as soon as possible. I really need it.

Thanks in advance.

Answer 1

You cannot touch what is in the iframe because of the same-origin restriction and Facebook doesn't make that part optional (the Like Box requires the Like button to always show).

You might get the result you want with the Activity Feed plugin instead: https://developers.facebook.com/docs/reference/plugins/activity/

EDIT: Sorry, the Activity Feed isn't the same feed as the Like Box stream. In fact, I don't think Facebook offers another plugin with that feature. If you really want that section gone from your page, the only thing I can think of is placing the iframe in a div with "overflow: hidden;" and with the iframe "position: relative; top: -63px;"

Answer 2

From what I've seen there is no way Facebook allows you to do this anymore, but with a little HTML and CSS I've been able to remove the top bar and the bottom bar. Try this:

1. Wrap an outer div around fb-like-box div
2. Set the height and width of the outer div to what you want to see in the feed
3. Set the height of the fb-like-box div to be taller than the height of the outer div
4. Set margin-top:-71px on the fb-like-box div
5. Set overflow-y: hidden on the outer div

This should hide the header above the outer div and the footer below it. The example below.

<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&appId=123456789101112";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div style="width:275px;height:242px;border:solid 1px #b28b2e;overflow-y:hidden;">
    <div class="fb-like-box" data-href="http://www.facebook.com/myfacebookpage" data-width="275" data-height="338" data-show-faces="false" data-stream="true" data-header="false" data-force-wall="true" style="margin-top:-71px;"></div>
</div>

Answer 3

Maybe you could try using the html 5 plugin instead of the iframe one and hidding it using CSS. Or you can use the graph api to grab the feed and show it as you wish.