I'm incorporating the facebook Like button and Comments API into my site (at long last). Now on my site I have one page that uses a query string to determine the correct content (my site has over 4000 entries which us this querystring). Thus to the user this one page appears like many, think of it like this...
productPage.php?productID=1234
Now I can add the comments API with no problems, it can distinguish the difference in URL/querystring which is great. The Like button however just doesn't work. You click on it and it flickers and returns to how it was (it doesn't register the Like). I"m encoding the URL correctly (see below)
<?php
$fbUrl = urlencode("https://" . $_SERVER["HTTP_HOST"] . $_SERVER['REQUEST_URI']);
// echo "this page is " . $fbUrl;
?>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'XXXXXXXXXXXXXXXXX', // App ID
channelUrl : '//www.myURL.co.uk/channel.php', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
// Additional initialization code here
};
</script>
Oh I love this content....
<br><br>
<div id="fb-root"></div>
<script>
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=205472122918257";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div class="fb-like" data-href="<?php echo $fbUrl; ?>" data-send="true" data-width="450" data-show-faces="false"></div>
<br><br>
and add a comment...
<br><br>
<div class="fb-comments" data-href="<?php echo $fbUrl; ?>" data-num-posts="2" data-width="470" data-colorscheme="dark"></div>
I've spent a few hours on this and noticed that others have suffered from this too, however no one seems to have a solution. Whilst I'm trawling the web trying to find a solution has anyone got a work around or experience of this issue?
Have you checked your page with the open-graph debugger?
Referencing:
https://developers.facebook.com/docs/reference/plugins/like/ (on Like button)
and
https://developers.facebook.com/docs/reference/javascript/ (on FB JavascriptSDK)
What is different here is the reordering of your scripts. Additionally, XFBML is included in this example (as an alternative to the HTML5 method you were using).
<html xmlns:fb="http://ogp.me/ns/fb#">
<head>....</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
// init the FB JS SDK
FB.init({
appId : 'YOUR_APP_ID', // App ID from the app dashboard
channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel file for x-domain comms
status : true, // Check Facebook Login status
xfbml : true // Look for social plugins on the page
});
// Additional initialization code such as adding Event Listeners goes here
};
// Load the SDK asynchronously
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId='YOUR APP ID'";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<fb:like href="<?php echo $fbUrl; ?>" send="true" width="450" show_faces="true"></fb:like>
</body>
</html>