Updating facebook like button with Ajax_问答_开发者

开发者 https://www.devze.com 2023-04-12 09:18 出处：网络

I just finished a small website 100% based on ajax.But i have a problem in updating the links of the facebook Like buttons.

I used simply the facebook generated code and i included the graph meta tags. when the users presses a button it loads a new youtube video, i update the meta tag

<meta property="og:url" content="http://www.mySite.com/"/>

using jQuery this way :

$("meta[property=og:url]").attr("content", nUrl);

nUrl is the new page url that contains the new randomly selected video.

When i hit "Like" it simply grab hit "Like" it simply grab the original og:url meta tag content a开发者_JAVA百科nd now the new on set by ajax. How to update with javascript the like button url ? What is wrong in what i did ? Thank you

So here's what i did to solve my problem for other people who have the same: Add this to your site :

<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:og="http://ogp.me/ns#"
  xmlns:fb="http://www.facebook.com/2008/fbml" >

This will add the fbml to your site. Then use the FBML version of the like button (or comment system, or whatever), for like i used this :

<span id="fbLike"><fb:like href="http://www.your-site.com?v=1" send="false" layout="button_count" width="80" show_faces="true"></fb:like></span>

Now to have a new facebook like button each time the user make an Ajax action, just add this jquery code to where ever you handle this action in your client-side code:

var nUrl = "http://www.your-site.com?v="+toPlayId.substring(1);
$( '#fbLike' ).html('<fb:like href="'+nUrl+'" send="false" layout="button_count" width="80" show_faces="true" />');
        if (typeof FB  != "undefined"){
        FB.XFBML.parse(document.getElementById('fbLike'));}

You basically just replace the where your button is with a new one. nUrl is the new link you want your new button to point to. You don't need a real new URL just add a parameter to the url so that your ajax knows what to display when he finds the parameter. That's all.

Don't modify meta tags with AJAX or javascript. Setup server-side scripting to correctly set them the first time.

When you Like/share a URL on Facebook, Facebook will make an HTTP request to the URL and parse the meta tags that it sees.

You cannot update the OG tag with Javascript. Facebook will make a serverside request to your server and this must return OG tags which represent that object.

You'll need to create a URL for every object on your site - something like:

http://www.yoursite.com/video/VIDEO_ID

As your video in-page changes with Ajax, you render a new like button which points at a URL like this. Hitting this URL without JS should render the correct OG tags - this is how Facebook will see your page. You can then add a javascript redirect (window.top.location = NEW URL) to redirect the user into ajax-based video player.