javascript - Facebookの送信ポップアップ位置を変更するにはどうすればよいですか？

Question

私はlikeを使用して、サイトの下部にプラグインを送信します。ただし、送信ボタンをクリックすると、ポップアップウィンドウが開き、完全に表示されません。ポップアップを上に開くにはどうすればよいですか？ただし、ボタンの位置を変更したり送信したりしないでください。ポップアップの位置のみを変更します。

Answer 1

negative marginそのため、ウィジェットのポップアップボックスが入るまで左に移動するには、左からいくつか追加する必要がありますvisible area。これをcssで使用できます：

.fb_edge_comment_widget {
    margin-left: -370px !important; //use any figure appropriate to you
}

ボタンが表示される親divにmargin-bottomを追加する必要があります。これにより、ポップアップボックスが強制的に少し左に表示され、完全に表示されます...

同様の質問へのリンクは次のとおりです: Facebook Like Widget on Fan page, Comment area out of visible area

お役に立てれば。

Answer 2

実際、それは可能です。

私たちのソリューションは、Facebook のようなダイアログを上に表示するだけでなく、完全に非同期であるため、ページをブロックせず、適切な URL エントリを自動的に作成するため、すべてのページで同じ JavaScript が使用され、更新して表示します。実際のサイズが判明して初めて、一石三鳥です。

1) すべてのページに、javascript で埋められた「空の」div を含めます。
<div id="social-media-bar"><div id="social-media"></div></div>

PS: 2 レベルの div の理由は、後でこれを google+ や twitter などに拡張するためです。

2)
LazyLoad ローダーを使用して facebook を非同期的にロードしますが、任意の方法で実行でき、必要に応じて同期も実行できます。 LazyLoad.js(('https:' == document.location.protocol ? 'https://' : 'http://') +
'connect.facebook.net/en_US/all.js');

3) facebook の init では
、 - 専用の div を埋めます -
挿入されたタグを解析するように fb に依頼します
- 解析後にタイムアウトを使用して、表示が更新され、幅と高さが正しいことを確認します。

window.fbAsyncInit = function() { 
        var d = document,n,nn,url,url_ref,i;`

        // due to bug in facebook need to delay the actual access to data after parse
        function FBUpdateSize(){
            var h,str;
            // show facebook entry using actual element size
            h = nn.firstChild.clientHeight;
            str = h+'px';
            nn.style.height= str;
            n.style.height= str;
            n.style.overflow='visible';
        }

        FB.init({   channelUrl : 'http://www.plixo.com.sg/channel.html',
                    //appId : '228760567272221', 
                    status     : false,
                    xfbml      : false}); 

        // create facebook entries in the DOM
        n = d.getElementById('social-media');
        url = d.URL;
        i = url.lastIndexOf('/')+1;
        url_ref = url.slice(i,url.indexOf('.',i));
        nn = d.createElement('fb-like');
        nn.innerHTML = '<div id="fb_like_bottom"><fb:like href="' + url + '" ref="' + url_ref + '" send="false" layout="standard" width="360px" show_faces="false"></fb:like></div>';
        nn = n.appendChild(nn);

        // call facebook to fill DOM entries
        // use a timeout in callback to ensure browser has refreshed internal clientHeight
        FB.XFBML.parse(nn,function(){setTimeout(FBUpdateSize,50)});
    };`

4) ダイアログを再配置するための 3 つの専用 CSS スタイルのみ:
#social-media{position:relative;display:block;width:auto;z-index:200;overflow:hidden;height:0;background-color:#f2f2f2;border:1px solid #bdc7d8}
#fb_like_bottom{padding:4px;position:absolute}
#fb_like_bottom .fb_iframe_widget_lift{bottom:0;background-color:#f2f2f2;border:1px solid #bdc7d8!important;margin:-5px;padding:4px}

http://www.plixo.com.sg/large-format-printing-services.htmlなど、当社の Web サイトのページで例を確認できます。

自由に再利用/変更などを行ってください。私たちのページのいずれかにリンクしていただければ幸いです ;-)