使用 jQuery 的自制分享按钮

Question

解决方案

删除脚本中的评论...评论使剩余脚本成为评论的一部分。

问题

我设法创建了一个 jQuery 脚本来与一些社交媒体分享个人页面。这样做的原因是为了获得更少的 cookie，因为一些共享按钮提供商使用 cookie，而这些 cookie 可能与新的 GDPR 冲突。

下面的代码在 jsfiddle 中很有用（电子邮件部分除外），但是当我将代码上传到我的网站时，图标显示但不起作用！没有弹出 window 或其他东西。

有人可以快速查看下面的代码，看看我做错了什么吗？

下面的代码也可以在这个有效的 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/Javascript

<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>

分享按钮 "borrowed" 来自 simplesharebuttons.com

Answer 1

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

您在 jquery 加载后没有启动主函数...在您的示例代码中，您没有 $( document ).ready(function() { setShareLinks() }) 。 ..是的，JSFiddle 可以工作，但是 jsfiddle 会自动将您的 JS 代码放入 window.onload() 函数中...
simplesharebuttons.com 可能正在使用 sharethis API，这就是为什么您的 Chrome 控制台出现 "stLight is not defined" 错误。
有时这样的 share/tracking 代码与其他 JS 代码不兼容，并且 chrome 启用隐身模式的扩展...尝试禁用所有这些扩展，或在 [=29] 中重新启动您的网站=]隐身模式，或使用全新的浏览器（如便携式浏览器）
并且根据您编码 window.open 的事实，浏览器可以阻止弹出窗口（浏览器中的当前规则是 "if the popup isn't opened by a direct user action, then it's blocked"）

Answer 2

您的脚本（在网站上）被评论搞得一团糟。使用这个：

$(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);
    });
}

});

使用 jQuery 的自制分享按钮

Homemade share buttons using jQuery

javascript

jquery

share