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

Posted 2023-02-24

【中文标题】如何使社交按钮与 location.hash 一起使用

【英文标题】：How to make social buttons work with location.hash

【发布时间】：2011-12-23 15:31:50

【问题描述】：

我在 jQuery (http://creotiv.in.ua/examples/photowall/ - 略为 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'));

【问题讨论】：

警告 - 有品位的网站，但有一些鲣鸟。

您是如何创建社交媒体按钮的？代码生成服务器端还是客户端？可以发一下代码吗？

这是我工作的一部分，因为我是摄影师）

在描述中添加了社交代码。 html 代码是每个按钮的标准代码。主要问题是我可以在每张照片更改时重新创建社交按钮，但这对客户来说很难（所以这不是答案）

此外，即使使用 window.history.push()，此按钮也不起作用；这不仅会更改所有 url 的哈希部分。

【参考方案1】：

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

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

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

但是还没有爬虫或网站支持它。

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

【讨论】：

我使用哈希在 jquery 库中导航。例如 photo1 - example.com/#p=1, photo2 - example.com/#p=2 这不是为爬虫提供的，而是为用户提供的，因此他们可以将 url 保存到他们喜欢的全屏图像中。另外，他们可以共享此图像的 url，我添加了社交按钮。但问题是他们不使用 url 的哈希部分，或者在加载时只使用一次。

啊哈。抱歉 :( 我在想 Facebook 分享（点击分享后）屏幕会给你不正确的 URL 和照片预览，因为它不读取哈希值。

Facebook 和 google 共享确实给出了不正确的 url，因为当我与 hash 共享 url 时，它会从中删除 hash 并只保存主要部分和搜索部分

【参考方案2】：

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

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

听起来更好？ :)

【讨论】：

并非如此（如果他们在加载时构建 url - 这是错误，因为 url 可以更改。许多脚本和所有 Flash 页面都使用哈希部分进行导航。

我认为没有正常的方法可以做到这一点。这真的很糟糕。

请将您的反馈提交给相应的 API 作者，他们可能会在未来的版本中修复它

【参考方案3】：

仅找到一个解决此问题的方法。在 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"  show_faces="false"></fb:like>
</div>

但是G+按钮仍然存在bug，因为它使用正确的url进行分享，而不是用于计数