2

我有这个脚本，我把它放在 GWT nocache.js 之上

<head>
    <script type="text/javascript" language="javascript">
        (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>
        <script type="text/javascript" language="javascript" src="app/app.nocache.js"></script>
</head>
<body>
    <div id="fb-root"></div>
    <div id="rootPanel"></div>
</body>

在我网站的一个页面上（我使用 Errai-UI）

这是添加的：

    HTMLPanel likebox = new HTMLPanel("<div class='fb-like-box' " +
                    "data-href='http://www.facebook.com/platform' data-width='595' " +
                    "data-show-faces='true' data-stream='true' data-header='true'></div>");

    likepanel.add(likebox);

我面临的问题是，在我的 GWT 应用程序中，当站点登陆到注入此面板的页面时，Facebook 喜欢框不会被渲染，即使我查看 DOM，<div class='like-box' ...>DOM 树中也有.

有效的是我需要在当前页面上进行整页刷新（在 DevMode 中）：示例：/mysite#PageWithFBDiv

此外，页面刷新技巧仅适用于 DevMode，但在编译时无法执行此技巧。

4

1 回答 1

4

根据 Facebook Javascript SDK 文档，有必要将 div 放在页面顶部，即脚本上方。

JavaScript SDK 要求页面中存在 fb-root 元素。

不得使用 display: none 或 visibility: hidden 隐藏 fb-root 元素，否则 SDK 的某些部分将无法在 Internet Explorer 中正常工作。

SDK 将元素插入到 fb-root 中，这些元素期望相对于 body 或相对于靠近页面顶部的元素定位。最好 fb-root 元素不在具有 position: absolute 或 position: relative 的元素内。如果您必须将 fb-root 元素放置在定位元素内，那么您还应该将其放置在靠近主体顶部的位置，否则 SDK 的某些部分可能无法正常工作。

此代码应直接放在开始标记之后。

<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
    // init the FB JS SDK
    FB.init({
      appId      : 'YOUR_APP_ID', // App ID from the App Dashboard
      channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel File for x-domain communication
      status     : true, // check the login status upon init?
      cookie     : true, // set sessions cookies to allow your server to access the session?
      xfbml      : true  // parse XFBML tags on this page?
    });

    // Additional initialization code such as adding Event Listeners goes here

  };

  // Load the SDK's source Asynchronously
  // Note that the debug version is being actively developed and might 
  // contain some type checks that are overly strict. 
  // Please report such bugs using the bugs tool.
  (function(d, debug){
     var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement('script'); js.id = id; js.async = true;
     js.src = "//connect.facebook.net/en_US/all" + (debug ? "/debug" : "") + ".js";
     ref.parentNode.insertBefore(js, ref);
   }(document, /*debug*/ false));
</script>
于 2013-03-21T13:00:14.707 回答