Alright so I'm setting up comment boxes across my site. Here's an example of one:
<div class="fb-comments" data-href="http://whisperingforest.org/#/quote/60" data-numposts="5" data-colorscheme="light"></div>
For some reason instead of linking to the commented URL, it links people to https://www.facebook.com/apps/application.php?id=435066949857522
I can't figure out why it's doing so, any suggestions?
Just in case here's my FB initiation (after the opening body tag):
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '467744490017837',
status : false,
xfbml : true
});
};
(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";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
You should provide a proxy url (plain html, not a javascript application as your page) with open graph tags for Facebook scraper (og:title, og:description, og:image, og:sitename, og:type) and a javascript redirect for real users. Example:
<html prefix="og: http://ogp.me/ns#">
<head>
<meta property="og:title" content="Quote #60" />
<meta property="og:type" content="article" />
<meta property="og:url" content="http://whisperingforest.org/quote.php?id=80" />
<meta property="og:image" content="http://placehold.it/200x200&text=thumb" />
<meta property="og:description" content="some description or maybe whole quote?" />
<meta property="og:site_name" content="Whispering Forest" />
<script>document.location.href="http://whisperingforest.org/#/quote/60"</script>
</head>
</html>
Of course it should be generated server-side and you must change og:url to your real script url.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With