I know that the 'send' button gets the content data from the og meta tags so my initial thought is that it's not possible and you can only share the entire page itself. Ideally I want to be able to send different sections of the page individually, each with their own descriptions.
So wondering if there is a way to have multiple 'send' buttons on a single page but with custom descriptions for each?
You could simulate this by having the buttons point to different URLs, each with separate meta tags, then redirect users that land on any of those URLs back to the 'main' URL - you can identify when it's Facebook crawling for the meta tags because the user agent will be the same each time, and redirect anyone else.
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.
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).
Does anyone know how to give the user the option to choose between multiple images when sharing a page on Facebook?
I've used an url like the one below in the past. The images param would be
p[images][0]=...&p[images][1]=...
etc. However, it seems that this doesn't work anymore. The user sees the arrows to select the next or previous image with but there is only one image to choose from.
Web page
http://occasions.dvangorkum.nl/Land-Rover/Range-Rover-Sport-2.7-/TdV6-HSE-Navigatie-PDC-Climate-Xenon-Luchtvering--1606304/1603/1/11/details.aspx?zoek=&so=gallerij
URL:
https://www.facebook.com/sharer/sharer.php?s=100&p[url]=http%3A%2F%2Foccasions.dvangorkum.nl%2FLand-Rover%2FRange-Rover-Sport-2.7-%2FTdV6-HSE-Navigatie-PDC-Climate-Xenon-Luchtvering--1606304%2F1603%2F1%2F11%2Fdetails.aspx%3Fzoek%3D&p[images][0]=http%3A%2F%2Fimages.autodealers.nl%2F640%2F1606304_1.jpg&p[images][1]=http%3A%2F%2Fimages.autodealers.nl%2F640%2F1606304_2.jpg&p[images][2]=http%3A%2F%2Fimages.autodealers.nl%2F640%2F1606304_3.jpg&p[images][3]=http%3A%2F%2Fimages.autodealers.nl%2F640%2F1606304_4.jpg&p[images][4]=http%3A%2F%2Fimages.autodealers.nl%2F640%2F1606304_5.jpg&p[images][5]=http%3A%2F%2Fimages.autodealers.nl%2F640%2F1606304_6.jpg&p[images][6]=http%3A%2F%2Fimages.autodealers.nl%2F640%2F1606304_7.jpg&p[images][7]=http%3A%2F%2Fimages.autodealers.nl%2F640%2F1606304_8.jpg&p[images][8]=http%3A%2F%2Fimages.autodealers.nl%2F640%2F1606304_9.jpg&p[images][9]=http%3A%2F%2Fimages.autodealers.nl%2F640%2F1606304_10.jpg&p[images][10]=http%3A%2F%2Fimages.autodealers.nl%2F640%2F1606304_11.jpg&p[images][11]=http%3A%2F%2Fimages.autodealers.nl%2F640%2F1606304_12.jpg&p[title]=++++Land-Rover%C2%A0Range+Rover+Sport+2.7+%C2%A0TdV6+HSE+Navigatie+PDC+Climate+Xenon+Luchtvering+&p[summary]=Occasion+te+koop+aangeboden+Land-Rover+Range+Rover+Sport+2.7++TdV6+HSE+Navigatie+PDC+Climate+Xenon+Luchtvering++uit+2007%2C+187618+km%2C+Diesel%2C+SUV%2C+Automaat%2C+Grijs&so=gallerij
However, it seems that this doesn't work anymore.
Yes, the Share dialog does not accept these parameters any more after a recent change, but will now get all its info about the shared link from the Open Graph meta information embedded in the shared document.
So if you want multiple images the user can chose from, you have to put multiple og:image meta tags into your document. (Be aware that Facebook seems to offer no more than three images to chose from any more, so putting more images in there is pointless.)
For documentation on Open Graph meta information, see https://developers.facebook.com/docs/opengraph/using-objects/#creating and http://ogp.me/
I'm creating an "object" via Facebook's Open Graph. Obviously it's assigned a unique URL within my application (e.g. www.myapp.com/something/hash), and I'm injecting the relevant OG meta tags. All fine, and I can then "attach" a "Like" button and Facebook comments.
However those user-created objects are generated from within a Facebook application - which happens to "live" under the same domain (e.g. www.myapp.com/fb) and that object has its own page within the Facebook application (e.g. www.myapp.com/fb/something/hash)
Thus, that same object has effectively two unique URLs. The "external" one is the one I use to identify it, but I also want to have a "Like" button and Facebook comments on that page. It doesn't seem to accept a URL in, say, the fb-like DIV and corresponding og:url meta tag that doesn't match the URl it's housed on.
Is there any way around this - or do I need to do something like a redirect when calling the page from within the Facebook app, or some sort of clever template switching?
Just set the og:url meta tag value for both URLs to the one URL you want to be the “actual” URL of the object.
This is for a wordpress site, but it could be for any. I want a like button at the top of the page to 'like' the whole site. I also want a like button at the end of a post to like that post.
Ok, I get that I can create two iframe buttons, using just the site url and the post url. What i dont get is how to set up the meta tags. eg, the image field would be different (site logo vs. post image)
Furthermore, I can imagine that it would be usefull to have even more like buttons, eg on a page that listed several posts, a like button on each. I realize that too many iframes will slow or stop the browser.
Mostly i just need 2 buttons, with 2 sets of info.
Yes you can add two like buttons.
for site url button set up meta tags in your home page.
for post url set up meta tags in your post page.