To start with I am new to facebook "like" button integration
I have a facebook like button on my webside (http://www.mini-signs.dk/index.html), but the image showing when like button is pressed is incorrect. I've tried to use meta tag
in between and on the page but it seems like it choosing a images name Galleri-Andet-Normal.jpg in the same folder.
I've tried to delete the image and overwrite it, and now something different is showing in the facebook timeline when liking the side, but the image in the like button dialog is still wrong. If i put the content value in a browser the correct image is showing
I've tried a lot of things og googled to solve it my self
Please help me out.
Only option you have is that you change your meta tags and WAIT. Once your page is crawled again, you will get new images :)
Try here and look where is the problem,
http://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Fwww.mini-signs.dk%2Findex.html
All the images referenced by og:image should be at least 200px in both
dimensions. Please check all the images with tag og:image in the given
url and ensure that it meets the recommended specification.
fb:admins and fb:app_id tags are missing.
Related
I set up the index page of my new website with a Facebook like button. Everything functions properly, except that the instead of the image (the only image invoked on the web page) that I specified with - meta property="og:image" content= - a completely unknown image is used. It the image is of a narrow horizontal bar with some white letters.
See if Facebook can tell you what's wrong via their lint tool.
Cheers
We recently moved servers and I've been having this problem since.
I tried parsing this url1 in the Facebook Debug tool, and the thumbnail retrieved using the content of the og:image tag is displayed fine, but it won't display when I 'like' the story and it appears in my profile . This was a story posted before switching servers.
Now when I try parsing this url2 in the Facebook Debug tool, the thumbnail is not retrieved and with previous case the thumbnail won't display in my profile when I like this story. This is a story posted after switching servers.
The funny thing I try repeating these actions and the thumbnail does pop up randomly.
How does Facebook retrieve the image from my server? Does the problem have something to do with how this is done?
At one point, I thought FB would not show a thumbnail on a second post. Or something. It seemed to show the thumbnail again, if I changed the URL a bit (put some fake parameters in the url).
YMMV
Remove every og meta tags from the page, debug it into the facebook debugger tool, when it shows nothing, put the correct og meta tags again and debug again with facebok debugger tool.
This is a weird problem with facebook. It caches the old incorrect values sometimes.
I have already searched the site but I can't find an answer to this. My problem is that Facebook is showing the wrong image after I press the 'recommend' button (it's the same as the 'Like' button but with different text).
The webpage is here: http://www.bamarang.in/perfume-tree/ and the facebook debugger is here: http://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Fwww.bamarang.in%2Fperfume-tree%2F%3Ffb%3Dfgfgfg
The website needs an email but you can use a fake one to enter, as there is no confirmation.
As you can see everything seems to be correct but the wrong image is displayed. I've tried clearing the cache, on both the browser and Facebook (this last one by writing the webpage url's in the developer tool) but to no avail.
You can also see the webpage's source to check that all the OG tags are there and correct.
What else can I be missing? Please help.
See the wrong image showing up here: www.crosstastemovies.com/temp/fb_error1.jpg
See the FB scraper showing the correct image here: www.crosstastemovies.com/temp/fb_error2.jpg
I've updated the question to add the screen shots.
The link you provided for your site is: http://www.bamarang.in/perfume-tree/ but the link with the debugger is: http://www.bamarang.in/perfume-tree/?fb=fgfgfg.
As you can see those two urls are not the same.
I curled both urls, the first one returns a redirect to https://www.bamarang.in/customer/account/create/ and when curling that the output has no og tags in it (check yourself in the debugger).
The 2nd url (with the ?fb=...) indeed has the og tags.
What's the url you're using with the recommend button?
You should probably just output the og tags even when the fb parameter is not present, don't forget that people can just copy/paste the url into their status on fb, you have no control over how people share.
While using facebook, when we click on some links, a small box appears in front of us initially showing LOADING and then loads the content e.g. photos, show more etc.
Are they using AJAX to do so!
Please help me in this.
Thanx in advance...!
You might get the same effect using AJAX.
Also look here: http://choosedaily.com/1178/15-jquery-popup-modal-dialog-plugins-tutorials/
I am trying to implement content browsing like it is done on Facebook when user is browsing the photos. I guess everyone is familiar with that photo browsing where you can click "next" and "previous" and immediately get the next or previous photo (you can also navigate using arrow keys).
When you click "next" for example you notice that the page does not refresh - only the content. At first I thought it is done using plain ajax calls which refresh only the "content" in this case the image, description and comments. But then I noticed that also URL in the "Location" toolbar of my browser is changed!
I tried to inspect this using Firebug and discovered that when you click "next" only the next photo is downloaded and I still don't know from where the comments & image meta data (description, time, tags,...) are loaded.
Can someone please explain how this technique is done - page URL changes without page refresh (or even without page "blinking" if it refreshes from cache).
I know how to change page content using ajax but URL of that page stays the same all the time. If I click on "refresh" button I get the first page again. But not on Facebook since even the "window.location" is changed every time without actual redirect.
The other thing I noticed is that the bottom toolbar (applications, chat, ...) is "always on top". Even if you change the page, this toolbar is not refreshed and always stays on top - it doesn't even "blink" like other pages that are refreshed (either from webserver or from local cache). I guess this is the same technique as above - some kind of "fake" redirects or something?
The Answer is pushState
if (window.history.pushState)
window.history.pushState([object or string], [title], [new link]);
You will smile :)
I've tried to change through facebook images, and this is what I saw:
In Firefox:
The page URL is not changing. Only the hash is changing. This is a technique used to allow crawlers to index the content. What happens is this:
User clicks on "next"
JS loads the next image with tags, comments, etc and replaces the old content with them.
JS changes the hash to correspond the new image
urls look like this:
http://www.facebook.com/home.php?#!/photo.php?fbid=1550005942528966&set=a.1514725882151300.28042.100000570788121&pid=3829033&id=1000001570788121 (notice the hash)
As for the second question, this is just a benefit of the technique above. When you are on facebook, the page rarely gets actually refreshed. Only the hash is changed so that you can send links to other people and crawlers can index the content.
In Google Chrome:
It seems that chrome hassome way to change urls without refreshing the page. It does that by using window.history.pushState. Read about it here.
urls look like this: http://www.facebook.com/photo.php?fbid=1613802157224343&set=a.1514725288215100.28042.1000005707388121&pid=426541&id=1000001570788121 (notice that there is no hash here, but still the url is changing along with images)
In Epiphany:
Epiphany doesn't change the URL when the image changes.
urls look like this: http://www.facebook.com/photo.php?fbid=1441817122377521&set=a.1514725882215100.28042.1000005707848121&pid=3251944&id=1000200570788121 (there is no hash, and the URL stays the same when changing the image)
(don't have other browsers to verify right now)
The one technique not mentioned here is the window.onhashchange() method (supported in ie8+ and most others) which they might have used
You may noticed that the page url remain the same. What is changed, however, is page hash (the part after # in the url).
You need something like this: http://code.google.com/p/reallysimplehistory/