使用jQuery的自制共享按钮

时间:2018-07-02 21:50:32

标签: javascript jquery share

解决方案

删除脚本中的注释...注释使其余脚本成为注释的一部分。

问题

我设法创建了一个jQuery脚本,以将各个页面共享给一些社交媒体。这样做的原因是因为某些共享按钮提供者使用cookie会减少cookie,而这些cookie可能与新的GDPR冲突。

下面的代码在jsfiddle中(电子邮件部分除外)非常有用,但是当我将代码上传到我的网站时,图标显示出来了,但是不起作用!没有弹出窗口或其他内容。

有人可以在下面快速浏览一下我的代码,看看我做错了什么吗?

下面的代码也可以在这个工作的jsfiddle中找到: jsfiddle

HTML

<div id="share-buttons">
  <span class="social-share facebook" style="cursor: pointer;"><img src="https://simplesharebuttons.com/images/somacro/facebook.png" alt="Facebook" /></span>
  <span class="social-share twitter" style="cursor: pointer;"><img src="https://simplesharebuttons.com/images/somacro/twitter.png" alt="Twitter" /></span>
  <span style="cursor: pointer;"><a href="javascript:;" onclick="window.print()"><img src="https://simplesharebuttons.com/images/somacro/print.png" alt="Print" /></a></span>
  <span class="social-share email" style="cursor: pointer;"><img src="https://simplesharebuttons.com/images/somacro/email.png" alt="Email" /></span>
</div>

jQuery / Java

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function() {
setShareLinks();

function socialWindow(url) {
  var left = (screen.width - 570) / 2;
  var top = (screen.height - 570) / 2;
  var params = "menubar=no,toolbar=no,status=no,width=570,height=570,top=" + top + ",left=" + left;
  // params = "";
  window.open(url,"NewWindow",params);
}

function setShareLinks() {
  var pageUrl = encodeURIComponent(document.URL);
  var tweet = encodeURIComponent($("meta[property='og:description']").attr("content"));

  $(".social-share.facebook").on("click", function() {
    url = "https://www.facebook.com/sharer.php?u=" + pageUrl;
    socialWindow(url);
  });

  $(".social-share.twitter").on("click", function() {
    url = "https://twitter.com/intent/tweet?url=" + pageUrl + "&text=" + tweet;
    socialWindow(url);
  });

  $(".social-share.email").on("click", function() {
    url = "mailto:?Subject=" + tweet + "&amp;Body=" + pageUrl;
    socialWindow(url);
  });

}
});
</script> 

共享按钮是从simplesharebuttons.com“借来的”

2 个答案:

答案 0 :(得分:1)

您的问题可能有多种原因:

  • 在加载jquery之后,您不会启动主函数...在示例代码中,您没有$(document).ready(function(){setShareLinks()})...是的,JSFiddle可以工作,但是jsfiddle会自动将您的JS代码放入window.onload()函数中...
  • simplesharebuttons.com可能正在使用sharethis API,这就是为什么您的Chrome控制台中出现“未定义stLight”错误的原因。
  • 有时使用此类共享/跟踪代码,您与其他JS代码不兼容,并且启用了隐身模式的Chrome扩展程序...尝试禁用所有这些扩展名,或尝试以Chrome隐身模式重新启动您的网站,或使用全新的浏览器(例如便携式浏览器)
  • 根据您对window.open进行编码的事实,浏览器可能会阻止弹出窗口(浏览器中的当前规则是“如果未通过直接用户操作打开弹出窗口,则该弹出窗口将被阻止”)< / li>

答案 1 :(得分:1)

您的脚本(在网站上)被注释弄乱了。使用这个:

$(document).ready(function() {

setShareLinks();

function socialWindow(url) {
    var left = (screen.width - 570) / 2;
    var top = (screen.height - 570) / 2;
    var params = "menubar=no,toolbar=no,status=no,width=570,height=570,top=" + top + ",left=" + left;
    window.open(url, "NewWindow", params);
}

function setShareLinks() {
    var pageUrl = encodeURIComponent(document.URL);
    var tweet = encodeURIComponent($("meta[property='og:description']").attr("content"));
    $(".social-share.facebook").on("click", function() {
        url = "https://www.facebook.com/sharer.php?u=" + pageUrl;
        socialWindow(url);
    });
    $(".social-share.twitter").on("click", function() {
        url = "https://twitter.com/intent/tweet?url=" + pageUrl + "&text=" + tweet;
        socialWindow(url);
    });
    $(".social-share.email").on("click", function() {
        url = "mailto:?Subject=" + tweet + "&amp;Body=" + pageurl;
        socialWindow(url);
    });
}

});