Question

我在jQuery（http://creotiv.in.ua/examples/photowall/ - 稍微NSFW）中创建了一些图库脚本，并且想要为每个图像添加社交按钮，因此用户可以分别喜欢每个图像。但是在添加社交按钮后，我看到他们没有使用url hash部分，但是我用它来浏览所有图像。

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

可能有人知道如何使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'));

Answer 1

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

有一个规范可以使hashbanged页面可以抓取：

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

但是没有抓取工具或网站支持它。

您需要找到一种方法来使用图片的真实网址而不是hashbang网址。

Answer 2

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

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

听起来更好？：）

Answer 3

只找到一个解决此问题的方法。在网址更改时重新启动所有社交按钮。像这样：

//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 +按钮仍然存在bug，因为它使用正确的url进行共享，但不能用于计数

如何使社交按钮与location.hash一起使用

3 个答案: