i developed a website
ut when i share any page
in facebook
facebook should recognize my page
and select images to select a thumbnail
but this do not happen in my website
as if facebook can not recognize my page
or cannot read it and select images from it
what should i do
to let facebook recognize my page
and load all images in the page to
navigate left and right to select a thumb for the shared page
Looks like the question has already been answered here. Here is another useful link. Thanks for asking. It made me find out something I can use.
Update: After trying it and finding it not to work I tried the method in this post. It initially didn't work, but that was because I forgot to upload the image. So it may be the case that the original method may still work. Here's the template I used in my head section:
<meta property="og:title" content="your title">
<meta property="og:description" content="your description">
<meta property="og:image" content="http://www.yoursite.com/your-image.jpg">
Update 2: If it seems that Facebook isn't recognizing your code, try their lint tool. This does two things. The obvious one is that it reports any errors in your code. The second is that it refreshes Facebook's cache of the page. I had two pages where the new code wasn't recognized until I did this.
From my own tests, Facebook should find images on your site with no problem, so long as they appear directly in the html (as <img src="path/to/img.png" />1) and not via css (background-image: url(path/to/img.png);).
This is my own-site test, at: http://davidrhysthomas.co.uk/so/fbookImg.html, admittedly this doesn't have a 'share this page' button, so requires you to log into Facebook first, which might make a difference. But I don't have a Facebook developer account with which to test that theory, unfortunately.
Either absolute, or relative, paths seem to make no difference.
from my experience using a drupal site the logo was not recognized because the drupal system renders a relative path. changing this to a full path with http:// and refreshing FB's cache should work
Related
I have a question that was initially asked here: Open graph og:video Meta Tags content in 2010, but the answer no longer works.
I'm trying to show a YouTube video in Facebook (and have it play inside Facebook) when a link is shared. The following og:video tag on the page doesn't work (it never really did):
<meta property="og:video" content="https://www.youtube.com/watch?v=ZH4YSF-i5dY" />
The solution proposed here https://stackoverflow.com/a/17811187/188740 in 2013 worked really well until recently. It was to change the og:video to something like this (notice the way the v query string value is represented):
<meta property="og:video" content="https://www.youtube.com/v/ZH4YSF-i5dY" />
That no longer works and Facebook completely ignores it.
Another option I tried is to put the YouTube URL in og:url:
<meta property="og:url" content="https://www.youtube.com/watch?v=ZH4YSF-i5dY" />
That approach instructs Facebook to scrape YouTube to get the thumbnail image, but clicking on the post sends the user to the original page that was shared. The click behavior is the right one (I want the user to go back to the originally shared page), but there's no way for the user to play the video.
Anyone know the solution to this problem?
Update:
Unfortunately, it's starting to look more and more like this is a change that Facebook made in August 2017 (and rolled out slowly across different regions over several months) and it's by design. In other words, there's no way to make this work. :-( If anyone has a workaround, it would be great for the community to know.
Relevant discussions:
https://developers.facebook.com/bugs/1963535797258090/
https://developers.facebook.com/bugs/364444227315183/
https://productforums.google.com/forum/#!topic/youtube/l69gPBlkXN0
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.
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
It seems the facebook debug tool http://developers.facebook.com/tools/debug is using a cache.
I made an update to my site but facebook debug tool is still showing up the old data.
Is their any way to force facebook to refresh its data? It has been a few days now and it seems the cache will not expire.
Go to http://developers.facebook.com/tools/debug
Enter the URL following by fbrefresh=CAN_BE_ANYTHING
Examples:
http://www.example.com?fbrefresh=CAN_BE_ANYTHING
http://www.example.com?postid=1234&fbrefresh=CAN_BE_ANYTHING
OR visit:
http://developers.facebook.com/tools/debug/og/object?q=http://www.example.com/?p=3568&fbrefresh=89127348912
I was having the same issue last night, and I got this solution from some website. I hope this helps.
The tool should update Facebook's cache for a given URL immediately, if Facebook is still returning 'stale' data, check that Facebook is actually getting the content you're expecting.
A quick way to check is to load your page from a command line tool like curl, using Facebook's user agent and see if the meta tags returned are what you were expecting.
One thing i've seen happen sometimes is people including all the correct tags on page X, except that page X has an og:url meta tag pointing to another url, Y.
Facebook will follow that tag and scrape page Y and use that metadata.
I've usually seen it where page X is 'something.com/article/x' and the og:url is set to 'something.com/articles/' or 'something.com'
I've the same problem. The ?fbrefresh=CAN_BE_ANYTHING didn't do anything clear the og:image cache.
The only solution that worked for me was to rename the image and the path on the og metaga. You can do something like:
<meta property="og:image" content="http://yourdomain.com/images/socia-photo-v2.jpg">
If somebody knows a better solution will be very appreciate.
Thanks.
This hasn't been added to in a couple of years, but I've just had the same issue and found a way that immediately resolved it.
Facebook say:
Use og:image:width and og:image:height Open Graph tags
Using these tags will specify the image to the crawler so that it can render it immediately without having to asynchronously.
Putting this into use should look like this:
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
Solved the problem straight away! Hope this helps!
Go To
https://developers.facebook.com/tools/debug/
then put site URL
Now Click on button Scrape Again
I was getting the cache to show the right picture after updating my blog post, but when I went to post the link, Facebook was still showing an old picture. I didn't want to wait a day to see if it would finally change, so I did what's outlined on this page:
https://webapps.stackexchange.com/questions/18468/adding-meta-tags-to-individual-blogger-posts
In other words, something like this:
<b:if cond='data:blog.url == "http://urlofyourpost.com"'>
<meta content='http://urlofyourimage.png' property='og:image'/>
</b:if>
Basically, you're going to hard code an if statement into your page's HTML to get it to change the meta content for whatever you've changed for that one post. It's a messy solution, but it works.
You can try the object debugger and click on fetch new scrape information. It is mainly to debug the open graph meta data.
https://developers.facebook.com/tools/debug/og/object/
When someone posts a link to a web site in Facebook, it populates the link preview box with a photo and some text from the site.
If someone posts a link to my site in Facebook, it is generally just get the site's domain name and one of the images that appears on the site. No text appears.
I would like to be able to control what text and images appear in the link. Is there a specification that they use? Can I provide some metadata so Facebook will display what I want?
Here is Facebook's developer page on their share function.
Basically there are some simple metatags you can use to optimize what appears on FB
<meta name="title" content="title" />
<meta name="description" content="description " />
<link rel="image_src" href="thumbnail_image" / >
AND:
The wiki article doesn't mention this, but Facebook CACHES the results of your site for awhile. So, if you're debugging & doing quick iterations, you either need to wait awhile, or rename the page (index2.html, index3.html, etc) until you find something that works.