jqueryfacebookweb-scrapingfacebook-likemeta-tags

Facebook LIke update through Ajax - not simple issue


I have created a video page that loads videos dynamically using a database while the files are stored on the server. A video is preloaded on the page and that data can be Liked and posted to Facebook with no issue. When a new thumbnail is clicked, I'd like the Facebook Like information to change to the new video content (title, url, and image). I've looked for a solution and there are many similar ones but their simple solution of adding FB.XFBML.parse(); isn't working for me. I update my meta tags when the Ajax call comes back successfully using:

$("meta[property=og\\:title]").attr('content', videoTitle); 
$("meta[property=og\\:url]").attr('content', "www.mySiteURL.com/index.php?videoID="+videoID);
$("meta[property=og\\:image]").attr('content', "www.mySiteURL.com/images/video/"+videoImageName);

But when I run the parse code right after these are set, I see the button refresh but it sill has the same content. I can see that the meta tags actually update using Firebug. It's just that the FB button doesn't properly re-scrape the page info to send to FB. I have the namespace set in my html tag and I have the other og:metas set up as well, but these are the three that I need to be re-scraped.

I saw in one post that someone used something similar to ajax.complete(function(){FB.XFBML.parse();}); directly on the main page, I don't remember the exact code, but the idea was the same, and it still didn't work. I figured just running it within my ajax function, on success, would be sufficient.

Am I missing anything?

Any help would be greatly appreciated!

Thanks.

Edit: I should add that each video has its own direct URL that is inserted into the og:url since they are all loaded through ajax. The Facebook Linter/Object Debugger shows me all of the correct data for each video when I use one of these unique URLs, it's just a scraping issue - at least, with my limited knowledge on this, that's what it seems to be to me.


Solution

  • It sounds like you may have been changing the meta tags of the current page dynamically - this isn't necessary and would cause problems with Facebook's scrape (which you can verify using Facebook's Debug Tool) -

    Maintain one static URL per object, serve the meta tags from that URL (you can redirect other browsers if you want) and on the dynamic page change the Like button itself to point at the URL for the object being displayed currently (i.e remove the like button, add a new fb:like tag and re-call FB.XFBML.parse();)