Facebookのようなボタンを使ったページの表示

Question

私は、訪問者がページを "好き"、 "+"できるようにする "ソーシャルスライダー"をまとめました...このスライダーのコンテナは、ブラウザの角。すべてうまくいきますが、Likeボタンをクリックしたときを除いて、コメントを許可するダイアログがページ外にあります。

ダイアログがどこに表示されるかを設定する方法がありますか？

<div id="social-container"> 
<div class="fb-like" data-send="false" data-layout="box_count" data-width="55" data-show-faces="false"></div> 
</div> 

とCSS：

#social-container { 
     clear: both; 
     z-index: 999; 
     position: fixed; 
     bottom: 120px; 
     right: 20px; 
    } 

Answer 1

いくつかの時間前、あなたは社会的にCSSファイルのURLを渡すことで、CSSでのソーシャルプラグイン（のいくつかのことを変更することができますプラグインのコード）、しかしafaikそれはもはや可能ではなく、あなたはかなり彼らをそのまま取る必要があります。そうではありません。これは不可能です。これらの社会的なプラグインは、閉じたシステムです。あなたができる唯一のことは、同じようなボタンが左のどこかにあるようにすべてをデザインすることです。

Answer 2

あなたのレイアウトには、「このページが気に入りましたか？」ボックスが右側から起動されている必要がある場合は、ボックスを広げてコンテンツの範囲を広げることを検討できますか？

これは、このポップアップコンテンツが表示されるためのスペースを増やす必要があります。

また、ページの下部にCSSを使用して十分なスペースを確保して、これを拡大できるようにする必要があります。それは、現れたときに自分のスペースを追加しない可能性が最も高いでしょう。

Answer 3

iframeであるためポップアップボックスが表示される場所を選択することはできず、クロスドメインiframeのCSSを制御することはできません（パラメータはありません）。あなたが行うことができます

唯一のことは、ダイアログが隠されたままとなるようようなボタンはiframeのサイズを制限している：あなたが好むものは何でもブラウザのツールを持つ要素を、

#fb-like iframe { 
    width: 62px !important; height: 24px !important; 
} 

Answer 4

これは明らかに思えるかもしれない点検し、見つけますポップアップコンテナの名前、それに応じて追加および調整します。

例：あなたがこれを行う方法を知っているのに十分な有能に見えるので、

#social-container.popup { 
    position: absolute; 
    right: 150px; 

Answer 5

だから、それは、これはあなたの問題を解決する可能性は低いですが、実際に問題を評価するためには実際のコードを掲示していない、と私はできませんどのFacebookのAPIを使用しているのか正確に把握することができます.BUT-

クリックイベントやiframeの幅などの情報をキャプチャしてオフセットを比較するだけでは問題ありませんか？

$("#social-container").click(function(e){ 
    var facebookSelector = $(iframe selector here); 
    var h = $(window).height() - facebookSelector.height(); 
    var w = $(window).width() - facebookSelector.width(); 

    if (e.clientY && e.clientX){ 
    //Set the top based on where mouse click occured 
    facebookSelector[0].style.top = (e.clientY > h) ? h + "px" : e.clientY + "px"; 
    //Set the left based on where mouse click occured 
    facebookSelector[0].style.left = (e.clientX > w) ? winWidth-iframeWidth + "px" : e.clientX + "px"; 
    } 
} 

verbose-

$("#social-container").click(function(e){ 
    var facebookSelector = $(iframe selector here); 
    var iframeHeight = facebookSelector.height(); 
    var iframeWidth = facebookSelector.width(); 
    var winHeight = $(window).height(); 
    var winWidth = $(window).width(); 

    if (e.clientY && e.clientX){ 
    //Set the top based on where mouse click occured 
    if (e.clientY > (winHeight-iframeHeight)){ 
     facebookSelector[0].style.top = winHeight-iframeHeight + "px"; 
    } 
    else { 
     facebookSelector.style.top = e.clientY + "px"; 
    } 
    //Set the left based on where mouse click occured 
    if (e.clientX > (winWidth-iframeWidth)){ 
     facebookSelector[0].style.left = winWidth-iframeWidth + "px"; 
    } 
    else { 
     facebookSelector[0].style.left = e.clientX + "px"; 
    } 
    } 
} 

上記の例以下（実際には、またはあなたが好きな）あなたはまた、代わりにクリック位置のボタンのようにFacebookの位置を使用することができます - のようなもの。

警告と補遺：
1。あなたのiframe（または何でも）のIDがFacebookによって動的に生成され、あなたがそれを制御できない場合、これは簡単には機能しません
2. Ifボタンがiframeにあり、あなたのコンテナまでのイベントのバブリングを防ぎます。
3.この例では、現在jQueryが必要です。
4.あなたのiframeは（または何でも）それはおそらくオーバーフロー属性を持つ問題だposition: absoluteまたはposition: fixed

Answer 6

でなければなりません。 ＃社会の容器や体でこれを追加してみてください：上記の解決策の

overflow: auto; 

または

overflow: visible; 

または

overflow: scroll; 

Answer 7

どれも私のために働いていません。 1つのクイックフィックスabout facebook like button showing outside pageが見つかりました。

他の時間を節約できるといいですよ、乾杯！