Question

我正在创建一个博客，其中着陆页默认会显示5个最新帖子，每个帖子上都会有一个Facebook和Twitter分享按钮。

我需要每个共享按钮都有一个默认的标题，描述和图像附加到它们，我使用开放图形来附加数据。

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

Answer 1

这就是我所做的。

此代码适用于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>

Answer 2

我想与我的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网址中facebook.com/sharer.php的工作ID的链接，Facebook将被触发进入＆＃39;思考＆＃39;它有自己的页面，有自己的元数据。

我是（在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>

希望它可以帮助某人 - 它对我有用。

Answer 3

这很容易做到 - 您只需将每个按钮与帖子页面的网址相关联，而不是与着陆页的网址相关联。

实现应该类似于以下内容（当然你应该遍历你的帖子）：

<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共享按钮在一个页面中具有自定义图像和标题

3 个答案:

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

每个内容的动态链接