一页中有多个Facebook，Twitter共享按钮，带有自定义图像和标题 [英] Multiple Facebook, Twitter share buttons in one page with custom image and title

问题描述

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

I'm creating a blog where the landing page will show 5 latest posts by default and each post will have a Facebook and Twitter share buttons on them.

我需要每个共享按钮具有默认的标题，描述和图像，并且我正在使用开放图来附加数据.

I will need each of the share button to have a default title, description and image attach to them and I'm using open graph to append the data.

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

The problem is how do I include multiple open graph data for each of the share button. I heard there is a way using iframe and another way is to pass the data in the share url.

推荐答案

这就是我所做的.

此代码用于Twitter.在HEAD的html部分中添加一次:

This code is for Twitter. Added once in HEAD html section:

<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部分的顶部添加了一次.

This code is for Facebook. Added once at the top of the BODY html section.

<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按钮.每个引用一个特定的帖子页面.

The HTML for the homepage list with each item having it's own Twitter and FB buttons. Each referencing a the specific post page.

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

这篇关于一页中有多个Facebook，Twitter共享按钮，带有自定义图像和标题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！