2

生成されたiframeのサイズを変更してオフセットすることにより、コメントウィジェットでFacebookのプロフィール写真を分離したいと思います。トリッキーな部分（または私にはそう思われます）は、生成されたiframeにインラインスタイルが含まれていることです。

誰か助けてくれませんか？

これはTOSに反すると確信していますが、これは概念実証のためだけのものです。

ドキュメントは次のとおりです：http： //developers.facebook.com/docs/reference/plugins/comments/

推奨されるコードは次のとおりです。

<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>

そして、ここに生成されたソースがあります：

<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>

理想的な出力は次のようなものです。

写真

このようなものの代わりに：

コメント

4

2 に答える 2

1

overflow:hidden、iframeおよびjavascriptingの固定幅/高さを使用.scroll()すると、目的の結果が得られる場合があります。ただし、iframe内で（別のドメインから）画像を見つける方法がわかりません。

PS：「概念実証」を書かなかったら、私は答えませんでした。絶対に使用しないでください。:-)

于 2012-04-17T20:31:36.020 に答える
1

あなたはおそらく正しいです、これはおそらく彼らのTOSに違反しています。しかし、概念実証として、私はそれを機能させようとしました。

このソリューションは、ユーザーがログオンしているときに機能するようです：http: //jsfiddle.net/joshdavenport/4VaVZ/。ただし、ユーザーがログオンしていない場合、ボックスは匿名のFacebookプロフィール写真の完全な表示を停止します。

Javascriptは成功しませんでした。フレームが読み込まれると、変更を停止するあらゆる種類のコードが実行されるため、正直なところ、これは良いことだと思います。彼らは、悪意のあるコードが挿入されるのを防ぐという良い仕事をしました。

于 2012-04-25T10:52:33.427 に答える