1

GWT でこの要素を使用して、Web アプリに HTML コードを正常に追加して表示しています。

ただし、「Facebook のようなボタン」コードを追加しようとすると、まったく表示されません。

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

「ツイート ボタン」コードでも同様のことが起こります。ここでは、スタイルなしでプレーン テキスト リンクが表示されます。

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内でのツイート ボタンの外観<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 の場合、基本的に同じワークフローです。「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 クラスを作成します。

    public class FBWidget extends 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 ウィジェットを追加する場合は、次のようにクラスを拡張します。

public class FBLike extends 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 ライブラリはかなりあります。GWT と JS の統合は、JSNI を使用するとかなり簡単です。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 に答える