一页中有多个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屋!