自定义分享按钮

Question

我正在尝试在我的网站上实现社交媒体共享按钮。 我成功实现了 facebook 分享按钮。

我的代码：

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.3";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

现在我可以看到分享按钮，并且可以分享所需的页面。当我单击按钮时，会出现另一个模式：

现在我希望当用户单击共享按钮时，预定义的消息应该出现在突出显示的区域中。我如何在此处以及 LinkedIn、Twitter 和 Google+ 按钮中实现这一点。

我必须为此使用 Open Graph 协议吗？如果是，那么任何人都可以发布有关此的文章或告诉我如何使用 OG 实现这一目标。

Answer 1

Facebook 上不允许预先填写消息，而且无论如何也不可能。您可能想阅读platform policy。

Answer 2

对于 facebook：open graph 将从该链接获取 og 标签进行描述，以在共享弹出窗口中显示描述。

您可以像这样使用元标记设置标题、描述、缩略图。

<meta property="og:title" content="title" />
<meta property="og:description" content="description" />
<meta property="og:image" content="thumbnail_image" />

对于 twitter：通过此链接查看 data-text。

https://dev.twitter.com/web/tweet-button/parameters