Multiple share buttons that produce different content, within the same page, using Facebook OpenGraph Meta tags - facebook

I have a "single page" website. Let's call it "mySite.com/index.html".
There are several different places on my page that I would like users to share via Facebook. Each of these items should display a different image and headline text, when shared on the user's Facebook timeline.
Each of these item posts should link Facebook users back to my website, "mySite.com/index.html", when the posts are viewed from a Facebook timeline.
Example:
On my page, I wish to have two different share buttons:
A. ButtonA: This button would create a picture of an elephant on the user's Facebook timeline, with the headline, "A Beautiful Elephant!". This post on the user's timeline should link back to my page, when the post is clicked.
A. ButtonB: This button would create a picture of a tiger on the user's Facebook timeline, with the headline, "A Scary Tiger!". This post on the user's timeline should link back to my page, when the post is clicked.
The Problem:
My understanding is that in order to create Facebook timeline posts which contain attractive headline text and images, I must use Facebook OpenGraph Meta tags, on the same page that is being linked to. It seems impossible to have two different sets of Facebook meta tags on "mySite.com/index.html", one outlining the 'elephant' post, and the other outlining the 'tiger' post.
The only possible solution I can think of is this:
Create a special 'Facebook Meta HTML Page' for each post I want to make. Each 'special page would only contain the meta tags for the post I wish to outline. "mySite.com/elephant_meta.html"
The body of the special page would be blank. This will work, but there is a problem: The resulting Facebook post will link users to "mySite.com/elephant_meta.html", which is just a blank page. I wish them to be directed to "mySite.com/index.html".
Solution: Create a JavaScript redirect in the body of "mySite.com/elephant_meta.html". This redirect will take users to "mySite.com/index.html".
This will work, but it feels incredibly hacky. Is there a better way?

Still finding my way on the open graph stuff as well, but the way I understand it, you can set og:url to the url that you want users to go to when they click on the link in your story on facebook. So each of your meta pages could point back to your main site page using the og:url meta tag.

Related

Why does FB sharer use only the OG meta tag details on the home page?

I have a project, coded on codeigniter, which is basically a collection of posts by different users. While adding the fb share button and clicking on it, The image, title and description content is taken from the header of the home page and not of the page(view) where the share button is placed?
As mentioned here, The issue was that only those users could view the page who are signed in, and therefore even fb wasn't able to scrape the info from there.
EDIT: Whats important here is how FB scrapes the info. Apparantly the link you provide inside data-href if parsed by FB and they capture the og meta tags from the header on that page. However if you restrict those pages to logged in users, FB is also unable to parse the page and thus it reverts to the base URL's meta tags.

How do I add 'Like Page' button to my URL timeline post

I have used opengraph to share my website to facebook. Is there any way I can add a 'Like Page' button to it, so that my associated FB business page gets liked instead of the shared post?
https://developers.facebook.com/docs/sharing/best-practices#tags
“article:publisher - This property links to the publisher of the article. The target of this property must be a Facebook Page. When displayed in the News Feed, Facebook may offer the ability to like the publisher. Note that this tag is only available to media publishers.”
So your og:type of the shared object must be article, and your page that you specify as publisher must be in the appropriate category.
Notice also how it says there that Facebook “may offer” the page like button, meaning there is no guarantee it will show up if Facebook doesn’t think your page is important enough.
That looks like a sponsored post. The add searches what friend liked that page and suggests you to like that page, because your friends liked it.

Like button for Facebook page shows generic Facebook description in News Feed

