Facebook的喜歡按鈕使用不顯眼的JS在軌

我只是把Facebook的喜歡按鈕，在我的Rails應用程序中加入以下代碼到html.erb頁：Facebook的喜歡按鈕使用不顯眼的JS在軌

<div id="fb-root"></div> 
<script src="http://connect.facebook.net/en_US/all.js#appId=1419...&amp;xfbml=1"></script><fb:like href="" send="" width="100" show_faces="" font="" layout="button_count" action="recommend"></fb:like>

同時...工程確定但是當facebook sdk加載時，我在頁面上獲得了一個很大的空白區域。所以，我想我會嘗試把它放在我的application.js文件中，並在加載頁面後運行該函數。唯一的問題是，我不能得到這個工作根本:)

到目前爲止，我已經在html中保留了「fb-root」div，我將下面的函數放入application.js中

$(function() { 
    $('#fb-root').after('<script src="http://connect.facebook.net/en_US/all.js#appId=1419...&amp;xfbml=1"></script><fb:like href="" send="" width="100" show_faces="" font="" layout="button_count" action="recommend"></fb:like>'); 
});

但是，這不適合我，我不明白爲什麼（我是一個js newb）。任何幫助將不勝感激。謝謝！

來源

2011-06-30 spinlock

OK，我想通了這一點首先，我把下面的標籤在html：

home.html.erb

<div id="fb-root"></div><div id="facebook">[Facebook]</div>

的重要標籤這裏「fb-root」，因爲這是Facebook的javascript將尋找的。然後，在我的js文件我添加此功能：

的application.js

// facebook recommend button              
$(function() { 
     likebutton = 
      '<fb:like href="" send="" width="100" show_faces="" ' + 
      'font="" layout="button_count" action="recommend">' + 
      '</fb:like>'; 
     $.getScript('http://connect.facebook.net/en_US/all.js', function() { 
       FB.init({appId: 141936272547391, 
          status: true, 
          cookie: true, 
          xfbml: true 
          }); 
       $('#facebook').replaceWith(likebutton); 
     }); 
    });

而且，沒有更多的白盒子，如果他的客戶沒有啓用JS，他們只是看到「[Facebook的]」和我的代碼很好，可維護。 :)

來源

2011-07-02 16:39:37 spinlock

您應該加載javascript函數asynchronously：

<script> 
    window.fbAsyncInit = function() { 
    FB.init({appId: 'your app id', status: true, cookie: true, xfbml: true}); 
    }; 
    (function() { 
    var e = document.createElement('script'); e.async = true; 
    e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js'; 
    document.getElementById('fb-root').appendChild(e); 
    }()); 
</script>

然後，一旦JavaScript庫加載，它會轉換按鈕一樣的FBML到相應的HTML代碼的iframe。如果它在加載之前顯示一個空白區域，則將類似按鈕的fbml代碼放在div中，並使用CSS來設置該div的樣式。

這裏是一個完整的例子，它沒有你正在談論的問題（我異步加載JavaScript庫，在模擬緩慢加載的時間延遲。請注意，加載按鈕加載時沒有白色。

<!DOCTYPE html> 
<html> 
<body bgcolor="#000"> 
<div id="fb-root"></div> 
<fb:like href="http://stackoverflow.com" send="" width="100" layout="button_count" action="recommend"></fb:like> 
<script> 
    window.fbAsyncInit = function() { 
    FB.init({appId: 'your app id', status: true, cookie: true, xfbml: true}); 
    }; 
    (function() { 
    // delay to simulate slow loading of Facebook library - remove this setTimeout!! 
    var t = setTimeout(function() { 
     alert('loading fb'); 
     var e = document.createElement('script'); e.async = true; 
     e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js'; 
     document.getElementById('fb-root').appendChild(e); 
     }, 3000); 
    }()); 

</script> 
</body> 
</html>

來源

2011-06-30 23:42:57 bkaid

這是_almost_我正在尋找。但是，我想保持html.erb文件中的javascript與unobtrusive JavaScript約定保持一致。謝謝！ – spinlock

然後將整個腳本的內容移動到外部.js文件中。 – bkaid

Facebook的喜歡按鈕使用不顯眼的JS在軌

回答

相關問題