Социальные сети во всплывающем окне

Question

У меня проблема с плагинами социальных сетей для моего сайта, проблема с Twitter и Facebook. Google+ работает отлично.

Я пытаюсь заставить плагины работать с моим всплывающим скриптом в jQuery. Когда они нажимают на ссылку, всплывающее окно добавляется в конце тегов тела. В этой функции я поместил JS-код Facebook, Twitter и Google+, и поместил div в правильное положение. Проблема не в том, что когда я нажимаю на всплывающее окно в первый раз (после перезагрузки страницы), все плагины работают нормально. когда я закрываю всплывающее окно и снова открываю его. Только Google+ (или Facebook с iFrame) показывает...

каждый раз, когда я открываю всплывающее окно, я называю эту часть плагинов для социальных сетей

                // 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+'&amp;send=false&amp;layout=button_count&amp;width=125&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;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('<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://www.rednasdesign.nl">Tweet</a>');

можно ли это исправить?

Answer 1

Поскольку вы вставляете код плагина каждый раз, когда открывается всплывающее окно, обязательно позвоните jQuery("#MyDiv").dialog("destroy");, Смотрите http://jqueryui.com/demos/dialog/ для получения дополнительной информации.

Также вам может понадобиться установить parsetags в explicit за https://developers.google.com/+/plugins/+1button/ и позвоните gapi.plusone.render() в открытое событие диалогового окна jQuery.

Answer 2

Проблема в коде JavaScript для асинхронной загрузки. Он может создать тег сценария вне всплывающего окна. При втором вызове он проверяет, что этот тег уже существует, и ничего не делает. Ищите 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+'&amp;send=false&amp;layout=button_count&amp;width=125&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;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"><a href="https://twitter.com/share" class="twitter-share-button" data-url="' + socialLink + '" data-text="' + message + '" data-hashtags="' + hashtag + '">Loading Twitter</a></div>'

    + '<div><a href="https://stendhalgame.org/wiki/Two_clicks_for_more_privacy" target="_blank">Two clicks for more privacy.</a></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);

Существует небольшая задержка между открытием всплывающих окон и полной загрузкой кнопок, особенно при медленном интернет-соединении. Чтобы предотвратить быстрое перемещение кнопок, я поместил их в div.elements, для которых я определил фиксированную высоту 24px в CSS.