用于在 Facebook、Twitter 等上共享 URL 的锚标记答案

【问题标题】：Anchor Tag for sharing URL on Facebook, Twitter etc用于在 Facebook、Twitter 等上共享 URL 的锚标记
【发布时间】：2016-02-28 10:31:09
【问题描述】：

我正在尝试寻找一种自动更新 URL 以在 Facebook、Twitter 等上共享的方法（JQuery 等）。

例如：

<a href="https://www.facebook.com/sharer/sharer.php?u=http//xxxxxxxxx.co.uk/index.html/" class="button button--icon button--facebook"><img src="../img/facebook.png"></a>

除了我想用某些东西替换“http//xxxxxxxxx.co.uk”，这样如果该页面的 URL 发生更改，它会抓取该 URL 并将其插入到标签中，而无需我更新它手动？

【问题讨论】：

虽然可以在客户端完成，但如果你问我这种事情应该在服务器端完成。我发现在客户端处理每个客户端都相同且完全可预测的东西很奇怪（除非您有相同的站点共享不同的域名，但即使在这种情况下，您也可能有一个“主”域您交流的内容）
那么你将如何使用 PHP 来完成这项工作？
我的第一步是与客户就价格达成协议。然后去做。说真的，我认为你应该阅读How to ask 页面。您的问题实际上不是适合 SO 的格式。您基本上应该首先展示您解决问题的尝试，然后如果您碰巧有一个明确的可重现问题，请回到这里。理想情况下，在我的第一条评论之后，我希望您的第一次试用是服务器端的。最后，我们还是只讨论了几行代码。

标签： javascript jquery facebook twitter anchor

【解决方案1】：

您的意思是要从当前页面的 URL 动态构建此 href 吗？像这样？：

document.getElementById('yourAnchorElement').href =
    'https://www.facebook.com/sharer/sharer.php?u=' +
    encodeURIComponent(window.location.href);

它只是获取当前 URL，对其进行 URL 编码以用作查询字符串参数，将其附加到已知的基本 URL，并将其设置为元素的 href。

您不需要使用document.getElementById()，任何用于识别目标元素的方法都可以。

【讨论】：

这适用于 FB 和 Twitter，但 LinkedIn 不喜欢它？

【解决方案2】：

这是一个用 jQuery 生成分享按钮的小函数。

HTML

<div id="fb"></div>

jQuery

var fblink = "https://www.facebook.com/sharer/sharer.php?u={{link}}";

$(document).ready(function () {
    generateLink('fb','http://www.google.com');
    generateLink('fb','http://www.stackoverflow.com');
});

function generateLink(id,link) {
    $('#' + id).append('<a href="' + fblink.replace('{{link}}',link) + '">Share</a>');
}

JSFiddle

为了在 JSFiddle 中的完整性，我将您的图片替换为“共享”，而无需访问您的图片，但可以根据您的需要进行替换。

【讨论】：

【解决方案3】：

使用jQuery，您可以在document.ready 上执行类似的操作：

这是一个 jsFiddle demo

$(function () {

   var fbShare = 'https://www.facebook.com/sharer/sharer.php?u='
   // grab url of the page:
   var url = window.location;

    // loop through all elements with class 'button--facebook' and update href:
    $('.button--facebook').each(function () {
         $(this).attr('href', fbShare + url);
    });

});

【讨论】：