使用 jQuery 的自制共享按钮

SOLUTION

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

问题

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

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

someome 可以快速浏览一下下面的代码，看看我做错了什么吗？

下面的代码也可以在这个工作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>

共享按钮是从 simplesharebuttons.com"借来的">

您的脚本(在网站上(被评论搞砸了。使用这个：

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

相关内容

最新更新

热门标签：