可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

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.

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.

回答1:

Here is what I did.

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>

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>

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>

回答2:

I want to share a different solution i made for my Rails Application that i hope can help others to develop the same thing in their framework.

I've build my application front-end in Angular - one-page app - so it can change to different content with each of its own share button with different image, description, and title without reloading.

But because of this i had the same trouble with the share button data as well.

The solution i found was to look for the request headers and check if they are coming from Facebook. If this is true, then render a different view only with a head tag with the corresponding content meta data Facebook reads.

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

Then i set the variables

  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

And then i render the variables in the view:

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

So now i can use a link with the work id for @current_work in the facebook.com/sharer.php URL, and Facebook will be triggered into 'thinking' it has its own page with its own meta-data.

Mine was (in 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>

Hope it helps someone - it worked for me.

回答3:

It is fairly easy to do - you just associate to each of the buttons the URL of the post page instead the URL of the landing page.

The implementation should be similar to the following (of course you should loop through your posts instead):

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