[英]Social media's in popup
我的网站社交媒体插件有问题,问题出在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('<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://www.rednasdesign.nl">Tweet</a>');
有解决办法吗?
由于每次打开弹出窗口时都要插入插件代码,因此请确保调用jQuery("#MyDiv").dialog("destroy");
。 有关更多信息,请参见http://jqueryui.com/demos/dialog/ 。
另外,您可能需要按照https://developers.google.com/+/plugins/+1button/将parsetags
设置为explicit
,并在jQuery对话框的open事件中调用gapi.plusone.render()
。
问题出在异步加载的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+'&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"><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);
打开弹出窗口和完全加载按钮之间有一点延迟,尤其是在Internet连接速度慢的情况下。 为了防止更快的按钮跳动,我将它们放入div.elements中,并在CSS中定义了24px的固定高度。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.