I generated the code here: https://developers.facebook.com/docs/plugins/like-button – Used the “Like button configurator”. Put in the url of the site, chose the options I wanted, then clicked “Get code”. It generates two pieces of code – the first one it says “Include the JavaScript SDK on your page once, ideally right after 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/sdk.js#xfbml=1&version=v2.5";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
The second piece it says: “2. Place the code for your plugin wherever you want the plugin to appear on your page.”
<div class="fb-like" data-href="https://www.nysbs.org" data-width="400" data-layout="standard" data-action="like" data-show-faces="false" data-share="true"></div>
I put both pieces of code into the text widget, and then placed the widget in various places – right sidebar, left sidebar, footer. I wouldn’t really call what happens when you hit “Like” a ‘pop-up’ – more like a ‘fly-out’, as it opens right beside the like button. Hitting the “share” button generated an actual pop-up in the middle of the screen. Didn’t like the way it behaved in any of the places I put it. (In the footer, it was really weird – generated the narrow box AND it was half-hidden behind the Search box which I have placed there.)
The Configurator asks you to specify the width of the plug-in, but tells you the minimum width and the default width of the various layouts. I originally thought a layout that’s too wide would play havoc with the narrow sidebars if that was the width of the actual buttons, so I chose one of the narrower layouts. That didn’t resolve anything, so I played around with it some more and went back to the Standard layout, which it says the default width is 400 pixels. But if I left the width field blank it resulted in that very narrow fly-out box I posted the screen shot of, with some of the content cut off. If I actually entered ‘400’ in the width box, the fly-out was wider, but still not wide enough to show the whole box. So I tried altering the code and replacing the 400 with 600. That seems to make the fly-out box the correct width.
The whole thing is very strange.
