Pinterestの行動を促す声で画像を共有します

この記事では、ソーシャルメディアのエンゲージメントを高めるために、ホバーにのみ表示される画像にPinterestのアクションの呼び出しを追加する方法を示しています。 クリーンでユーザーフレンドリーなデザインを強調し、不必要な依存関係を回避します。

主要な利点：

Pinterestの株式とコンテンツの可視性を増やします
• HTMLとCSSを使用して、シンプルでホバー活性化されたPinterestボタンを実装します。
jQueryの代わりにVanilla JavaScriptを使用してコードを合理化します（プロジェクトの一部を既にない限り）。
• なぜ共有可能な画像が重要なのか：

高品質で魅力的なコンテンツが重要です。 ソーシャル共有ボタンはこれを強化し、ユーザーはPinterestなどのプラットフォームで個々の要素（画像など）を簡単に共有できます。 特にPinterestは、視覚的に魅力的なコンテンツの恩恵を受けています Pinterestフレンドリーな画像の作成：

Pinterest Pin URLは次のとおりです

base url：

：ページurl（url-encoded）。

1. https://www.pinterest.com/pin/create/button/：Image url（url-encoded）。
2. url：記述テキスト（urlエンコード、理想的には200文字未満）。
3. mediaPinterestのJavaScriptは追加機能を提供していますが、このアプローチは簡単にするために最小限のコードを使用しています。
4. ハードコーディングされた（効率が低い）方法：description

この方法では、各画像にHTMLを手動で追加することが含まれます

cssはボタン（

、、）をスタイリングし、それを配置し、ホバーでの可視性を制御します。 Pinterestロゴは、CSS内のbase64エンコード画像として埋め込まれています。

自動化された（より効率的な）方法（jQueryを使用）：

<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リンクを動的に生成しますpinterest-anchor属性：pinterest-hidden 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");
    });
});

さらなる考慮事項：

このアプローチはクリーンで控えめですが、新しいウィンドウで共有を開くと、ユーザーのフローが混乱する可能性があります。 ポップアップの代替品を考慮することができます

よくある質問（FAQ）：

（これらは簡潔さのために要約され、元の意味を維持します。）

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'; }
    }
});

• 「ピンIT」ボタンの追加： Pinterestの[開発者]ページから[保存]ボタンコードを使用します。
• ボタンのカスタマイズ：コードを取得する前に、Pinterestの開発者ページでサイズ、形状、色をカスタマイズします。 ピンでのアクションへの呼びかけ：アクションをピンの説明に含める。
• トラッキングパフォーマンス：Pinterest Analyticsを使用してください
• 画像をより固定可能にする：説明的なALTテキストを使用して高品質の関連画像を使用します。
pinterest検索最適化：
• 説明とタイトルで関連するキーワードとハッシュタグを使用します。 励ましのピン留め：
クリア「ピン」ボタンとアクションを促す
• を追加します。 pinterestの追加ボタンの追加：
ソーシャルメディアボタンプラグインを使用します。
• Pinterestを使用したトラフィックの駆動：アクションを呼び出すために高品質で魅力的なピンを作成します。
• pinterestマーケティング：ビジネスアカウントを作成し、プロフィールを最適化し、Pinterest広告を使用します。
この改訂された出力は、より専門的なプレゼンテーションに適した、明確さと流れを改善しながら、元の意味を維持します。 画像URLは保存されています

以上がPinterestの行動を促す声で画像を共有しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。