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.
Related
quick question:
one tiny prob i have is when i try to share a page from my site on facebook (for example:http://pent-house.co.il/index.php/sale/52-2013-12-12-13-41-40), i cannot see thumbnails for the gallery. i see only the logo :\
is there any way that i can share the photos throw facebook?
thank you very much and have a damm nice day! XD
i wanted to shar a pic but i dont have enough reputation
You have to set an og:image meta tag like this:
<meta property="og:image" content="THE LINK TO YOUR IMAGE"/>
In the <head> of your document otherwise facebook bot uses (usualy) the biggest images he can fin. On the example page you linked to the biggest one is the logo.
Once you have set the og:image meta tag don't forget to delete facebook's cache by entering your page url on this page so you can see the modifications you make.
More information about thos meta tags and open graph here
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.
I would like to know how I detect a image from a webpage.
I want a code that if I want to share something on facebook the image from the page where I am at that time, automatically detect.
example:
<meta property="og:image" content="http://www.geturl.thedoctorofhouse.com/audi_a3_2.jpg" />
What should I do with the og:image content?
Yes, that looks correct - content should contain the url to the image that you want used.
You can check how the page metadata is interpreted by using the linter tool provided by Facebook
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
hope you can help me...
I want to have a page with facebook metatags, like:
<meta property="og:title" content="TITULO" />
<meta property="og:type" content="website" />
<meta property="og:image" content="http://profile.ak.fbcdn.net/hprofile-ak-snc4/277072_61646342824_993843268_n.jpg" />
<meta property="og:url" content="http://www.clarin.com" />
and the problem is that instead of showing the descriptions, titles and images that I define in the metatags of my page, the facebook like box is generated with the url defined in my og:url. I was reading documentation and it seems that it should be in that way.
But I still want the facebook like box generated only with the metatags of my page, and not with the url defined in og:url.
is it possible? someone has done?
og:url basically tells the FB scraper "ignore anything on this page, and scrape this url instead"
So it's doing exactly what it's supposed to do. If you want the like button to point to a different url, use the href parameter and have it point to a different url.
See https://developers.facebook.com/docs/reference/plugins/like/ for more information.
I think I understand what you are asking. Like #Jeff Sherlock said "og:url basically tells our scraper "ignore anything on this page, and scrape this url instead"..."
So if og:url is anything other than the current page -- Facebook will try to scrape the open graph data from there instead.
If this is a page you are trying to send people to if they click on the 'like object' that is posted to a users wall (who has already liked your page) --
I made a tool for this exact purpose -- as I thought it might be helpful to others:
Facebook/Open Graph Like button Generator
It generates (and stores) the open graph tag(s) so you don't need to put them in your page at all and the 'Redirect URL' tells it where to send all the traffic.
It detects the Facebook bot/scraper too so it won't interfere with anything :)
Good luck
you can put the like button in an iframe. Furthermore, that iframe may or may not need to be filled by setting a src attribute. I would try adding the like button code as innerHTML, and then try a separate file to set the src to.
It would look something like this:
<iframe><place like code here></iframe>
When that doesn't work, place the like code in a separate file, and set the src of the iframe to that file. Let me know if you have quesitons