Facebook's 'like button' doesn't work as it should - facebook-like

Question

I know there are many threads on this subject; I read them all (I think) and none of them is an answer to my problem, so here goes:
I want a facebook 'like' button om my website; the kind which invites the liker to add a comment. It is working 'a bit', but not the way I'd expect. I use a special fb-account for testing and found that:
The fact that I 'liked' my webpage shows up under 'actions', but NOT under 'likes'.
The 'comment' gets lost (is not published). Consequently, the 'like doesn't show up in the timeline. (From FB's documentation, I gather that 'likes' are published on the timeline only if a comment was added. And indeed, it seems to work that way when I click the like-button on other websites and add a comment.) Consequently, it doesn't show up on the 'newsfeed' of my 'friends' either.
What did I do wrong?
Of course I used the FB debugger (the 'linter') to make sure my webpage passed all tests.
I used the iFrame version as well as the javascript version of the button, but that doesn't seem to make a difference.
I used the code as generated by fb's own code-generator (that is the xdbml-version using javascript), as well as iFrame code from other code-generators. Finally, I copied the exact iFrame-code from another website, which DOES exactly work as expected (that is: the like action shows up in the timeline with the provided comment and the 'like is added to my set of 'likes'.) I just replaced the URL with my own, taking care it is properly url-encoded. But this code, while clearly working for someone else, is not working for me: I get the same disappointing result.
There is, in fact, another difference still: when, in facebook, I click on the link of some other website I 'liked' I am immediately taken to that website and the page I 'liked'. But when I click on the link to my wn website, I first get a 'warning' dialogue-box, informing me of the dangers of clicking links. For the life of me I can't understand why these differences in behaviour occcurr.
A hint that something is wrong may be (?) that on my website, when the 'comment-box' appears after clicking the button, it doesn't close when I click 'publish'; instead the box stays visible until I click 'close'.
Here is the code I use:
Meta-tags:
<meta property="og:title" content="Modern soefisme - Modern Sufism" />
<meta property="og:description" content="Home Page of Mabel van Asperen, devoted to sufism, sufi acivities and sufi literature" />
<meta property="og:type" content="non_profit" />
<meta property="og:url" content="http://www.phlogiston.nl/speeltuin/" />
<meta property="og:image" content="http://www.phlogiston.nl/speeltuin/images/hearts_with_wings.jpg" />
<meta property="og:site_name" content="Sufi Stuff" />
<meta property="fb:admins" content="100000985117039" />
<meta property="og:locale" content="en_US" />
The iFrame:
<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww%2Ephlogiston%2Enl%2Fspeeltuin%2F&layout=standard&show_faces=true&width=450&action=like&colorscheme=light&height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100%; height:80px;" allowTransparency="true"></iframe>
The xfbml-version:
<script Language="javascript">
(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/nl_NL/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div class="fb-like" data-href="http://www.phlogiston.nl/speeltuin/" data-send="true" data-width="450" data-show-faces="false"></div>
Can anybody shed some light on this? I would be most grateful, as I'm getting rather frustrated since 'everybody' seems to be able to make a well-functioning like-button but I can't. (And I'm also getting tired of the fact that 'experimenting' seems to be so difficult: after clicking the like-button once I can't use it again. So, for each try I have to make up a new webpage. Or does someone know a better way?)

Answer 1

I'm not really sure if this will solve your problem but try changing the overflow css value in the iframe to something other than hidden.
The facebook reference for the like plugin states:
When I click the Like button, the popup window (or "flyout") doesn't
show. Why?
If the Like button is placed near the edge of an HTML element with the
overflow property set to hidden, the flyout may be clipped or
completely hidden when the button is clicked. This can be remedied by
setting the overflow property to a value other than hidden, such as
visible, scroll, or auto.
As far as 'unliking' your like button, its hard to see but if you move your mouse cursor to the left side of the like button, a grey 'x' will appear.
Click on that and you will unlike.
Hope that helps!
I'm having a tough time with this too so your not alone! I can't seem to get the pop up from the like button which allows me to share a link in my feed. I keep getting this 'Unknown RPC service: widget-interactive' error. Wish it was easier.