多个Facebook，Twitter共享按钮在一个页面中具有自定义图像和标题
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了多个Facebook，Twitter共享按钮在一个页面中具有自定义图像和标题相关的知识，希望对你有一定的参考价值。
我正在创建一个博客，其中着陆页默认显示5个最新帖子，每个帖子上都会有Facebook和Twitter分享按钮。
我需要每个共享按钮都有一个默认的标题，描述和图像附加到他们，我正在使用开放图形来附加数据。
问题是如何为每个共享按钮包含多个打开的图形数据。我听说有一种方法使用iframe，另一种方法是传递共享URL中的数据。
这就是我做的。
此代码适用于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>
我希望与我的Rails应用程序共享一个不同的解决方案，我希望可以帮助其他人在他们的框架中开发相同的东西。
我在Angular中构建我的应用程序前端 - 一页应用程序 - 因此它可以使用不同的图像，描述和标题的每个共享按钮更改为不同的内容，而无需重新加载。
但正因为如此，我也遇到了分享按钮数据的同样问题。
我找到的解决方案是查找请求标头并检查它们是否来自Facebook。如果这是真的，则仅使用带有Facebook读取的相应内容元数据的头标记呈现不同的视图。
Controller and custom view with meta-data for each content:
#works_controller.rb
def index
...
agent = request.headers["HTTP_USER_AGENT"].downcase
if agent.include?("facebook")
render_facebook_share_info @current_work, params
return
end
...
end
然后我设置变量
def render_facebook_share_info work, params_passed
@currentUrl = URL + "/themes/#{params_passed[:theme_id]}/works/#{params_passed[:work_id]}"
@currentImage = work.share_image.present? ? work.share_image.url : work.cover_image.url
@currentTitle = work.title
description = work.share_description.present? ? work.share_description : ""
@currentDescription = description
render 'shared_facebook_data', layout: false
end
然后我在视图中渲染变量：
<!-- shared_facebook_data.html.erb -->
<head>
<meta property="og:url" content="<%=@currentUrl %>" />
<meta property="og:type" content="article" />
<meta property="og:site_name" content="Papercut Odyssey" />
<meta property="og:title" content="<%= @currentTitle %>" />
<meta property="og:description" content="<%= @currentDescription %>" />
<meta property="og:image" content="<%= @currentImage %>" />
</head>
Dynamic link for each content
所以现在我可以在@current_work URL中使用facebook.com/sharer.php工作ID的链接，Facebook将被触发“思考”它有自己的页面和自己的元数据。
我是（在Angular）：
<a [attr.href]="'https://www.facebook.com/sharer.php?u=my_domain.com/' + theme.id + '/works/' + current_work.id" target="_blank">Share on Facebook</a>
希望它可以帮助某人 - 它对我有用。
这很容易 - 您只需将每个按钮与帖子页面的URL相关联，而不是与着陆页的URL相关联。
实现应类似于以下内容（当然，您应该遍历您的帖子）：
<ul>
<li>
<h3>Post #1</h3>
<div class="fb-like" data-href="https://google.com" data-text="Check out Google!" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div>
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://google.com">Tweet</a>
</li>
<li>
<h3>Post #2</h3>
<div class="fb-like" data-href="https://facebook.com" data-text="Check out Facebook!" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div>
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://facebook.com">Tweet</a>
</li>
<li>
<h3>Post #3</h3>
<div class="fb-like" data-href="https://stackoverflow.com" data-text="Check out Stackoverflow!" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div>
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://stackoverflow.com">Tweet</a>
</li>
</ul>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
<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_GB/sdk.js#xfbml=1&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
以上是关于多个Facebook，Twitter共享按钮在一个页面中具有自定义图像和标题的主要内容，如果未能解决你的问题，请参考以下文章
Facebook/Twitter/+1 按钮的 IE CSS 悬停问题
与 Instagram、Facebook 共享相机胶卷中的图像
通过 jQuery 计算 Facebook、Twitter、Google+ 份额的不同方法？
无法使用开放图形元标记从我的 React next.js 网站共享 Facebook/Twitter 内容