Question

I’d like to isolate a Facebook profile pic in their comment widget by resizing and offsetting the generated iframe. The tricky part (or so it seems to me) is that the generated iframe includes inline styles.

Anyone care to help?

I’m sure this is against TOS, but it’s just for a proof of concept.

Here is the doc:
http://developers.facebook.com/docs/reference/plugins/comments/

Here is the recommended 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&appId=145044622175352";
    fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-comments" data-href="http://stackoverflow.com" data-num-posts="1" data-width="200"></div>

And here is the generated source:

<div class=" fb_reset" id="fb-root"><div style="position: absolute; top: -2000px;"><iframe src="http://static.ak.facebook.com/connect/xd_arbiter.php?version=4#channel=f218f99fdee7694&amp;origin=http%3A%2F%2Fstackoverflow.com&amp;channel_path=%2Fquestions%3Ffb_xd_fragment%23%3F%3D%26xd_sig%3Df978c5a2550e88%26&amp;transport=postmessage" name="fb_xdm_frame_http" id="fb_xdm_frame_http"></iframe><iframe src="https://s-static.ak.facebook.com/connect/xd_arbiter.php?version=4#channel=f218f99fdee7694&amp;origin=http%3A%2F%2Fstackoveflow.com&amp;channel_path=%2Fquestions%3Ffb_xd_fragment%23%3F%3D%26xd_sig%3Df978c5a2550e88%26&amp;transport=postmessage" name="fb_xdm_frame_https" id="fb_xdm_frame_https"></iframe></div><div style="position: absolute; top: -10000px; height: 0pt; width: 0pt;"><div><iframe src="http://www.facebook.com/dialog/oauth?api_key=145044622175352&amp;app_id=145044622175352&amp;channel_url=http%3A%2F%2Fstatic.ak.facebook.com%2Fconnect%2Fxd_arbiter.php%3Fversion%3D4%23cb%3Df75bfba58018fa%26origin%3Dhttp%253A%252F%252Fstackoverflow.com%252Ff218f99fdee7694%26domain%3Dstackoverflow.com%26relation%3Dparent.parent&amp;client_id=145044622175352&amp;display=none&amp;domain=stackoverflow.com&amp;locale=en_US&amp;origin=1&amp;redirect_uri=http%3A%2F%2Fstatic.ak.facebook.com%2Fconnect%2Fxd_arbiter.php%3Fversion%3D4%23cb%3Dfc987f035fe9c2%26origin%3Dhttp%253A%252F%252Fkidnog.dev%252Ff218f99fdee7694%26domain%3Dkidnog.dev%26relation%3Dparent%26frame%3Df209b5ae6806ada&amp;response_type=token%2Csigned_request%2Ccode&amp;sdk=joey" class="FB_UI_Hidden" style="border: medium none; overflow: hidden; height: 240px; width: 575px;" name="f2ee3a0e40436fc" id="f209b5ae6806ada" scrolling="no"></iframe></div></div></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=145044622175352";
    fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-comments  fb_iframe_widget" data-href="http://stackoverflow.com" data-num-posts="1" data-width="200"><span><iframe src="https://www.facebook.com/plugins/comments.php?api_key=145044622175352&amp;channel_url=http%3A%2F%2Fstatic.ak.facebook.com%2Fconnect%2Fxd_arbiter.php%3Fversion%3D4%23cb%3Dfee6478d70ba1%26origin%3Dhttp%253A%252F%252Fkidnog.dev%252Ff218f99fdee7694%26domain%3Dstackoverflow.com%26relation%3Dparent.parent&amp;href=http%3A%2F%2Fstackoverflow.com&amp;locale=en_US&amp;numposts=1&amp;sdk=joey&amp;width=200" class="fb_ltr" style="border: medium none; overflow: hidden; height: 213px; width: 200px;" name="f313c20e013258c" id="f6f0fea91f7fa" scrolling="no"></iframe></span></div>

Ideal output is something like:

Instead of something like this:

Answer 1

You’re proabably right, this most likely does violate their TOS. But as a proof-of-concept I tried to get it working.

This solution seems to work when the user is logged on: http://jsfiddle.net/joshdavenport/4VaVZ/. However, when the user isn’t logged on a box stops full visibility of the anonymous facebook profile photo.

Javascript didn’t give any success, I think because there’s all kind of code being executed once the frame is loaded that stops modification, which to be honest, is good! They’ve done a good job of stopping malicious code being injected.