I see what you mean–when you’re not already logged into FB, then the popup works fine. The problem I’m talking about happens when you are already logged in–then the popup (flyout?) becomes a box that appears to ask whether you want to share the website you’re just liked on your FB newsfeed…although I can’t read exactly what it’s asking because it’s so cut off. This does happen on different browsers as well.
To add the Like button, I followed Facebook’s instructions and looked at my other Weaver websites (which are Weaver II) to find where to add the code in. I added the following Javascript to Advanced Options>HTML Insertion>Post-Footer:
<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.3&appId=445992858837021”;
fjs.parentNode.insertBefore(js, fjs);
}(document, ‘script’, ‘facebook-jssdk’));</script>
And I added the following code to Advanced Options>HTML Insertion>Pre-Wrapper Code:
<div class=”fb-like” data-href=”https://www.facebook.com/pages/Tryon-Creek-Watershed-Council/151397021572511″ data-layout=”button” data-action=”like” data-show-faces=”true” data-share=”false” style=”position:absolute;right:180px;bottom:-35px;z-index:100;”></div>
All but the position stuff came from FB. That second batch of code is nested within the code I already had in the Pre-Wrapper, so my entire Pre-Wrapper Code looks like this:
<div style=”padding-top:5px;padding-bottom:5px;position:relative;max-width: 900px;margin:0 auto;background:url(http://tryoncreek.org/wp-content/uploads/2015/05/Header-water-image-slim.png) no-repeat;background-size:cover;”><div style=”color:#C1D72E”>[site_title matchtheme=true]</div><div class=”mylogo” style=”position:absolute;top:-18px;left:-45px;z-index:100;”><img class=”logo-no-text” src=”http://tryoncreek.org/wp-content/uploads/2015/05/Logo-No-Text.png” width=”105″ height=”105″></div><div class=”fb-like” data-href=”https://www.facebook.com/pages/Tryon-Creek-Watershed-Council/151397021572511″ data-layout=”button” data-action=”like” data-show-faces=”true” data-share=”false” style=”position:absolute;right:180px;bottom:-35px;z-index:100;”></div><div class=”mybutton” style=”position:absolute;right:20px;bottom:-39px;z-index:100;”>[maxbutton id=”1″]</div></div>
I hope that helps! 🙂