獲取Facebook Like按鈕（由JS生成）出現

我正在使用PrettyPhoto燈箱作爲圖片庫。當圖像彈出時，Twitter和Facebook按鈕出現在它下面。這是內置到PrettyPhoto插件，它工作正常。獲取Facebook Like按鈕（由JS生成）出現

問題是，Facebook按鈕是iframe類型（它不允許用戶輸入評論）。我想用HTML5按鈕替換它（當你點擊它時打開一個評論框，而不是喜歡）。

我要取代這個（iframe的按鈕標準FB碼）：

<div class="facebook"><iframe src="//www.facebook.com/plugins/like.php?locale=en_US&href='+pp_real_links[set_position]+'&layout=button_count&show_faces=true&width=500&action=like&font&colorscheme=light&height=23" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:23px;" allowTransparency="true"></iframe></div>

...這個（對HTML5像按鈕標準FB碼）：

<div class="fb-like" data-href="instagram.com/the-pic" data-send="false" data-layout="button_count" data-width="450" data-show-faces="false">test text</div>

當我進行更換時，它不會顯示在燈箱中。它可以在網站上的任何其他地方使用。

是的，我用.fb-like替換.facebook的prettyPhoto css代碼。我也把文本放在div中來驗證它是否顯示在正確的位置。

我認爲問題的根源在於社交鏈接代碼是在JS中定義的;在PrettyPhoto設置中，有一個名爲「標記」的屬性，它存儲了燈箱和共享按鈕的html。所以它可能沒有連接FB JS代碼。

解決方案是什麼？

來源

2012-06-04 bevanb

您發佈的代碼（舊的iframe之一）不需要使用facebook javascript sdk，因爲它只是加載iframe。

另一方面，你想要使用的html5代碼確實需要sdk來渲染它，你會發現fb-like div只是一個容器，其中sdk插入一個新的iframe。

從你的代碼，我不能說，如果要加載JS的SDK，如果沒有則加載/初始化它如文檔中所描述的，只是一定要包括xfbml屬性：

FB.init({ 
    appId  : 'YOUR_APP_ID', // App ID 
    channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel File 
    status  : true, // check login status 
    cookie  : true, // enable cookies to allow the server to access the session 
    xfbml  : true // parse XFBML 
});

如果你已經在使用js sdk，那麼它應該可以工作，除非在sdk完成加載和初始化後動態添加類似的按鈕代碼。
如果是這樣的話，那麼只要使用FB.XFBML.parse方法：

FB.XFBML.parse(); 

// or you can pass the container element: 
FB.XFBML.parse(document.getElementById(ELEMENT_ID));

來源

2012-06-04 20:21:59

謝謝！添加'FB.XFBML.parse（）;'解決了這個問題。 – bevanb

獲取Facebook Like按鈕（由JS生成）出現

回答

相關問題