如何为特定 URL 而不是当前页面添加社交分享链接（FB Like、Google+）答案

【问题标题】：How to add social sharing links (FB Like, Google+) for a specific URL and not the current page如何为特定 URL 而不是当前页面添加社交分享链接（FB Like、Google+）
【发布时间】：2012-04-20 00:17:22
【问题描述】：

在我的网站主页上，我有一个文章预告列表。我想在预告片中添加社交分享链接。然而，我的所有尝试都导致社交链接为用户所在的当前页面生成帖子，而不是预告片链接到的实际页面。

任何建议将不胜感激。

【问题讨论】：

标签： facebook google-plus social sharing

【解决方案1】：

Facebook Like 按钮和 Google +1 按钮都支持定位其他页面，但技术略有不同。

+1 按钮

基于来自+1 button docs 的这个sn-p，您可以使用页面标题中的href 属性或rel=canonical 链接元素覆盖定位当前页面的默认行为。

+1 的 URL 由以下三项之一决定：

按钮的href 属性。例如：<g:plusone href="http://example.com"></g:plusone> 将定位到 http://example.com。

页面的<link rel="canonical" ... />标签如果没有提供+1按钮的href属性，谷歌将使用页面的规范网址。有关为页面定义规范 URL 的更多信息，见this help article。

document.location.href 提供的 URL

还有一个configuration tool，您可能会觉得有用。

Facebook 赞按钮

基于official documentation，您可以使用href 属性或OpenGraph 标记。

href 属性的作用与 +1 按钮上的作用非常相似。这是一个针对 http://example.com 的点赞按钮。

<div class="fb-like" data-href="http://example.com" 
  data-send="true" data-width="450" data-show-faces="true"></div>

OpenGraph 选项要求您将元元素添加到文档的标题中。这是定位到 http://example.com 的 OpenGraph 元素：

<meta property="og:url" content="http://example.com" />

【讨论】：

非常感谢，您的示例和链接帮助很大。 Fianlly 让所有的东西都一起工作。 matttucker.onedogdevelopment.com

【解决方案2】：

您可以为每个社交媒体创建自定义分享按钮。以下是热门的分享链接。

https://www.facebook.com/sharer.php?u=

https://twitter.com/share?url=

您需要在上面的每个“...url=”后面加上自定义 URL 的编码版本。如果您有几篇文章，您可以手动执行此操作，但如果您有很多，您可以使用：

encodeURIComponent(varURL)

然后通过抓取文章的 src 来生成 varURL，它可能类似于：

varURL = $('.articleDiv').children().attr('src');

【讨论】：