Menu
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.
551
To generate a Facebook Share Button, visit https://developers.facebook.com/docs/plugins/share-button and specify the URL you want people to share as well as the width. Then generate the code, and paste it into your site where you want the button to appear.
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>
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.
#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>
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.
29
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
