发表新帖
发表新帖

Facebook Like Button Causing Horizontal Scrollbar

后端 未结
关注
7 874
眼角桃花
眼角桃花 2021-01-05 07:34

I\'ve recently added a facebook like button to my site and it\'s causing a horizontal scrollbar to appear when it\'s not needed. It doesn\'t appear in Chrome but is there in

相关标签:
7条回答
  • 傲寒
    2021-01-05 08:12

    I had the same issue... there is a width in the code (I think the default is 450). If you change that to something like 150, I think you'll be in good shape. Of course, it depends on the preferences you select on the facebook plugin.

    Good Luck, hope that helps.

    0 讨论(0)
  • 一个人的身影
    2021-01-05 08:12

    There is a DIV just after 

    <div id="fb-root" class=" fb_reset">

<div style="position: absolute; top: -10000px; height: 0pt; width: 0pt;">

    Remove position absolute from this and that horizontal scroll will disappear after that it will show some content saying

    Given URL is not permitted by the application configuration.

    so either just remove this DIV or apply

    display:none; to get this working perfectly

    See this screenshot

    enter image description here

    1. having Problem see there is a horizontal scroll
    2. having solution see there is no horizontal scroll but unwanted content in circle.
    3. applying display none; to this div or by removing this div completely from the code, will lead you to the solution
    0 讨论(0)
  • 谎友^
    2021-01-05 08:13

    The mark-up Facebook inserts into your page is liable to change so you want to use a solution that is not dependent on it.

    You can resolve this issue by placing the fb-root div as the first child of your body element

    <body>
    <div id="fb-root"></div>

    The script tag and fb-like div can remain in their original place.

    Ref: Facebook documentation and bug report

    0 讨论(0)
  • 梦谈多话
    2021-01-05 08:23

    None of the answers here worked for me so I tried it myself. I found a solution:

    Put following CSS in your site head:

    #fb-like-wrapper iframe {
    width:100px!important
}

    Put following HTML where you want to show your like button:

    <div id="fb-like-wrapper">
    <div id="fb-root"></div>
    <div class="fb-like" data-href="http://www.facebook.com/yourAwesomesSite" 
    data-layout="button_count" data-action="like" 
    data-show-faces="false" data-share="false"></div
</div>

    There you go :)

    0 讨论(0)
  • 無奈伤痛
    2021-01-05 08:27

    You can add to the "fb-like" attribute data-width="100px"

    0 讨论(0)
  • 闹比i
    2021-01-05 08:31

    Add this to your css

    .fb-like{height:20px}

    Add attributes data-width and data-height to

    <div class="fb-like" data-width="124px" data-height="20px"></div>

    This also prevents the vertical scrollbar from appearing if it is not needed.

    0 讨论(0)
 看不清?
提交回复
热议问题