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

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

Проблема в коде JavaScript для асинхронной загрузки.Он может создать тег сценария вне всплывающего окна.При втором вызове он проверяет, что этот тег уже существует, и ничего не делает.Ищите if(!d.getElementById(id)) part.

В вашем случае, однако, асинхронный загрузчик в любом случае не имеет смысла, так как страница уже полностью загружена, когда пользователь открывает всплывающее окно.

Поэтому вы можете включить внешние скрипты напрямую.Когда всплывающее окно отображается снова, весь контент будет очищен, включая теги сценариев.

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.

Answer 2

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

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