2011-10-12 46 views
3

我剛剛完成了一個基於ajax的100%小型網站。但我在更新Facebook Like按鈕的鏈接時遇到問題。使用Ajax更新facebook像按鈕

我簡單地使用了facebook生成的code,並且我包含了圖元標記。當用戶按下它加載一個新的YouTube視頻的按鈕,我使用jQuery這種方式更新的元標記

<meta property="og:url" content="http://www.mySite.com/"/> 

$("meta[property=og:url]").attr("content", nUrl); 

nUrl是新頁面的URL包含新的隨機選擇視頻。

當我點擊「喜歡」它只需抓住點擊「喜歡」它只需抓住原始的og:url元標記內容,現在由ajax設置新的。 如何使用JavaScript更新像按鈕網址?我做了什麼錯了? 謝謝

回答

2

所以在這裏我就是這樣做來解決我的誰擁有相同的其他人的問題: 添加到您的網站:

<html xmlns="http://www.w3.org/1999/xhtml" 
    xmlns:og="http://ogp.me/ns#" 
    xmlns:fb="http://www.facebook.com/2008/fbml" > 

這將FBML增加您的網站。然後使用類似按鈕的FBML版本(或評論系統,或其他),像我用這個:

<span id="fbLike"><fb:like href="http://www.your-site.com?v=1" send="false" layout="button_count" width="80" show_faces="true"></fb:like></span> 

我們有這樣用戶每次做出一個Ajax動作按鈕一個新的Facebook,只需添加這個jQuery代碼在任何你在你的客戶端代碼處理這個動作:

var nUrl = "http://www.your-site.com?v="+toPlayId.substring(1); 
$('#fbLike').html('<fb:like href="'+nUrl+'" send="false" layout="button_count" width="80" show_faces="true" />'); 
     if (typeof FB != "undefined"){ 
     FB.XFBML.parse(document.getElementById('fbLike'));} 

你基本上只需更換您的按鈕是一個新的。 nUrl是您希望新按鈕指向的新鏈接。 你不需要一個真正的新網址,只需要在url中添加一個參數,以便你的ajax在找到參數時知道要顯示的內容。 就是這樣。

+0

這不是我正在尋找的東西,但是最後點擊了關於使用'FB.XFBML.parse'的部分。在範圍內重寫html是非常巧妙的,以獲得新的喜歡按鈕。 – CaptainBli

1

不要使用AJAX或javascript修改元標記。設置服務器端腳本,以便第一次正確設置它們。

當您在Facebook上共享/分享URL時,Facebook將向該URL發出HTTP請求並解析它所看到的元標記。

+0

是的,但類似的按鈕應指向良好的網頁網址,如果它只是指向你--fake.com我不知道用戶喜歡設置正確的元標記是什麼視頻 – john

+0

是的,這就是爲什麼我說服務器 - 側腳本。我使用GET變量來確定元標記設置的服務器端邏輯。 – Teddy

1

您無法使用Javascript更新OG標記。 Facebook將向服務器發出服務器端請求,並且這必須返回代表該對象的OG標籤。

你需要創建一個URL爲您網站上的每一個對象 - 是這樣的:

http://www.yoursite.com/video/VIDEO_ID 

當你的視頻頁面使用Ajax的變化,您呈現一個新的類似按鈕,指向在URL喜歡這個。在沒有JS的情況下擊中這個URL應該會呈現正確的OG標籤 - 這就是Facebook如何看你的頁面。然後,您可以添加JavaScript重定向(window.top.location = NEW URL),將用戶重定向到基於AJAX的視頻播放器。