Javascript 如何使社交按钮与location.hash一起工作

我在jQuery中创建了一些图库脚本（-略为NSFW），希望在每个图像中添加社交按钮，以便用户可以分别喜欢每个图像。 但在添加社交按钮后，我发现它们并没有使用url哈希部分，但我用它来浏览所有图片

如果你点击画廊图片，你会在底部看到三个社交媒体按钮。他们使用的是图库URL，而不是每个图像的URL

也许有人知道如何使用Twitter、Google+和Facebook按钮来使用页面位置散列，如果页面位置散列被更改了，会对其进行更改吗

下面是生成社交按钮的代码：

(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'));

---

URL的哈希部分仅由web浏览器用户界面处理，HTML解析器将忽略它

有一个规范可以使散列页面可爬行：

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

但是，还没有爬虫程序或站点支持它

---

您需要找到一种方法，将真实URL用于图像，而不是hashbang URL。

好的。。。让我们再试一次。这些共享脚本在load（）期间运行时，使用现有的window.location获取URL并生成HTML。URL存储在此HTML中，此HTML仅生成一次。我猜他们不会公开API，而是在组件内部动态更新URL。您无法从父框架访问数据，因此您无法自己更新URL

对于Facebook，您可以使用FacebookJavaScriptSDK对共享小部件进行更低级的访问。我不知道这是否适用于其他社交网络

---

听起来好多了？：）

对此问题只找到了一个解决方案。重新设置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进行共享，但不用于计算

警告-有品位的网站，但存在一些问题。你是如何创建社交媒体按钮的？代码生成服务器端还是客户端？你能发布代码吗？这是我工作的一部分，因为我是摄影师）在描述中添加了社会代码。HTML代码是每个按钮的标准代码。主要的问题是，我可以在每次照片更改时重新创建社交按钮，但这对客户端来说很困难（所以这不是答案），而且这个按钮甚至不适用于window.history.push（）；这改变了所有url，而不仅仅是散列部分。我使用散列在jquery库中导航。例如photo1-example.com/#p=1，photo2-example.com/#p=2，它不是为爬虫服务的，而是为用户服务的，这样他们可以将url保存到他们喜欢的全屏图像。我还添加了社交按钮，以便他们可以共享此图像的url。但问题是他们不使用url的哈希部分，或者在加载时只使用了一次。抱歉：（我想Facebook共享（在点击共享后）屏幕会给你不正确的URL和照片预览，因为它不会读取哈希。Facebook和google共享确实会给你不正确的URL，因为当我与哈希共享URL时，它会从中删除哈希，只保存主要部分和搜索部分（如果他们在加载时构建url-这是一个错误，因为url可能会更改。许多脚本和所有Flash页面都使用哈希部分进行导航。我认为没有正常的方法来实现这一点。这真的很糟糕。请将您的反馈提交给相应的API作者，他们可能会在未来的版本中修复它。）