如何使社交按鈕用的location.hash

工作，我在的jQuery（http://creotiv.in.ua/examples/photowall/ - 略NSFW）創造了一些畫廊腳本，並希望社會按鈕添加到每一個形象，讓用戶可以單獨喜歡每個圖像。但添加社交按鈕後，我看到他們不使用網址哈希部分，但我用它來瀏覽所有圖像。如何使社交按鈕用的location.hash

如果你點擊一個畫廊圖像上，你會看到在底部的三個社交媒體按鈕。他們正在使用圖庫網址，而不是每個圖片的網址。

可能是有人知道如何使Twitter，谷歌和Facebook的按鈕使用的頁面位置的哈希，並改變它，如果它被改變？

這裏是產生社交按鈕代碼：URL的

(function(w, d, s) { 
    function go(){ 
    var js, fjs = d.getElementsByTagName(s)[0], load = function(url, id) { 
     if (d.getElementById(id)) {return;} 
     js = d.createElement(s); js.src = url; js.id = id; 
     fjs.parentNode.insertBefore(js, fjs); 
    }; 
    load('https://connect.facebook.net/en_US/all.js#xfbml=1', 'fbjssdk'); 
    load('https://apis.google.com/js/plusone.js', 'gplus1js'); 
    load('https://platform.twitter.com/widgets.js', 'tweetjs'); 
    } 
    if (w.addEventListener) { w.addEventListener("load", go, false); } 
    else if (w.attachEvent) { w.attachEvent("onload",go); } 
}(window, document, 'script'));

來源

2011-12-23 Andrey Nikishaev

警告 - 有品味的網站，但有一些bo鳥。 – mrtsherman 2011-12-23 17:22:53

你是如何創建社交媒體按鈕？代碼生成的服務器端還是客戶端？你能發佈代碼嗎？ – mrtsherman 2011-12-23 17:26:52

這個笨蛋是我工作的一部分，因爲我是攝影師） – 2011-12-23 21:10:46

的散列部僅通過Web瀏覽器的用戶界面處理，它是由HTML解析器忽略。

有使hashbanged網頁抓取規格：

https://code.google.com/web/ajaxcrawling/docs/specification.html

但是沒有履帶式或現場支持它。

你需要找出一種方法來使用圖片代替hashbang網址，真實的URL。

來源

2011-12-23 17:29:29

你沒有看到gallery） – 2011-12-23 21:06:58

我使用散列來瀏覽jquery庫。例如photo1 - example.com/#p=1，photo2 - example.com/#p=2 它不適用於用戶的抓取工具，因此他們可以將url保存到他們喜歡的全屏圖像中。也是這樣，他們可以分享此圖像的網址我添加社交按鈕。但問題是他們不使用網址的散列部分，或者只在加載時使用它。 – 2011-12-23 21:07:28

啊哈。對不起（我以爲Facebook共享（點擊後共享）屏幕給你不正確的網址和照片預覽，因爲它不讀取散列 – 2011-12-24 12:22:20

好的...讓我們再試一次。那些共享腳本，在load（）期間運行時，使用現有的window.location來獲取URL並生成HTML。 URL存儲在這個HTML中，並且這個HTML只生成一次。我猜他們不公開API在組件內部動態更新URL。您無法從父框架訪問數據，因此您無法自行更新網址。

對於Facebook來說，你可以使用Facebook的Javascript SDK有過共享插件更多的低級別的訪問。我不知道這是否適用於其他社交網絡。

聽起來好些？ :)

來源

2011-12-24 12:25:03

不是真的（如果他們在負載上構建url - 這是bug，因爲url可能會改變，許多腳本和所有Flash頁面都使用散列部分來做導航 – 2011-12-24 21:52:14

我認爲那裏 – 2011-12-24 21:53:19

請將您的反饋提交給相應的API作者，他們可能會在將來的版本中修復它 – 2011-12-25 08:26:11

找到這個問題只有一個解決方案。重新初始化URL更改的所有社交按鈕。像這樣：

//Facebook like 
if(typeof(FB) !== 'undefined') 
    FB.XFBML.parse(document.getElementById('fblike')); 

//Google plus one 
if(typeof(gapi) !== 'undefined') { 
    gapi.plusone.render(document.getElementById('gplus'),{ 
     'href':location.href, 
     'annotation':'bubble', 
     'width': 90, 
     'align': 'left', 
     'size': 'medium' 
    }); 
} 

//Twitter tweet button 
if(typeof(twttr) !== 'undefined') { 
    $('.twitter-share-button').attr('data-url',location.href); 
    twttr.widgets.load(); 
}

與HTML代碼：

<div style="float:left;margin-top: 5px;width:80px;"> 
    <div id="gplus" class="g-plusone" data-size="medium"></div> 
</div> 
<div style="float:left;margin-top:5px;width:90px;"> 
    <a href="https://twitter.com/share" class="twitter-share-button">Tweet</a> 
</div> 
<div style="float:left;margin-top:5px;width:80px;" id="fblike"> 
    <fb:like send="false" layout="button_count" width="100" show_faces="false"></fb:like> 
</div>

但仍有存在的錯誤與G +按鈕，因爲它使用正確的URL共享，而不是計算

來源

2011-12-25 11:41:31

如何使社交按鈕用的location.hash

回答

相關問題