通过Pinterest号召性用语分享图片

最新推荐文章于 2021-05-29 13:53:25 发布

dingshi7798

最新推荐文章于 2021-05-29 13:53:25 发布

阅读量2k

点赞数

文章标签： javascript ViewUI

本文介绍了一种简单方法，在图片上添加Pinterest号召性用语，无需复杂的HTML代码或额外的库。通过使用JavaScript和jQuery，可以在用户与图片互动时在图片上方添加共享按钮，提升内容的社交分享率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在本文中，我将演示如何在用户积极与图片互动时在图片上方添加Pinterest号召性用语。

首先，让我们看一下您为什么还要这么做。

悬停时出现带有Pinterest分享按钮的茶壶的图片

构成优质内容的内容通常在很大程度上取决于最终用户的特定需求和兴趣。好的内容可能具有吸引力，有效，简单，功能性，信息性，启发性……等等。

我们习惯于添加社交网络按钮或链接以共享页面（最好是通过无脂肪按钮）。 Facebook，Twitter和Google+通常是主要的必备条件。

我们可能还希望用户能够共享页面的某些部分 。页面内容通常由大块组成，并且每个大块都可以提供其自己的首选社交网络共享功能。

例如，报价可以针对Twitter的140个字符的限制，而图片可以针对Pinterest。

让我们看看如何设置要在Pinterest上共享的图像。

固定网址的剖析

Pinterest Pin URL由四个部分组成：

URL的Pinterest部分： https://www.pinterest.com/pin/create/button/ : https://www.pinterest.com/pin/create/button/
url参数：要链接到的页面的地址，URL编码
media参数：要共享的图片的地址，URL编码
description参数：Pinterest上显示的描述性文本，URL编码，最多500个字符，但200个字符似乎是最佳选择。

如果您添加Pinterest自己的JavaScript，则可以添加一些HTML数据元素，尤其是data-pin-do和data-pin-config ，但是在这种情况下将不需要它，因为这是我们所依赖的一种无负担的方法严格的最小代码量。

硬编码方式

我们要获取的代码如下所示：

<a href="http://www.pinterest.com/pin/create/button/?url=<page url (encoded)>&media=<picture url (encoded)>&description=<HTML-encoded description>" target="_blank" class="pinterest-anchor pinterest-hidden">
    <div class="pinterest-logo"> </div>
</a>
<img src="<picture url>" data-pin="pinIt" alt="<description>">

每张可截取的图片（标记有data-pin属性pinIt ）都在Pinterest共享页面的前缀处添加前缀，并在其URL中具有正确的属性，并嵌入div以显示徽标。

这里使用了三个CSS类： pinterest-anchor ，它绝对将Pinterest徽标位置设置在图片的左上角； pinterest-hidden ，设置徽标的可见性状态，以及pinterest-logo ，徽标本身为40×40像素，在CSS中以base64编码。

.pinterest-anchor {
    margin-left:10px;
    margin-top:10px;
    position:absolute;
    z-index:42;
    width:40px;
    height:40px;
}
.pinterest-hidden {
    display:none;
}
.pinterest-anchor:hover {
    display:block !important;
}
.pinterest-logo {
    background: url("data:image/png;base64,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") no-repeat center center;
    background-size: 40px 40px;
    height: 100%;
    width: 100%;
}

动画部分（在图片悬停时显示和隐藏徽标）在JavaScript中使用jQuery表示法处理：

$("img[data-pin='pinIt']").each(function() {
    $(this).hover(function() {
        $(this).prev().css("display", "block")
    }, function() {
        $(this).prev().css("display", "none")
    });
});

自动化是您的朋友

但是我不想用在可汗图片前面加上特定的HTML来夸大我的内容代码。如果必须进行任何更改，仅维护方面便会产生一些成本–例如Pinterest共享URL，参数以及对其他社交网络的支持。

由于JavaScript已用于处理鼠标的交互，因此，我们进一步走一步，为页面上的任何图像生成该代码。

再次使用jQuery，我们得到：

$("img[data-pin='pinIt']").each(function() {
    $(this).before('<a href="http://www.pinterest.com/pin/create/button/?url=' + encodeURIComponent($(location).attr("href")) + '&media=' + encodeURIComponent($(this).attr("src")) + '&description=' + encodeURIComponent($(this).attr("alt")) + '" target="_blank" class="pinterest-anchor pinterest-hidden"><div class="pinterest-logo"> </div></a>');
    $(this).hover(function() {
        $(this).prev().css("display", "block")
    }, function() {
        $(this).prev().css("display", "none")
    });
});

对于data-pin属性设置为pinIt每个图像，我们为其添加前缀前缀，直接从页面location属性获取页面URL，从图像href获取图片URL，并从其alt文本获取描述，同时正确编码URI组件。

在下面的CodePen中对此进行了演示

请参阅CodePen上的SitePoint （ @SitePoint ）的Pen Pinterest Pin-it号召性用语（ jQuery）。

但是我们需要jQuery吗？

事实是，可能不需要jQuery 。如果您真的不需要它，可以使用普通的老式JavaScript来完成。实际上，我认为将jQuery代码块不时转换为常规JavaScript是一个很好的练习。这提醒人们一切都在幕后。

var pinables = document.querySelectorAll('img');

Array.prototype.forEach.call(pinables, function(el, i){
    data = el.dataset;
    if (data.pin=='pinIt') {
        el.insertAdjacentHTML('beforebegin', '<a href="http://www.pinterest.com/pin/create/button/?url=' + encodeURIComponent(window.location.href) + '&media=' + encodeURIComponent(el.src) + '&description=' + encodeURIComponent(el.alt) + '" target="_blank" class="pinterest-anchor pinterest-hidden"><div class="pinterest-logo"> </div></a>');
        el.onmouseover = function(){ this.previousSibling.style.display='block'; }
        el.onmouseout = function(){ this.previousSibling.style.display='none'; }
    }
});

图像选择器– $("img[data-pin='pinIt']").each –现在是我们检查数据属性值的所有图像的数组。其余代码是jQuery实现的直接翻译。

如您在这支笔中所见，它的工作原理完全相同。

请参阅CodePen上的SitePoint （ @SitePoint ）的Pen Pinterest Pin-it号召性用语（ javascript）。