This is a question about the new Facebook share dialog. Not the feed dialog or the sharer.php url.
From my research it looks like Facebook now forces you to use OG tags to share description, title, image etc in a share dialog. Which would be fine if I didn't need to have multiple shares on 1 page all sharing different information. The Facebook documentation hasn't proved very useful.
For example, I have a product list view, with say 10 products. Next to each is a share option that would ideally share the image of the product, a short description and its title.
Is there anyone out there that has done this that can help?
For reference this is what I am talking about https://developers.facebook.com/docs/sharing/reference/share-dialog
I achieved this by using normal share functionality with Facebook, but by adding OG tags to the page that was being shared.
I had OG tags on the page with the share buttons, in this example my product listings page. However I added OG tags to each of the product pages. I configured the share button to share this individual product page and not the list view. Facebook then picked up on the individual product page OG tags.
Related
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.
Some Background Info
As of Mar/Feb 2014, the Facebook sharer.php way of sharing content no longer accepts custom parameters. See response from a Facebook engineer.
It used to allow multiple parameters in this form:
http://www.facebook.com/sharer.php?s=100
&p[url]={url}
&p[images][0]={img}
&p[title]={title}
&p[summary]={desc}
So you could override the title, image and description that facebook would scrape from the page, but it seems these are now ignored.
Instead, Facebook now favours the opengraph tags on the page.
So why is this a problem?
This is my scenario: I have a gallery page with multitple images. I have a lightbox that loads an image when clicked, and when the lightbox is shown, I also show share icons for all the major social networks, including facebook.
The facebook sharer url is built up using the above format, so I pass in the specific image together with the image caption. These values are now ignored.
Feed Dialog To The Rescue?
The Feed dialog method of sharing is now the preferred method, and it supports passing in custom images and captions. It works perfectly in my above gallery scenario. But it has a limitation: it does not allow you to share the content on a page you manage like the sharer.php does:
So my question is...
How can I get the Feed Dialog to work like the sharer.php and give the end-user the option to share to a group, friend's timeline or a page he/she manages?
But it has a limitation: it does not allow you to share the content on a page you manage like the sharer.php does
It incorrect statement. You can post anywhere using the Feed Dialog! You can use the to parameter and give it the concerned id where you want to share the feed.
For example
PS Facebook has introduces Graph API v2 today, and introduced new Share Dialogs over Feed Dialogs. I'm not share if that's to your significance but you can have a look.
This is my first attempt with social share buttons on a classic HTML website (not a CMS).
I understand that social meta tags are now the way to go as you have more control on what you are sharing (you can have more control on the title, the picture, the description, the content type etc..).
What I don't get is how to share a specific article only when you have ten articles displayed on the same page.
All the tutorials I read about sharing buttons are dedicated to a whole web page but I would like to share a specific section of the page per button, not the whole page (one page = 10 articles = 10 share buttons).
How would I achieve that?
Thank you.
(Bonus question: are social meta tags shared by FB, twitter and linkedin or are they only dedicated to FB?)
I don't know if you are still struggling with this, but I've just been thinking about a similar-but-different problem, with a one-page site where the content is swapped out dynamically so that it is not possible to change the og: tags in the header.
The solution requires generating individual pages for each specific article that have their own with dedicated og: tags. Then in your page which lists 10 articles, each one has a share button where the link points to the specific article page, e.g. <a href="https://www.facebook.com/sharer/sharer.php?u=http://yoursite.com/article1.html">.
When some clicks the share button, facebook will crawl the target url for og: tags, not the page you are currently on.
In your case the solution is pretty straightforward, as you presumably have individual pages for the articles already. Mine is slightly trickier because I have to generate extra pages which won't be navigated to from my site but exist for facebook to crawl (and to display the right content when people arrive via the social shares).
I have a site developed in wordpress. There is a product category and there are posts assigned to it, now when a product is clicked, a fancybox opens up. I am trying to have facebook like for the products inside the fancybox using addthis. Now the problem is, when a product is liked a random image is shown instead of the product image. After much research found that I need to set up the facebook meta on the fly, but I am unable to figure out a way to achieve this task. As the page is not reloaded how can I set up the meta tags having the respective images for the products?
The site url is http://havmor.com/products/
Regards,
Joel James
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.