3

フッターに Facebook のようなボタンがあるサイトをいくつか作成しました。

ただ、ページをいいねした後に表示されるポップアップが表示されないので、いいねボタンの上に移動させたいと思います。

ここに画像の説明を入力

こうならないように。

ボタンのように実装されたhtml5をターゲットにするにはどうすればよいですか?

<div class="fb-like span6" data-href="https://www.facebook.com/pages/xxxxxx?fref=ts" data-send="true" data-width="450" data-show-faces="false" data-action="like" data-font="segoe ui"></div>

また、どの CSS を適用する必要がありますか?

4

4 に答える 4

1

a) フッターの高さを変更する必要があります。デザインにはあまり影響しません。レスポンシブ オプションでさえ、次のようになります。

#footer {
margin-left: 0;
height: 230px;
background: #fff;
border-top: 1px solid whiteSmoke;
}

または... b）cssを変更せずにサイドバーにいいねボタンを配置できます。次のようになります。

http://puu.sh/3Srmq.png

于 2013-08-03T03:26:55.877 に答える
0

私も妥協案を持っています。

ユーザーがいいねボタンをクリックした後、コールバック関数によってウィジェットが完全に表示されるまでウィンドウをスクロールします。

コードは次のようになります

FB.Event.subscribe('edge.create', function(response) {
    $('html, body').animate({
        scrollTop : $("#yourFacebookWidgetID").offset().top + 170 //add offset.
    }, 10);
});

これがフィドルです（私はこのインスタンスを借りました。誰かがずっと前に作ったものです。）

ここにスクリーンショットがあります。いいねボタンクリック後、オートスクロール直前。 ここに画像の説明を入力

そしてこれがオートスクロール終了後の画面。 ここに画像の説明を入力

最後のいいねボタンに注目してください。

編集済み: 170px のオフセットを追加します。

スクリーンショットを追加します。

于 2013-08-05T08:22:41.360 に答える