一个页面中的多个 Facebook、Twitter 共享按钮，带有自定义图像和标题
Multiple Facebook, Twitter share buttons in one page with custom image and title
我正在创建一个博客，默认情况下登录页面会显示 5 个最新的 post，每个 post 上都会有一个 Facebook 和 Twitter 分享按钮。
我需要每个分享按钮都有一个默认的标题、描述和图片，我正在使用开放图表来附加数据。
问题是如何为每个共享按钮包含多个打开的图形数据。我听说有一种使用 iframe 的方法，另一种方法是在共享 url.
中传递数据
这很容易做到 - 您只需将每个按钮关联到 post 页面的 URL 而不是登录页面的 URL。
实施应类似于以下内容（当然您应该循环遍历 post）：
<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://whosebug.com" data-text="Check out Whosebug!" 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://whosebug.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>
这是我所做的。
此代码适用于 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 按钮。每个引用特定的 post 页面。
<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 中构建了我的应用程序 front-end - one-page 应用程序 - 因此它可以更改为不同的内容，每个共享按钮都有不同的图像、描述、和标题无需重新加载。
但正因为如此，我在共享按钮数据方面也遇到了同样的问题。
我找到的解决方案是查找 请求 headers 并检查它们是否来自 Facebook。如果这是真的，那么渲染一个不同的视图 仅使用 head 标签 以及 Facebook 读取的相应内容元数据。
每个内容 meta-data 的控制器和自定义视图：
#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>
每个内容的动态 link
所以现在我可以在 facebook.com/sharer.php URL 中使用 link 和 @current_work 的工作 ID，Facebook 将被触发到 'thinking'它有自己的页面和自己的 meta-data.
我的是（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>
希望它对某人有所帮助 - 它对我有用。
我正在创建一个博客，默认情况下登录页面会显示 5 个最新的 post，每个 post 上都会有一个 Facebook 和 Twitter 分享按钮。
我需要每个分享按钮都有一个默认的标题、描述和图片，我正在使用开放图表来附加数据。
问题是如何为每个共享按钮包含多个打开的图形数据。我听说有一种使用 iframe 的方法，另一种方法是在共享 url.
中传递数据这很容易做到 - 您只需将每个按钮关联到 post 页面的 URL 而不是登录页面的 URL。
实施应类似于以下内容（当然您应该循环遍历 post）：
<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://whosebug.com" data-text="Check out Whosebug!" 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://whosebug.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>
这是我所做的。
此代码适用于 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 按钮。每个引用特定的 post 页面。
<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 中构建了我的应用程序 front-end - one-page 应用程序 - 因此它可以更改为不同的内容，每个共享按钮都有不同的图像、描述、和标题无需重新加载。
但正因为如此，我在共享按钮数据方面也遇到了同样的问题。
我找到的解决方案是查找 请求 headers 并检查它们是否来自 Facebook。如果这是真的，那么渲染一个不同的视图 仅使用 head 标签 以及 Facebook 读取的相应内容元数据。
每个内容 meta-data 的控制器和自定义视图：
#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>
每个内容的动态 link
所以现在我可以在 facebook.com/sharer.php URL 中使用 link 和 @current_work 的工作 ID，Facebook 将被触发到 'thinking'它有自己的页面和自己的 meta-data.
我的是（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>
希望它对某人有所帮助 - 它对我有用。