1

我在 GWT 上使用此元素成功地在我的 Web 应用程序上添加和显示 HTML 代码。

但是，当我尝试添加“Facebook like button”代码时，它根本不显示：

Element adContainerDiv = getView().getFooter().getElement(); 
adContainerDiv.setInnerHTML("<div class='fb-like' data-href='http://www.example.com' data-send='false' data-layout='button_count' data-width='100' data-show-faces='false' data-action='recommend' data-font='arial'></div>");

此代码位于以下代码的开头<body>：

    <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_GB/all.js#xfbml=1&appId=1265448483273";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script>
    <!-- END Facebook button function -->

“Tweet button”代码也会发生类似的情况，其中显示的是纯文本链接，没有任何样式：

Element adContainerDiv = getView().getFooter().getElement();
adContainerDiv.setInnerHTML("<a href=\"https://twitter.com/share\" class=\"twitter-share-button\">Tweet</a>");

在<body>我有了这段代码之后（我也在 setInnerHTML 上尝试过，但仍然无法正常工作：

<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

这是它在DOM中查找 Tweet 按钮的方式<body></body>：

<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_GB/all.js#xfbml=1&appId=13592647473";
          fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));</script>

<div style="top:0PX;height:60PX;width:1000PX;position: relative;" id="ur39jgf03kd">
<a href="https://twitter.com/share" class="twitter-share-button" 
data-via="example_com">Tweet</a></div>

有任何想法吗？

4

4 回答 4

2

我不工作的原因很明显 - 默认情况下，facebook/twitter 按钮期望所有按钮都是在加载 facebook/twitter 脚本之前创建的。因此，您应该在创建新按钮并将它们附加到 dom后通知这些外部库。

快速搜索“使用 javascript 动态添加 twitter 按钮”为我们提供了如何为 twitter 执行此操作的方法：

twttr.widgets.load();

因此，我们需要将其包装到本地方法中并放入您的一些 GWT 类中（这称为JSNI）：

  public static native void refreshTwitterButtons()/*-{
     $wnd.twttr.widgets.load();
  }-*/;

剩下的就是在您创建并附加到 DOM twitter 按钮 html 代码之后调用此函数。对于 facebook at 基本上是相同的工作流程，你谷歌“使用 javascript 动态添加 facebook 按钮”，你找出你必须调用的API，你为它创建适当的本地方法。

于 2012-11-18T00:53:46.267 回答
1

这是解决您问题的简单方法：

  • 在您的 HTML 中，包含以下内容
    <script>
        window.fbAsyncInit = function() {
            FB.init({
                appId      : 'YOUR_APP_ID', // App ID
                status     : true, // check login status
                cookie     : true, // enable cookies to allow the server to access the session
                xfbml      : true  // parse XFBML
    });

  };

  // Load the SDK Asynchronously
  (function(d){
     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.js";
     ref.parentNode.insertBefore(js, ref);
   }(document));
</script>

  • 创建可以扩展的 FBWidget 类，如下所示：

    公共类 FBWidget 扩展 HTML{

    protected String id;

public FBWidget(String string)
{
    super(string);
    id=null;
}

@Override
protected void onLoad() {
    try {
        if(id==null)
        {
            parseFBXML();
        }
        else
        {
            parseFBXML(id);
        }
    } catch (JavaScriptException e) {
        System.err.println(e);
    }
}

protected native void parseFBXML()
/*-{
    $wnd.FB.XFBML.parse();
}-*/;

protected native void parseFBXML(String id)
/*-{
    $wnd.FB.XFBML.parse(document.getElementById(id));
}-*/;

    }

  • 现在，例如，如果您想添加一个 FBLike 小部件，只需像这样扩展类：

公共类 FBlike 扩展 FBWidget {

public FBLike(String url) {
    super(getCode(url));
}


private static String getCode(String url) {
    return "<fb:like id=\""+"PUT_AN_ID_HERE"+"\" href=\""+url+"\" send=\"true\" width=\"500\" show_faces=\"false\" ></fb:like> ";
}

}

  • 为了提高 fb.parse 的速度，您可以为 FBLike 方法包含一个 id，这不会解析整个页面，只解析具有指定 id 的元素；
于 2012-11-21T22:06:29.477 回答
0

抱歉，如果这太明显了，但是您在哪里定义了 CSS 类“fb-like”？

顺便说一句，有很多 JS/JQuery 库可以添加这样的按钮。使用 JSNI 进行 GWT/JS 集成相当容易。它也可以通过使用 CSS 类名从 GWT 触发。

于 2012-11-05T13:22:21.357 回答
-1

你可以试试这个：

HTML fbLikeButton = new HTML("<div class='fb-like' data-href='http://www.example.com' data-send='false' data-layout='button_count' data-width='100' data-show-faces='false' data-action='recommend' data-font='arial'></div>");
containerForSocialMediaButtons.add(fbLikeButton);

其中 containerForSocialMediaButtons 是您在适当位置添加的 GWT 面板。尝试将原始 HTML 添加到您的页面时，请始终使用 HTML 类。但请注意，如果您放入 HTML 中的字符串是不安全的，您可能会遇到安全问题。

于 2012-11-16T15:45:50.423 回答