代码之家 › 专栏 › 技术社区 › Gijo Varghese

创建带有自定义url、标题和图像的Facebook共享按钮

share-button facebook-graph-api facebook

11

Gijo Varghese · 技术社区 · 11 年前

Facebook过去允许在Facebook共享按钮中自定义参数,但现在不起作用了。我需要的是创建一个Facebook共享按钮,该按钮将具有自定义标题、url、图像、描述等。这不能使用元标签完成,因为在一个页面上有多个共享按钮。每一个都应该有不同的标题、URL、图片等。我听说可以使用Facebook应用程序来完成,使用应用程序id或其他方式。

我试过了,但没用:

<a title="send to Facebook" 
  href="http://www.facebook.com/sharer.php?s=100&p[title]=YOUR_TITLE&p[summary]=YOUR_SUMMARY&p[url]=YOUR_URL&p[images][0]=YOUR_IMAGE_TO_SHARE_OBJECT"
  target="_blank">

4 回复 | 直到 9 年前

1

6

CodeDreamer68 9 年前

不幸的是,我们似乎无法在一个页面中发布单个主题或文章的共享。Facebook似乎只是希望我们共享整个页面(仅基于url)。

还有他们的新 share dialog ,但即使他们声称它可以完成旧的sharer.php所能做的一切,但这似乎不是真的。

这里是 Facebooks 'best practices' 用于共享。

2

5

Jasom Dotnet 8 年前

这是2017年的代码:

<i class="fa fa-facebook-square"></i>
<a href="#" onclick="window.open('https://www.facebook.com/sharer/sharer.php?u='+encodeURIComponent(location.href),'facebook-share-dialog','width=626,height=436');return false;">Share on Facebook</a>

Facebook现在从OG元标记中获取所有数据。

注意:此代码假设您在站点代码中有OG元标记。

Source

3

5

kittu 8 年前

使用facebook提要对话框而不是共享对话框。

例子:

https://www.facebook.com/dialog/feed?app_id=1389892087910588 &redirect_uri=https://scotch.io &link=https://scotch.io &picture=http://placekitten.com/500/500 &caption=This%20is%20the%20caption &description=This%20is%20the%20description

4

2

Magic-Mouse 8 年前

很粗糙,但它对我们的系统有效:

<div class="block-share spread-share p-t-md">
  <a href="http://www.facebook.com/share.php?u=http://www.voteleavetakecontrol.org/our_affiliates&title=Farmers+for+Britain+have+made+the+sensible+decision+to+Vote+Leave.+Be+part+of+a+better+future+for+us+all.+Please+share!" 
     target="_blank">
    <button class="btn btn-social btn-facebook">
      <span class="icon icon-facebook">
      </span> 
      Share on Facebook
    </button>
  </a>

  <a href="https://www.facebook.com/FarmersForBritain" target="_blank">
    <button class="btn btn-social btn-facebook">
      <span class="icon icon-facebook">
      </span>
      Like  on Facebook
    </button>
  </a>
</div>