sharing a link on facebook displays the wrong image - facebook

i'm facing a problem with sharing links on facebook which is displaying the wrong image many times and just sometimes it displays the correct image using the code like this
<meta property="og:title" content="webpage title" />
<meta property="og:url" content="http://www.domain.com/webpage_url.php?id=17515278817738945084phb">
<meta property="fb:app_id" content="app id here"/>
<meta property="og:type" content="website" />
<meta property="og:image" content="http://www.domain.com/large/image.jpg" />
and when debugging the page i get this
The 'og:type' property is required, but not present.
this image is 1000*317px and still not showing up. this happens with all the links of my site. I have to go to url debugger and clear the cache so facebook can get the correct image. so how to fix this problem and make facebook display the correct image directly?
[UPDATE]
using the facebook debugger i get this notice
og:image was not defined, could not be downloaded or was not big enough. Please define a
chosen image using the og:image metatag, and use an image that's at least 200x200px and
is accessible from Facebook. Image 'http://www.domain.com/gallery1/01234.jpg' will
be used instead.
But the og:image is set properly and image size is largr than 200*200 and Facebook displays the correct image after clearing the Facebook cache though it keeps displaying this notice

Try pointing to your index file. eg www.yourdomain.com/index.php when using the facebook object debugger. It fixed the og:name error for me.

Related

Facebook Graph API's dialogue doesn't show image preview first time

‎I'm using Graph API JS SDK v2.11 and trying to share a link from my website to my Facebook profile. Now, I'm facing the same problem that Facebook has already mentioned here (Please search Pre-caching images):
I just can't see image in dialogue preview on first click. (Although image is shared successfully in my profile)
On second click, it is rendered fine. I have provided all necessary meta tags including og:image, og:image:width, og:image:height (according to width and heights of my images) but still it's not working!
I just can't understand why it's not working! I read same solutions on other similar questions but nothing is working. Can it be because of different origins (The image link has a sub domain)? Does anybody have any idea about it?
Here's markup for meta tags:
<meta property="og:url" content="https://www.example.com/views/1103/your-facebook-profile-picture-popularity/1522777597_5ac3bdfd8c524">
<meta property="og:type" content="website">
<meta property="og:title" content="Know about your Facebook profile picture popularity">
<meta property="og:description" content="Example has a collection of latest fun apps. Know how much your Facebook friends care about you and find out your profile picture popularity.">
<meta property="og:image" content="https://api.example.com/v1/app/images/img_1522777597_5ac8hdfd8c524.jpg">
<meta property="fb:app_id" content="1848969382006870">
<meta property="og:image:width" content="660">
<meta property="og:image:height" content="560">
Image dimensions are: Width 660px, Height: 560px
Image is visible to public (i.e., has all necessary permissions to others)
PS: I can pre-cache the image with the Facebook's Sharing Debugger, but the images are generated dynamically, so it's not possible to do it manually.

Custom image for facebook link sharer

Using graph API, I can set a custom image to be displayed when sharing link from my app. But, when a user shares a link of my website manually, a random image of my website comes in rather than my logo. So, is there a meta tag or something using which I can set a custom image as the image to be displayed in the link description box of facebook? Thanks in advance...
What you want to add are the Open Graph tags so that Facebook can parse your website more easily than its default parsing. The <meta> tags required are
<meta property="og:title" content="Page's Title" />
<meta property="og:type" content="article" />
<meta property="og:url" content="http://yourwebsite/article" />
<meta property="og:image" content="http://yourwebsite/images/displayImage.jpg" />
Thank you Anvesh. I applied your suggestion, but in my case it is not working, as it should.
If I post my link page to the wall, it's ok, the image is showing. But if I post via url share/sharer.php, image is hidden, except on some web image host like imagilive.com (weird).
But, anyway, after posting the page url in the facebook debugger, all I did which failed before, is done with success.
I can handle the issue this way, but I have to do it with every page. Just imagine you have a photo gallery with each image shareable.
I need a better solution or a fix.

The image to show when a web page is shared in facebook

I've a web page and I want to share it in facebook but the image shown is not ok.
In the HTML code of the web I have:
<link href="http://www.example.com/img/logo2.png" rel="image_src" />
In the options to select the image, there are other images, but not logo2.png
I've tried to delete facebook cache with facebook debugger, but the result is the same.
Edit:
If I add ?v=1 to the end the URL when I share it, the logo option is shown. It means that facebook debugger is not deleting the cache.
Also, I want that the logo image be the first option.
Can you help me?
Solved:
<!-- facebook tags -->
<meta property="og:image" content="http://www.example.com/img/logo.png"/>
<meta property="og:url" content="http://example.com">
<meta property="og:title" content="Portfolio | web">
<meta property="og:description" content="Portfolio">
I think that you may be using the wrong tag. I haven't done this in a while, but I believe that it should be a <meta tag with a property="og:image" and then content set to your image. The following (really old) question addresses this issue/conforms to what I remember: How does Facebook Sharer select Images and other metadata when sharing my URL?
Let me know if it works :)

Facebook Thumbnail won't load

I have searched through a number of similar posts and most seem to be asking how to change their thumbnail...I'm not even getting as far as that.
I have the following meta information in my :
<meta property="og:title" content="MyWebsite"/>
<meta property="og:type" content="company"/>
<meta property="og:url" content="http://www.myWebsite.com/"/>
<meta property="og:image" content="http://www.myWebsite.com/images/logo.jpg"/>
<meta property="og:description"
content="MyWebsite is brilliant."/>
When I attempt to paste http://www.MyWebsite.com into a Facebook status update, it is correctly displaying the description, but it is not pulling the image.
I have used the Facebook Debugger/Linter and it is pulling everything correctly...so where is the disjoint? I have tried different browsers and still no thumbnail.
One thing I have noticed is that if I validate my website with W3C it is saying that "property" is not allowed as an attribute. Is this normal?
Are there dimensions for the logo? Mine is roughly 574px by 187px.
Use the debug tool as the administrator of your application (set the app_id OG tags to help with this). If you are the app administrator, the debug tool should reset the cache and pickup the new image when sharing on Facebook.

Like button image not showing in timeline

I used a Facebook like button on my website, but when I click the "like" button I don't see the image in my timeline. Everything else works fine.
I use this code:
<meta property="og:image" content="/images/fblogo.jpg"/>
The two other tags are working fine.
<meta property="og:title" content="..."/>
<meta property="og:site_name" content="..."/>
What am I doing wrong?
You must refer to your image as a fully qualified path (http://www.yourdomain.com/images/fblogo.jpg)
be sure you have prefix="og: http://ogp.me/ns#" in your html tag
also, to test - make sure you're using the facebook lint tool, so you defeat the caches of facebook. It also tells you when you have invalid tags and incorrect values for tags.
In got the same error, and solver it by adding property="og:description" to the meta description tag,
this solved my problem but I don´t know if Google likes it....