在一个页面中使用多个自定义图像和标题的Facebook、Twitter分享按钮

Question

在一个页面中使用多个自定义图像和标题的Facebook、Twitter分享按钮

facebooktwittersharefacebook-opengraph

9

我正在创建一个博客，其首页默认显示5篇最新文章，并且每篇文章上都会有Facebook和Twitter分享按钮。

我需要每个分享按钮都有一个默认的标题、描述和图片，并且我使用Open Graph来附加数据。

问题在于如何为每个分享按钮包含多个Open Graph数据。我听说有一种方法是使用iframe，另一种方法是通过分享URL传递数据。

- Vincent1989

3个回答

1

我想分享一种不同的解决方案，用于我的Rails应用程序，希望能帮助其他人在他们的框架中开发相同的东西。

我已经使用Angular构建了我的应用程序前端 - 单页应用程序 - 因此它可以更改为不同的内容，并具有其自己的共享按钮，每个按钮都具有不同的图像、描述和标题，而无需重新加载。

但是，由于这一点，我也遇到了与共享按钮数据相同的问题。

我找到的解决方案是查找请求标头，并检查它们是否来自Facebook。如果是真的，则仅使用一个带有相应内容元数据的头标签呈现不同的视图，Facebook会读取该元数据。

控制器和自定义视图，每个内容都包含元数据：

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

每个内容的动态链接

现在我可以使用带有@current_work工作ID的链接，放在facebook.com/sharer.php URL中，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>

希望能帮助到某些人——这对我有效。

- Peter Højlund Palluth

-1

这很容易实现 - 你只需将每个按钮关联到帖子页面的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>

- Grzegorz Pawlik

1

您的解决方案有Facebook的“喜欢”按钮，但我们希望有多个Facebook分享按钮，每个按钮都特定于在单个页面上发布的内容。 - 99problems

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- FeFiFoFu · Accepted Answer

以下是我所做的。

这段代码是用于 Twitter 的。在 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>