與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中文網其他相關文章！