facebook - 一个页面中的多个 Facebook、Twitter 共享按钮，带有自定义图像和标题

Question

我正在创建一个博客，默认情况下登录页面将显示 5 个最新帖子，每个帖子上都有一个 Facebook 和 Twitter 分享按钮。

我需要每个共享按钮都附有默认标题、描述和图像，我正在使用开放图来附加数据。

问题是如何为每个共享按钮包含多个打开的图形数据。我听说有一种使用 iframe 的方法，另一种方法是在共享 url 中传递数据。

Answer 1

这是我做的。

此代码适用于 Twitter。在 HEAD html 部分添加一次:

<script>window.twttr = (function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0],
    t = window.twttr || {};
  if (d.getElementById(id)) return t;
  js = d.createElement(s);
  js.id = id;
  js.src = "https://platform.twitter.com/widgets.js";
  fjs.parentNode.insertBefore(js, fjs);

  t._e = [];
  t.ready = function(f) {
    t._e.push(f);
  };

  return t;
}(document, "script", "twitter-wjs"));</script>

此代码适用于 Facebook。在 BODY html 部分的顶部添加一次。

<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>

主页列表的 HTML，每个项目都有自己的 Twitter 和 FB 按钮。每个引用特定的帖子页面。

<ul>
  <li>
    <h3>Post #1</h3>
    <div class="fb-share-button" data-href="https://example.com/post/1" 
         data-layout="button"></div>  
    <a href="https://twitter.com/share" class="twitter-share-button" 
       data-url="https://example.com/post/1">Tweet</a>
  </li>
  <li>
    <h3>Post #2</h3>
    <div class="fb-share-button" data-href="https://example.com/post/2" 
         data-layout="button"></div>  
    <a href="https://twitter.com/share" class="twitter-share-button" 
       data-url="https://example.com/post/2">Tweet</a>
  </li>
</ul>