I have a web site where there are two sections of content that should be shareable on Facebook.
With this code I can pull some content into the share dialogue
FB.ui({
method: 'share',
href: 'http://sampledomain.com/my_test',
quote: score,
...
The image that is getting pulled into the dialog is the one I set in a meta tag in the head, like
<meta property="og:image" content="http://sampledomain.com/sampleimage.png" />
Problem is that I have 2 different share setups. This images ends up in both.
Is there a way to have 2 different images (or more) and make them populare depending on what button I have clicked to share?
Thanks for any hints in advance
Use the Feed Dialog instead and set the picture on your own: https://developers.facebook.com/docs/sharing/reference/feed-dialog
Related
I have generated the following url to share the page into facebook,
https://www.facebook.com/dialog/feed?app_id=195106440518444&link=https%3A%2F%2Fwww.capella.edu%2Fcapella-experience%2Fflexpath%2F&picture=https%3A%2F%2Fi.pinimg.com%2Foriginals%2Fdd%2F56%2F37%2Fdd56376f6bb3f69130ec3216a13ec99c.jpg&name=Capella+FlexPath&caption=FlexPath%3A+Your+degree.+Your+pace.&description=With+FlexPath%2C+you+can+still+build+the+career-advancing+skills+and+knowledge+you+need%2C+but+with+a+class+schedule+entirely+controlled+by+you.&redirect_uri=https%3A%2F%2Fwww.capella.edu%2Fcapella-experience%2Fflexpath%2Fflexpath-trial-course%2F&ext=1519158959&hash=AeY6NpBp29iik5NI
While hit on the above link, I couldn't see the picture. And I know the picture attribute is deprecated. Then I have tried to use the other way,
I can achieve the same thing with the help of meta tag,
<meta property="og:image" content="https://static.xx.fbcdn.net/rsrc.php/v3/ye/r/lWB96Z8sFtt.png" />
If I have include this meta tag in my page the image will display.
But I would like to display the picture dynamic also same page I would like to use different image on different shares.
Please provide suggestions If you have a idea.
I've seen it several times on my facebook timeline where the image of a shared link is not in the post itself. Example:
https://www.facebook.com/BarakaBits/posts/1065758210116791 - Image has text on it.
screenshot
Here's the post itself: http://www.barakabits.com/2015/01/beauty-moroccos-diversity-captured-stunning-photo-series
Is this a hidden image? I'm using a wordpress blog, how can I do this? Do I need a special plugin?
Thank you in advance!
Wil
I don't know exactly what this site is doing, but you can suggest that Facebook use a specific image (not necessarily one found on the page) by using the og:image Open Graph tag. For example, something like this would go in the <head> portion of your site:
<meta property="og:image" content="http://www.barakabits.com/wp-content/uploads/2015/01/Moroccos-faces-featured-6.jpg">
As you can see from the site you referenced, you can have multiple og:image tags, and the user will be able to choose which one is displayed in the post.
Here's Facebook's guide to Open Graph tags: https://developers.facebook.com/docs/sharing/best-practices
I have a share button on my site (I use AddThis tool)
and Open Graph meta tags with article as a type:
meta property="fb:app_id" content="No"
meta property="og:image" content="LogoUrl"
meta property="og:image:type" content="image/jpg"
meta property="og:image:width" content="200"
meta property="og:image:height" content="500"
meta property="og:url" content="LogoUrl"
meta property="og:title" content="title"
meta property="og:type" content="article"
My url looks like that: [mySite]/9095210/1811, so for every different url, I insert different thumbnail, title and description.
My images are from an absolute url.
The problem: I see the details in facebook share preview window, only after the second time I click on the share button. On the first time the facebook share window appears, but without any details. If I continue and share the link in the first time (as in the times after) I see all the details in my facebook. So, the problem in only in the facebook share preview window.
Anyone meet this problem already, and maybe can help?
I had the same problem, and the solution was the next:
You need to create an application in the facebook developer area: https://developers.facebook.com/apps
And need to put the application id to the the fb_init just like this:
js.src = "//connect.facebook.net/hu_HU/all.js#xfbml=1&appId=YOUR_APP_ID";
After providing the correct appliaction id, my problem has been solved.
A similar issue is explained in the "facebook for developers" in sharing , best practices
Pre-caching images.
When content is shared for the first time, the Facebook crawler will scrape and cache the metadata from the URL shared. The crawler has to see an image at least once before it can be rendered. This means that the first person who shares a piece of content won't see a rendered image.
There are two ways to avoid this and have images render on the first Like or Share action:
Pre-cache the image with the Sharing Debugger
Run the URL through the URL debugger to pre-fetch metadata for the page. You should also do this if you update the image for a piece of content.
Use og:image:width and og:image:height Open Graph tags
Using these tags will specify the image dimensions to the crawler so that it can render the image immediately without having to asynchronously download and process it.
The third way, which is the way we do it, is to put in the link, and facebook responds with "fetching a preview" , close it and re-post. This works very well.
I hope that I understood your problem correctly and that this helps you.
One of the problems I face while sharing a link of my blogger post on facebook or linkedin is that the thumbnail shared is my picture (which is the only picture on the page). I would prefer no thumbnail being shared.I tried using
<meta property="og:image" content=""
I.e the content is kept as blank, yet it shows a thumbnail. How do i set it to no picture?
You can't. Facebook/Linkedin will crawl your site and decide on it's own what images to offer the user. The og:image meta tag is just a suggestion and not a directive.
The only way to share without image is for the user to remove it.
Update: there is another way. You could detect (on the server) FB/LinkedIns crawler and serve them HTML that does not contain any images. That way they wouldn't have anything to display (just text). I don't know if that's possible on blogger. And if you go down this path, check FB/LinkedIn's TOS if this is allowed (doing this with google, for instance, will get you banned).
I have a like button that works and that takes the image I have specified through the following parameter and attaches to a user liking the post on there feed.
<meta property="og:image" content="http://www.mysite.org/images/logo_50x50.gif" />
I basically want to use this image only for my users when they like an article, but when posting from a specific article "on my facebook site"..I want to be able to still select the images pulled up from that link. That doesn't happen. All I get right now is what I specified in my og:image parameter.
How would I achieve this?
You can't, you just told Facebook which image to use - it's supported to have multiple og:image tags but i'm not sure if which image to display is deterministic, random, or uses a picker like the system used when you don't specify an image