如何为特定网址而不是当前网页添加社交分享链接（FB赞，Google+）

Question

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

任何建议都将不胜感激。

Answer 1

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

+1按钮

根据+1 button docs中的此代码段，您可以使用页面标题中的href属性或rel=canonical链接元素覆盖定位当前页面的默认行为

  

+ 1的网址由以下三种内容之一决定：

     

  

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

  

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

  
3. document.location.href提供的网址
  

还有一个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" />

Answer 2

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

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

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

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

encodeURIComponent(varURL)

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

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