I have developed a facebook app, where I need to display a thumbnail of my website's logo as the facebook status if any users likes my website.
I have added the meta tag in the head of the web page like this:
<meta property="og:image" content="http://mydomain.com/images/admin/bg/PAP.png">
but it is displaying some other image on Facebook. I also check in the facebook debug site which actually showed the logo of the web-site but it is not being updated on Facebook instead some other pic being updated on Facebook.
What is the problem and what may be the solution?
I face same problem on in.affinity.com , but image displays fine on affinity.com.
I tried hosting image on other server , with different url and it worked.
Try this if not working tel me your site , i'll look to it.
Cheers.
Related
I am working on a website for a painter, and I am trying to share a page with an image, a title and description on Facebook.
I have created a Facebook share button on my webpage, and this button (when clicked) correctly opens a facebook sharer dialog that shows
the link to the url,
the image,
the title and,
the descripton
The meta-tags I have placed in my pages header are:
<meta property="og:url" content="http://www.dutchoilpaintings.com/en/works/Italian_Self_Portrait.html">
<meta property="og:type" content="website">
<meta property="og:title" content="Italian Self Portrait, by Els Vink.">
<meta property="og:description" content="Oil on panel, 60 x 90 cmPrivate collection">
<meta property="og:image" content="http://www.dutchoilpaintings.com/library/Italian_Self_Portrait/italian_self_portrait_website.jpg">
The page itself and the image are (as you can see) hosted on a normal http domain. The image resolution is 800x927 pixels.
THE PROBLEM:
Despite the fact that the Facebook sharer dialog shows everyting correctly, on my facebook page only a link to the url is displayed, but no image, no title and no description.
MORE INFORMATION:
When I run the url through the Facebook Sharing debugger it shows correct values for all meta-tags that I mentioned in the top of this question. It also shows the image correctly. I have tried invalidating the Facebook cache several times but to no avail.
I am aware of the fact that the shared image resolution does not completely adhere to Facebook aspect ratio recommendation (1.91:1) but other paintings on the same site seem to come across just fine, and none are painted in 1.91 : 1.
Does anyone know why the shared information is not posted completely? Is it Facebook cache related? If so what can I do about that?
Thanks in advance, and Merry Christmas!
Ad
I have faced this problem later and it was a problem with the page code it self, which i checked by the w3.org then solved the problems list found on my page and it worked
I have generated my fb share button code using Like Button Configurator. The image and heading is showing correctly but the description showing is the meta description of my site. I need to show the first few lines of the page that I am sharing.
I have also tried with Feed Dialog method and try to pass the page content as description. but when I give sample text it is working but not working when I give the page content.
Also tried to set
<meta property="og:description" content="Your description" />
but it also not worked.
All I need is to show first few lines of the sharing page instead of meta description.
here is a sample page.
The meta tag og:description should work.
The issue is that Facebook cache the pages info and you need to clear the cache manually to see the changes.
Go to https://developers.facebook.com/tools/debug/ enter your URL and see how Facebook is seeing your page info also you can force FB to fetch your new changes using the "Fetch new scrape information" button.
When you post a link on Facebook, it grabs an image from that page as a preview.
I'd like to be able to do the same! We're creating a link sharing website with Meteor, and want the user to be able to paste a link, and the image be rendered in the list.
Any ideas? Doesn't need to be Meteor specific at this stage!
To add an image when someone clicks on share/like etc, you can set the image for that page with
<meta property="og:image" content="http://yourdomain.com/link/to/image" />
When somebody shares it, it will use that image. You can also set titles and more:
https://developers.facebook.com/docs/opengraph/using-objects#selfhosted-creating
As indicated by Sarath in his comment you have to scrape the webpage and look for the information you need (title, META desc, an image) by using a regex for example.
I would suggest to look for META OG tags already used by many websites or, if not available, Schema.org micro data.
I think that some tools like PhantomJS could be helpful as it allows you to get the content of a webpage and even generate screen capture of this page.
I have problem with og:image in my website. og:image is displayed correctly only if I'm logged into their website sharethis.com with my facebook account. If I'm not logged in og:image picke some random image from my website.
I'm using DataLife Engine 10.1 and applied this script:
<script type="text/javascript">
$(document).ready(function(){
$("head").append('<meta property="og:image" content="[xfvalue_slika]" />');
});
</script>
Only when I'm logged into their website, image in tag [xfvalute_slika] is displayed when I share news on facebook. When I logout and try to share again, og:image choose some random image from website and display.
Even if I look at source code, the image path is taken correctly but not displayed on facebook. As previous said random image is shared on facebook wall.
Background: I have a site using a prettyPhoto lightbox to display photos. I've enabled social tools to display the 'tweet' and Facebook 'like' buttons on the lightbox, in hope to enable the ability to 'like' only the current photo being displayed to the one viewing it.
Problem: The Facebook 'like' button actually results in all photos in the same gallery being liked: all photos display the same number of likes in the lightbox; and on Facebook, the user's 'like' in their news feed or recent activity links to the gallery page rather than the actual photo that was liked.
What I've tried: I have tried editing the jquery.prettyPhoto.js file to add in the placeholder found in this answer: https://stackoverflow.com/a/11796964/2205165
I have also tried replacing 'location_href' with '{path}' to see if that used the photo's full path/URL, but it did not, or didn't appear to do so.
I've tried the above with 'deeplinking' enabled and disabled, with no avail.
Help: If anyone has a solution to enable Facebook liking and Twitter tweeting of individual photos from the prettyPhoto lightbox, I'm all ears. Even if it's to the degree of photos displaying the correct number of likes, rather than all having the same number: I'm not too fussed at this stage about linking back to the individual photo: linking back to the main gallery page will suffice for that.
Thank you!
In case anyone ever comes up on this again, This solution worked for me and it shares the image directly.
This is for images only, but there's no reason it wont work for the rest of the cases in PrettyPhoto.
In your PrettyPhoto parameters in prettyPhoto.js, switch out the facebook iframe to look like this with whatever params you want, all that matters here is that "{path}" is in the href spot of the iframe src:
<iframe id="fbiframe" src="//www.facebook.com/plugins/like.php?href={path}&width&layout=button&action=like&show_faces=false&share=true&height=21&" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:26px;" allowTransparency="true"></iframe>'
Then around line 274 in the prettyPhoto.js file you should see this line:
$pp_pic_holder.find('#pp_full_res')[0].innerHTML = settings.image_markup.replace(/{path}/g, pp_images[set_position]);
Add another line just like it and replace the href for the src like below, again with whatever params you want, the point is that the href is replaces with the image location variable:
$('#fbiframe').attr('src', "//www.facebook.com/plugins/like.php?href="+pp_images[set_position]+"&width&layout=button&action=like&show_faces=false&share=true&height=26");