与Pinterest的呼吁行动共享图像

本文展示了如何在图像中添加Pinterest的呼吁行动，仅在悬停在悬停上，以促进社交媒体参与度。 它强调了一种干净，用户友好的设计，并避免了不必要的依赖性。

>

关键好处：

>

• 提高Pinterest的共享和内容可见性。
• >使用HTML和CSS实现一个简单的，悬停激活的Pinterest按钮。
通过使用vanilla javascript而不是jquery（除非已经是项目的一部分），

>

为什么可共享的图像很重要：> 高质量，引人入胜的内容至关重要。 社交共享按钮可以增强此功能，从而使用户可以在Pinterest等平台上轻松共享单个元素（例如图像）。 Pinterest尤其受益于视觉上吸引人的内容。

创建对Pinterest友好的图像：

pinterest引脚URL包括：

基本URL：

1. https://www.pinterest.com/pin/create/button/：您的页面URL（url编码）。
>
2. url：image URL（url编码）。
3. media：描述性文本（编码为url，理想情况下是200个字符）。
4. description> Pinterest的JavaScript提供了额外的功能，但此方法使用最小的代码来简单。

硬编码（效率较低）方法：

> 此方法涉及为每个图像手动添加HTML：>

> css样式按钮（，

，

），将其定位并控制其在悬停在悬停上的可见性。 Pinterest徽标被嵌入为CSS中的base64编码图像。

<a href="https://www.php.cn/link/af3b0930d888e15a07a36b9987b70858" target="_blank" class="pinterest-anchor pinterest-hidden">
    <div class="pinterest-logo"></div>
</a>
<img src="" data-pin="pinIt" alt="">

>自动化（更有效）方法（使用jQuery）：pinterest-anchor> pinterest-hidden此jQuery代码动态地生成了每个图像的pinterest链接，并使用属性：pinterest-logo>

>自动化（更有效）方法（使用香草JavaScript）：

这个香草javascript等效实现相同的结果，没有jQuery：data-pin="pinIt"

$("img[data-pin='pinIt']").each(function() {
    $(this).before('<a href="https://www.php.cn/link/c84f1f1c3914a66236542d1166b01780' + encodeURIComponent($(location).attr("href")) + '&media=' + encodeURIComponent($(this).attr("src")) + '&description=' + encodeURIComponent($(this).attr("alt")) + '" target="_blank"><div class="pinterest-logo"></div></a>');
    $(this).hover(function() {
        $(this).prev().css("display", "block");
    }, function() {
        $(this).prev().css("display", "none");
    });
});

进一步的考虑：

>这种方法干净且不引人注目，但在新窗口中打开份额可能会破坏用户流程。 可以考虑弹出式替代方案。

>

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="https://www.php.cn/link/c84f1f1c3914a66236542d1166b01780' + encodeURIComponent(window.location.href) + '&media=' + encodeURIComponent(el.src) + '&description=' + encodeURIComponent(el.alt) + '" target="_blank"><div class="pinterest-logo"></div></a>');
        el.onmouseover = function(){ this.previousSibling.style.display='block'; }
        el.onmouseout = function(){ this.previousSibling.style.display='none'; }
    }
});

常见问题（常见问题解答）：

（这些是为了简短的，维持原始含义。）

• >>添加一个“ PIN IT”按钮：使用Pinterest的“开发人员”页面上的保存按钮代码。
在获取代码之前，请在Pinterest的开发人员页面上自定义大小，形状和颜色。
• >> pin上的通话：在引脚描述中包括一个召唤。
• 跟踪性能：使用Pinterest Analytics。
• >使图像更固定：使用具有描述性替代文本的高质量的相关图像。
• pinterest搜索优化：在描述和标题中使用相关的关键字和主题标签。
• 鼓励固定：添加一个清晰的“ PIN IT IT”按钮和呼叫行动。
>
• 添加一个Pinterest共享按钮：使用社交媒体按钮插件。
• >用Pinterest驱动流量：创建高质量的，引用呼叫的引脚。
• > pinterest营销：创建一个业务帐户，优化您的个人资料并使用Pinterest广告。
• >此修订后的输出保持原始含义，同时改善了清晰度和流动，适合于更专业的演示。 图像URL被保留。

以上是与Pinterest的呼吁行动共享图像的详细内容。更多信息请关注PHP中文网其他相关文章！