ソーシャルメディアのポップアップ

Question

ソーシャルメディアのポップアップ

私は私のウェブサイトのためのソーシャルメディアのプラグインに問題があります、問題はTwitterとFacebookにあります。 Google+は完全に機能します。

私はプラグインをjQueryのポップアップスクリプトで動作させようとしています。リンクをクリックすると、bodyタグの最後にポップアップが追加されます。この機能では、Facebook、Twitter、およびGoogle+のJSコードを入力し、divの場所を適切な位置に置くようにしました。問題はありません。最初にポップアップをクリックすると（ページをリロードした後）、すべてのプラグインが正常に動作しています。私はポップアップを閉じて、それを再び開く。 Google+（またはiFrameを搭載したFacebook）のみが表示されます...

私が呼び出すソーシャルメディアプラグインのこの部分をポップアップするたびに！

               //Google Code
                (function() {
                    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
                    po.src = 'https://apis.google.com/js/plusone.js';
                    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
                })();
               //Twitter Code
                !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");

                if(options.socialLink != false){
                    var FBsocialLink = 'href='+options.socialLink;
                    var socialLink = 'data-href="'+options.socialLink+'"';
                }
                //show FB
                $('.popup_container').append('<iframe src="//www.facebook.com/plugins/like.php?'+FBsocialLink+'&send=false&layout=button_count&width=125&show_faces=false&action=like&colorscheme=light&font&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:125px; height:21px;" allowTransparency="true"></iframe>');
                //show Google+
                $('.popup_container').append('<div class="g-plusone" data-size="medium" '+socialLink+'></div>');
                //show Twitter
                $('.popup_container').append('Tweet');

これのための修正はありますか？

1

追加された 06 2月 2012 〜で 10:04 著者 Rednas 編集された 06 2月 2012 〜で 05:10

ビュー: 4

源

ru fr es pt de ar

2 答え

著者 DMCS · Answer 1 · 2012-02-06T05:00Z

ポップアップが開くたびにプラグインコードを挿入するので、 jQuery（ "＃MyDiv"）。dialog（ "destroy"）; を必ず呼び出してください。詳細については、 http://jqueryui.com/demos/dialog/ を参照してください。

また、 parsetags を explicit に設定する必要があります。 "nofollow"> https://developers.google.com/+/plugins/+1button/ を開き、jQueryダイアログのopenイベントで gapi.plusone.render（）を呼び出します。

著者 Hendrik Brummermann · Answer 2 · 2012-02-19T03:20Z

問題は、非同期読み込み用のJavaScriptコードです。ポップアップウィンドウの外にスクリプトタグを作成することがあります。 2回目の呼び出しでは、このタグがすでに存在し、何もしていないことを確認します。 if（！d.getElementById（id））の部分を探します。

しかし、あなたの場合、ユーザーがポップアップを開いたときにページが既に完全に読み込まれているため、非同期ローダーは意味を持ちません。

したがって、外部スクリプトを直接含めることができます。ポップアップが再び表示されると、そのスクリプトタグを含む完全なコンテンツが消去されます。

var socialLink = e.attr("data-link");
var message = e.attr("data-title");
var hashtag = e.attr("data-hashtag");

var html = ''
    + '<div class="socialbutton"><iframe src="https://www.facebook.com/plugins/like.php?href='+socialLink+'&send=false&layout=button_count&width=125&show_faces=false&action=like&colorscheme=light&font&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:125px; height:21px;" allowTransparency="true">Loading Facebook</iframe></div>'
    + '<div class="socialbutton"><div class="g-plusone" data-size="medium" data-href="'+socialLink+'">Loading Google+</div></div>'
    + '<div class="socialbutton">Loading Twitter</div>'

    + '<div>Two clicks for more privacy.</div>'

    + '<script async type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>'
    + '<script async type="text/javascript" src="https://platform.twitter.com/widgets.js" id="twitter-wjs"></script>';

$('#popupContent').html(html);

特に遅いインターネット接続では、ポップアップウィンドウを開くとボタンが完全に読み込まれるまでに少し時間がかかります。より速いボタンがジャンプするのを防ぐために、CSSで24pxの固定高さを定義してdiv.elementsに入れました。