Социальные медиа в popup

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.