Home Forums Weaver Xtreme Theme Facebook like button popout cut off – where to insert CSS fix?

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #17869
    songerk
    Participant

    I’ve just added a Facebook like button to my Weaver Xtreme site: http://tryoncreek.org. The button works fine, but when I click “Like,” the popout window gets cut off to the width of the like button. This is a common problem and is apparently fixable with CSS, for instance as described in this thread: http://stackoverflow.com/questions/12630819/facebook-like-pop-up-dialogue-is-cut-off-to-the-width-of-the-button

    But my FB like button is one of several things I’ve place in Weaver Xtreme’s Advanced Options>HTML Insertion>Pre-wrapper Code, and I’m guessing that adding CSS to the CSS+ box would apply to everything in the Pre-wrapper code box. I’m not sure how to deal with the CSS fixes I’m seeing–a little help would be wonderful. Thanks.
    #22580
    scrambler
    Moderator

    Have you tried different browsers?

    because I tested o IE11, Firefox and chrome, and when I click on the like button, the popup window asking me to log in facebook has its full size and is not cutoff.

    If you do find needed css, it can be applied to only your fecebook button, but we would need to know more about what css you are speaking of and what code you used to insert the button

    #22581
    Gillian
    Moderator

    The button is cut off for me in Chrome – all I can see of the popup is a rather small sliver on the left side.

    #22582
    robfoster
    Participant

    Im assuming you’ve fixed this, looks good on fox safari and chrome on a mac

    #22583
    songerk
    Participant

    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&#8243; 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&#8221; width=”105″ height=”105″></div><div class=”fb-like” data-href=”https://www.facebook.com/pages/Tryon-Creek-Watershed-Council/151397021572511&#8243; 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! 🙂
    #22584
    scrambler
    Moderator

    Cant test (don’t have a facebook account  🙂 )

    the thread you initially referred to mentioned using data-width=”300″ in the button code, worth trying

    #22585
    songerk
    Participant

    Hmm, adding data-width=”300″ to the button code didn’t do anything. Other suggestions in the thread are in the last 2 messages (10/7/2013 and 10/14/2012), for instance putting the following code “in your css”:

    .fb_edge_widget_with_comment span
    {overflow:visible !important; width:450px !important; margin-right:-375px;}
    I’m uncertain about that part… how does that relate to the code that’s already in my CSS+ box, and is there a way to get what’s in the curly brackets to only apply to the Facebook like box? Even if this particular fix doesn’t work, maybe understanding how to apply CSS fixes to a specific element, in Weaver Xtreme, would help me experiment… 
    #22586
    scrambler
    Moderator

    No idea, again, the only way to find out would be to use the developer tool on the cropped popup and inspect what is going on, which I cannot do

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.