I can’t get comments to display using the safari browser on an iphone 4 (using both ios 5 and 6)
I’m using the new FB social plugin code (found here: http://developers.facebook.com/docs/reference/plugins/comments/)
I have this in my header.php file, just below the opening <body> tag.
<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=my app ID";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
…
and this:
<div class="fb-comments" data-href="http://example.com" data-num-posts="2" data-width="748" data-mobile="false"></div>
in my comments.php file.
I’ve also added this line:
#fbcomments, .fb-comments, .fb-comments iframe[style], .fb-comments span {
width: 100% !important;
}
to my style.css file in order to make the comment box retain its 100% width as the browser window shrinks down (I have a responsive design, so wanted to make sure the box didn’t break the layout.)
My problem is that when I decrease the browser window to the minimal (read: phone size), the comment box is still there and working fine, but when I open up the site on my iphone in the safari browser (running both ios5 and now with ios6), the comments box disappears entirely and the spinning wheel at the top of the browser signifying that something’s still loading keeps on spinning.
This doesn’t happen when I use the mobile version of Chrome on the iphone, and I’ve checked it and it works perfectly on my ipad 1 so it’s either something specific in my code that’s causing safari trouble, or something with safari itself – which one, I have no idea.
I tried looking online and here on stackoverflow, but couldn’t find a specific answer, so if you’ve got any ideas, or have seen something similar before, i’d love to hear about it.
Thanks all!
