在iFrame中加载Facebook Sharer

时间:2012-02-15 21:51:36

标签: facebook

我只是试图将facebook sharer页面加载到iframe中,该iframe位于div中但没有成功。

以下是我用于iframe的代码,

<iframe src="http://www.facebook.com/sharer.php?u=http://www.website.com&t=Title Hoes Here"></iframe>

当我查看页面时,它的空白和iframe源是

<iframe src="http://www.facebook.com/sharer.php?u=http://www.website.com&t=Title Hoes Here">
<html>
<body></body>
</html>
</iframe>

如果我直接查看网址,一切都会正常显示。

facebook会阻止在iFrame中加载共享者吗?有什么方法让facebook分享者出现在模态窗口中?

由于

2 个答案:

答案 0 :(得分:7)

是的,Facebook几乎阻止了iFrames中所有屏幕的加载。

如果您正在使用Facebook连接,您可以执行一些简单的JavaScript方法来获取页面上的对话框,并且启动Facebook将会照顾很多使屏幕看起来很漂亮的工作。

请参阅此链接(http://developers.facebook.com/docs/reference/javascript/FB.ui/)或使用以下代码:

FB.ui(
  {
    method: 'feed',
    name: 'Facebook Dialogs',
    link: 'http://developers.facebook.com/docs/reference/dialogs/',
    picture: 'http://fbrell.com/f8.jpg',
    caption: 'Reference Documentation',
    description: 'Dialogs provide a simple, consistent interface for applications to interface with users.'
  },
  function(response) {
    if (response && response.post_id) {
      alert('Post was published.');
    } else {
      alert('Post was not published.');
    }
  }
);

如果您没有使用Facebook连接,那么真正唯一可以选择获取该屏幕的选项就是弹出一个弹出窗口。

另一种选择是使用like / send按钮插件,这不是完全相同的功能,但更容易集成。 http://developers.facebook.com/docs/plugins/

干杯!

答案 1 :(得分:0)

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>

头部的上一行。

<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};

(function() {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());

</script>

<script>
$(document).ready(function(){
$('#share_button').live('click', function(e){
e.preventDefault();
FB.ui(
{

method: 'feed',
name: '',
link: '',
picture: '',
caption: '',
description: '',
message: ''
});
});
});
</script>