CODEWITHSUNDEEP
ajaxwordpressfacebook-like
Gab
Gab

Reputation: 2276

Help needed with Facebook Like Button and AJAX loaded pages

OK I'm loading each pages and posts (Wordpress) via ajax and it works great. I integrated the iframe Facebook Like Button in the page/post templates and it loads correctly when I load a page or a post.

My only problem it that when I load a page or post and I click on the Like button it is the Open Graph Tags of the main page (header.php via index.php) that are shown on Facebook and not the tags of the page or post I just loaded.

http://themes.visualise.ca/visualise

How can I adjust this? This is the php code for the post template that is being called via ajax:

<?php
/*
Template Name: Ajax Post Using Slug
*/
?>
<html lang="fr">
<head>
<meta charset=utf-8>
<meta property="og:title" content="Portfolio | par Gab Labelle, artisan numérique montréalais" />
<meta property="og:type" content="blog" />
<meta property="og:url" content="http://themes.visualise.ca/visualise/#portfolio" />
<meta property="og:image" content="<?php bloginfo('stylesheet_directory'); ?>/images/visualise.ca-logo2.png" />
<meta property="og:site_name" content="visualise.ca" />
<meta property="fb:admins" content="10150720967625327" />
<meta name="description" content="&#171; J'aime croire que ma force réside en ma capacité à trouver l'histoire simple qu'inspirent marques, produits et services et à la présenter de manière intelligible, créative et engageante. &#187;" />
</head>
<body>
...
<?php the_content(); ?>
...
<div id="fb-root"></div><script src="http://connect.facebook.net/fr_FR/all.js#appId=153423521399187&amp;xfbml=1"></script><fb:like href="http://themes.visualise.ca/visualise/#portfolio" send="true" layout="button_count" width="450" show_faces="false" font=""></fb:like>           
</div>
</body>
</html>

Many thanks for you time and help.

Upvotes: 0

Views: 1280

Answers (1)

Nicholas Head
Nicholas Head

Reputation: 3726

You need to specify the page URL you want to "Like" in your IFRAME code.

...

"In order for Facebook to grab your meta tags, it needs a unique URL for your content. You're going to have to make a "non-AJAX" version of your landing pages with different URLs, and send that to Facebook as part of the Like button URL. It looks like clicking an item hits /visualise/ajax/ with a "slug" param for the content. You'll want to probably do something like /visualise/viewslug?slug=[blah] and send that to Facebook. It would have the right meta tags and auto-open your AJAX window upon that URL loading."

Upvotes: 1

Related Questions