Facebook按鈕不顯示在GWT Element.setInnerHTML（）內部。顯示鳴叫按鈕而不風格

我使用GWT這個元素成功地添加和顯示HTML代碼在我的web應用程序。Facebook按鈕不顯示在GWT Element.setInnerHTML（）內部。顯示鳴叫按鈕而不風格

然而，當我嘗試添加「臉譜喜歡按鈕」的代碼，它根本不顯示：

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按鈕」代碼會出現類似的情況，其中顯示的是純文本鏈接，沒有任何樣式：

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>之間的分享Tweet按鈕的方式：

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

任何想法？

來源

2012-11-05 Arturo

我不會爲明顯的原因的工作 - 默認的Facebook/Twitter的按鈕，期望所有的按鈕都臉譜/嘰嘰喳喳腳本加載之前創建的。因此，您應在創建新按鈕並將它們附加到dom後通知這些外部庫。

爲"Dynamically add twitter button using javascript"快速搜索給我們way如何做到這一點的嘰嘰喳喳：

twttr.widgets.load();

所以我們需要把這個包到本地方法到你的一些GWT類（這被稱爲JSNI）：

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

而剩下的，是您創建並連接到DOM Twitter的按鈕之後的HTML代碼來調用這個函數。對於Facebook來說，在基本相同的工作流程，你google "Dynamically add facebook button using javascript"，你發現你必須調用哪個API，您爲它創建適當的本地方法。

來源

2012-11-18 00:53:46 jusio

很抱歉，如果這是太明顯了，但你去哪裏定義的CSS類「FB樣」？

順便說一句有相當多的添加按鈕像這樣的一些JS/JQuery的庫。使用JSNI進行GWT/JS集成相當容易。它也可以通過使用CSS類名稱從GWT觸發。

來源

2012-11-05 13:22:21 salk31

我們不需要定義CSS類。 Facebook爲你做這個。我的代碼在除了setInnerHTML之外的其他地方工作。謝謝。 – Arturo

你可以試試這個：

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放入HTML中是不安全的，你可能會遇到安全問題。

來源

2012-11-16 15:45:50 Renato

這裏有一個簡單的解決你的問題：

在你的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-21 22:06:29 fernandohur

@ 718333你指的是與「PUT_AN_ID_HERE」什麼ID？你從哪裏得到它？謝謝。 – Patrick

回答

相關問題