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