I want a Like button on my web site that Likes my Facebook profile (rather than my web page), so that when a user clicks it they subscribe to my Facebook posts.
I've created the Like button using the tool at https://developers.facebook.com/docs/reference/plugins/like/
Further down that page there is an FAQ entry:
Can I link the Like button to my Facebook page?
Yes. Simply specify the URL of your Facebook page in the href
parameter of the button.
So, I've edited the href parameter to point to my Facebook page. eg:
https://www.facebook.com/myfacebookid
When a user clicks the Like button it has the desired effect. The user ends up having Liked my Facebook page. This is easily verified by the user going to my Facebook profile and checking that the Like button has changed to Liked.
But. When the user clicks the Like button, and entry appears in their News Feed with a generic Facebook description. ie:
Facebook is a social utility that connects people with friends and
others who work, study and live around them. People use Facebook to
keep up with friends, upload an unlimited number of photos, post links
and videos, and learn more about the people they meet.
I don't want a generic post about Facebook to appear. I want the description to relate to my Facebook account and/or web site.
Normally, I could modify this behavior with the Opengraph og: description tag, but as the page in the href is a Facebook page and not my own, I can't control the Opengraph tags.
I'm pretty sure that this was working okay before I enabled timeline for my account, so maybe this is a timeline bug?
So, how do I add a Like button which a) Likes my Facebook profile rather than one of my own web pages, and b) Posts a description of my Facebook profile rather than give a generic Facbook description?
Are all your fields in the info part of your page filled in, and/or completed? I just tested your theory and it seemed to work as expected, only thing is I know all fields in "info" are filled it. Give that a try.
This may happen if you have filled invalid/incomplete/wrong og tags in past and later changed them. Facebook's cache creates problem sometime.
Try putting all the entries (i.e. all og tags) and then debug them here http://developers.facebook.com/tools/debug. This debugger gives a detailed info about the url with og tags and also clears the cache for you.
This should solve the problem.
You have 3 important fields that used on page opengraph: Name,Description,Profile Image.
They are used when some one post your link on Facebook, or Google or some else web service that handle opengraph.
Actually, the suggested answers currently do not work and there is an open bug / ticket on Facebook for it. Up to now, there's no fix.
The problem is that you can not use simply https://www.facebook.com/myfacebookid. You should copy and paste the exact page URL. If you have a low number of likes it would look something like https://www.facebook.com/pages/[YourPageName]/[Your page Id]/, and this is the URL that you should use at this point.
If it does not work, try also https://www.facebook.com/[YourPageName]/[Your page Id]/.
In short, copy-paste the URL, do not type it manually.

Facebook Share/Like Button -> News Feed

I need a facebook share/like button on my page, that posts my page with picture, title, description etc. into the news feed. I've created one with the Facebook "Like-generator" and bring it succesful on my page, but when I click on "like" my page is not in the news feed, only on my wall.
As a second step I want to activate a form when the user shares the page on facebook. Is it possible to do that? FB.Event.subscribe?
I need a direct share (one-click share) of the page - without click a second time share on: http://www.facebook.com/sharer.php?s=
I found an example of this button I need
http://www.thomashutter.com/index.php/2009/07/facebook-die-10-facebook-seo-tipps-die-jeder-facebook-seitenbetreiber-wissen-sollte/
On this site there is a button called "Empfehlen", when you click on this button, the page will be post on your wall and it will be displayed in the news feed.
Like button clicks will post on the users wall 100% of the time; however, facebook uses an algorithm to determine the relevance of the link and that determines the probability of that post appearing on the users news feed. So in other words, not everything you post on your wall will appear on your news feed. This is new, before, everything wall post appeared on the news feed but facebook is now selling space on the news feed to commercial page wall posts so that limits the space for regular pages
Facebook has rather extensive documentation on how to make like buttons, including a code generator.
First, you have to add a facebook like button on your page. And then you have to set up the open graph meta tags in the <head> of your page. These tags allow you to describe the page with a title, a description and an image which will be displayed in the news feed.
These two steps are described here : http://developers.facebook.com/docs/reference/plugins/like/

Open Graph pages: can I use a stub/forwarding page?

I have a page containing a list of activities. I want multiple FB Like buttons: for the page itself and for each of the individual activities.
In order for the page itself to be Liked, it needs OpenGraph tags. But if the page has the tags, then the Like button, according to the docs, will ignore the url parameter of the Like buttons. From the docs:
When you use Open Graph tags, the Like button posts a link to the og:url instead of the URL in the Like button code.
Possible solution So, my idea is to create small stub pages that will only contain the Open Graph tags and a meta redirect tag to the real activity page.
Has anyone tried this? Or some other solution to the problem?
Your solution is feasible, I have tried it before: creating separate pages that only contain OG meta tags. However, the problem with this is, once a user likes the item, it posts automatically on the user's wall saying "Larry likes a link". When his friends see this, and click on the attached link, they will see a white screen (your og:meta-only pages). but since you said you will have redirect then this is good.
On the side, you had a wrong interpretation about this quote:
When you use Open Graph tags, the Like
button posts a link to the og:url
instead of the URL in the Like button
code.
It doesn't mean "When you use Open Graph tags on the root page". It means when you use Open Graph tags on the pages you were linking to in the like buttons.
Also, what it meant by "posts a link" is posting a link on the user's wall. Liking open graph pages automatically posts to wall now. It didn't say "using the link" on og:url of the current page.