Multiple Facebook, Twitter share buttons in one page with custom image and title

后端未结

关注

 3  1226

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

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.

0 讨论(0)

面向向阳花

2021-02-06 07:15

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>

0 讨论(0)

长情又很酷

2021-02-06 07:17

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>

0 讨论(0)