动态更改 Pin It (Pinterest) 按钮的 thr URL

Posted

技术标签:

【中文标题】动态更改 Pin It (Pinterest) 按钮的 thr URL【英文标题】:Dynamically change thr URL of the Pin It (Pinterest) button 【发布时间】:2013-09-12 12:52:25 【问题描述】:

我目前正在尝试将社交网络的按钮添加到我的网站,但我遇到了来自 Pintesrest 的 Pin It 按钮问题。我想动态更改 pin 的 URL,但不幸的是,它似乎不起作用。我是不是做错了什么?

<script type="text/javascript">
    var urlpin = document.location.href;

    function buildPinUrl(urlpin, urlmedia, description) 
       return '//pinterest.com/pin/create/button/?'+
                'url='+encodeURIComponent(urlpin)+
                '&media='+encodeURIComponent(urlmedia)+
                '&description='+encodeURIComponent(description);
        

    $(document).ready(function()
        var urlmedia = $("#stamp1").attr("src");
        var description = $("#title").text();
        var goodurl = buildPinUrl(urlpin, urlmedia, description);

        $('#pinbtn').attr('href', goodurl);

    );

</script>

这里是按钮:

<!-- Pin It Button --><a id="pinbtn" href="//pinterest.com/pin/create/button/?url=http%3A%2F%2Fcollectionnies.com&media=http%3A%2F%2Fcollectionnies.com&description=Next%20stop%3A%20Collectionnies" data-pin-do="buttonPin" data-pin-config="beside"><img src="//assets.pinterest.com/images/pidgets/pin_it_button.png" /></a><!-- Pin It Button -->

感谢您的帮助。

【问题讨论】:

【参考方案1】:

使用 jQuery 1.6+(直到边缘),这工作正常:

http://jsfiddle.net/mmKcR/

检查以确保在此代码出现在 html 中之前加载了 jQuery。还要确保你没有在 noConflict 模式下加载 jQuery,因为这会破坏 $ 的使用。

如果您仍然失败,请使用 Chrome/Firefox 检查器查看任何控制台错误。

如果您看到如下错误:

Uncaught ReferenceError: $ is not defined 

上述两个问题之一有问题。

【讨论】:

我正在使用 jquery-1.9.1.js 它是在开始的正文标记之后加载的而且我没有任何错误。我在 Mozilla Firefox 上运行。我真的不知道我哪里出错了,特别是如果你让它在 jsFiddle 中工作:/ 无论如何它在 jquery-1.9.1 中运行良好。见小提琴:jsfiddle.net/HbmTs/1 Pinterest 希望我添加到我的网站的 JS 阻止了 url 更改!感谢您的帮助! 没问题。请记住,检查器应该是所有 JavaScript 相关问题的第一站。如果您无法通过查看控制台找到明确的解释/解决方案(实际上,大约 75% 的时间您会在这里找到答案),它至少会为您提供可靠的错误和信息,以便在 SO 上显示以获得帮助很快。

以上是关于动态更改 Pin It (Pinterest) 按钮的 thr URL的主要内容,如果未能解决你的问题,请参考以下文章

html Pin It Hover Button #pinterest

将 Pin it 按钮放置在 Pinterest 插件的图像顶部

如何使用 iOS Pin It SDK 在 Pinterest 中实现 Followboard 按钮功能?

Pinterest 上的 Pin 图链接到 404 - 但链接有效

Pinterest 嵌入图像不显示

PHP中的API Pinterest - 登录失败