Trying to update Facebook Open Graph meta tags using client side jquery and ajax

Question

I use ajax to render a content page with a Facebook Like Button plugin in it.

The problem is that when the user clics Like, Facebook will extract meta info but I don

Answer 1

be careful with using '.append()'. According to the JQuery Docs, this method has a move effect (reads from source, copies to destination and removes the source).

A theoretical way is something like this:

headObj = $("head");
keywordObj = $(headObj).find("meta[name='keywords']");
newKeywords = $(keywordObj).attr("content");
newKeywords += myKeywords; 
$(keywordObj).attr("content", newKeywords);

Download and install the plugin FireBug for browser FireFox, so you can check the changes at runtime.

Answer 2

The problem is that facebook like will extract meta info but I don't know how to assign the meta with ajax.

I tried use append to head int FB.init but it seems not work.

Of course this does not work, because Facebook’s scraper requests your URLs from your server – and does not care about what the DOM might currently look like in any user’s browser.

You can not add Open Graph meta data client-side.

Answer 3

Actually you can use such script:

/// Append Meta tags
function setMT(metaName, name, value) {
        var t = 'meta['+metaName+'='+name+']';
        var mt = $(t);
        if (mt.length === 0) {
            t = '<meta '+metaName+'="'+name+'" />';
            mt = $(t).appendTo('head');
        }
        mt.attr('content', value);
    }

and call this function from body:

setMT('property', 'og:title', 'Title for Facebook');

I have similar on the News Site at http://www.livepage.info