2

私は自分のウェブサイトにFBのようなものを追加しようとしています。などは問題なく動作するようです。ただし、誰かが「いいね」ボタンをクリックすると（Mac LionでFirefoxを使用）、「共有」ボックスが表示され、私のページにカットオフが表示されます。理想的には、訪問者が自分の好きなものを共有できるように、共有ボックスを完全に表示したいと思います。これが不可能な場合は、「いいね」を残して共有ボックスをすべて削除します。

外観は次のとおりです。

http://www.sofiaandluis.com/public/facebook_like.pngのようなFacebook

コードは次のとおりです：HTML

<div class="column-area">
    <div class="suscribe-social">
        <div class="up make-word-breakable">
            <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/all.js#xfbml=1&appId=xxxxxx";
                fjs.parentNode.insertBefore(js, fjs);
            }(document, 'script', 'facebook-jssdk'));</script>
            <div class="fb-like" data-href="https://www.facebook.com/pagename" data-send="false" data-width="300" data-show-faces="true" data-font="verdana"></div>
        </div>
        <div class="down make-word-breakable"></div>
    </div>

CSS

.column-area {
    width: 300px;
    display: block;
    box-sizing: border-box;
    float: left;
    margin-left: 2.127659574%;
}
.suscribe-social {
    border: 1px solid #E4E4E1;
    margin: 5px 0px 20px 0px;
}
.suscribe-social .up {
    padding: 10px;
    display: inline-block;
}
.make-work-breakable {
    word-wrap: break-word;
}
4

6 に答える 6

3

FB APIを介して構成可能であることを示すものは何も見ていませんが、これは機能するはずです。

.fb-like {
    height: 20px;  // I think that's the button height, you might need to adjust
    overflow: hidden;
}

コメントボックスは引き続き読み込まれ、非表示になります。疑わしいのですが、そこで何らかの合併症が発生する可能性があるかどうかはわかりません。

于 2012-10-10T22:24:40.673 に答える
1

わかりました、動作させました。クラスを削除しました

.fb-like iframe {
    width: 290px !important;
}
于 2012-10-10T22:35:34.843 に答える
1

一部の親要素に「オーバーフロー：非表示」プロパティがあるため、FBボックスがカットされると思います。

このプロパティにより、FBボックスがその親要素のサイズを超えることが防止される場合があります。

于 2012-10-10T22:59:14.753 に答える
1

!importantこれはかなり古いですが、CSSを使用しない別の回答をここに追加したいと思います。これは、正直に言うと、正しく見えないだけです。

.fb-like iframe { max-width:none; }
于 2014-04-10T05:34:46.910 に答える
0 
.fb-like span{
overflow:visible 
!important; 
width:450px !important; 
margin-right:-375px;
}

これはうまくいくはずです.....幸運

于 2013-12-03T08:52:49.653 に答える
0

また、position：absolute; ボタンのホルダー要素で動作します。

于 2014-04-25T17:15:51.710 に答える