下記ページを解説しています。
Pinterest Developers Save button
サイトの画像すべてに保存ボタンを表示させる
基本のコードと表示例
画像の上に保存ボタンを表示させるには、以下のコードを表示させたいページに入れます。
<script
type="text/javascript"
async defer
src="//assets.pinterest.com/js/pinit.js"
data-pin-hover="true">
</script>- type=”text/javascrip”
- ここで書いているスクリプトはjavascriptですよ。という宣言。HTML5では省略可能。
- async defer
- JSファイルの読み込みと実行のタイミングを調整するために使う属性。
適切に使うことでWebページの読み込みスピードの改善に寄与する。
詳細は割愛するが、async と defer はそれぞれ異なる動きをする。両方指定した場合、デフォルトはasyncでasyncに対応していないブラウザのみdeferのタイミングになる（情報のソース）。
async属性を指定したスクリプトは、ページのレンダリングをブロックせずに実行されるためスクリプトがDOMの特定の部分に依存している場合、その部分がまだ読み込まれていないとエラーが発生する可能性がある。そのため、DOMに依存するスクリプトを非同期に実行する場合は、そのスクリプトを<body>タグの終了直前に配置することが一般的。 - src=”//assets.pinterest.com/js/pinit.js”
- 保存ボタンを表示するスクリプトの本体。
Cocoonの場合、以下の設定をするとすべてのページに上記コードが挿入されます。
- 「Cocoon設定」⇒「アクセス解析・認証」⇒「フッター用コード」 に入れればOK。
- 「テーマの編集」 ⇒ 「Cocoon Child」 ⇒ 「tmp-user\footer-insert.php」 から入れても可。
「Cocoon設定」から実施するほうが簡単です。
Cocoon設定の例↓
保存時にエラーになったら、レンタルサーバのWAF機能をOFFにしましょう（保存後はONに戻すこと）
「data-pin-hover=”true」は無くても大丈夫なはずですが、入れておいた方が確実に動きました。
上のコードを入れると、画像をマウスオーバーした際に画像左上に保存ボタンが表示されるようになります。
※WordPressにログインした状態だと表示されないことがあります。その場合は、シークレットウインドウなどを使用して、ログインしていない状態で確認してください。
ボタンのバリエーション
ボタンを丸ボタンにする場合
ページ上のすべての画像の表示させるボタンを丸ボタンにしたい場合は、
- data-pin-round=”true”
を追加します。
<script
type="text/javascript"
async defer
src="//assets.pinterest.com/js/pinit.js"
data-pin-hover="true"
data-pin-round="true">
</script>以下のようなシンプルな表示のボタンになります。
ボタンを大きくする場合（四角）
ページ上のすべての画像の表示させるボタンを丸ボタンにしたい場合は、
- data-pin-tall=”true”
を追加します。
<script
type="text/javascript"
async defer
src="//assets.pinterest.com/js/pinit.js"
data-pin-hover="true"
data-pin-tall="true">
</script>
ボタンを大きくする場合（丸）
ページ上のすべての画像の表示させるボタンを大きな丸ボタンにしたい場合は、
- data-pin-tall=”true”
- data-pin-round=”true”
を追加します。
<script
type="text/javascript"
async defer
src="//assets.pinterest.com/js/pinit.js"
data-pin-hover="true"
data-pin-tall="true"
data-pin-round="true">
</script>
Pinterest 保存ボタンのみを個別に表示させるHTMLコード例
保存ボタンのみをページ上の表示させるためのコード集です。
特徴は「buttonBookmark」属性を使える点です。
この機能を使用する場合は、「サイトの画像すべてに保存ボタンを表示させる」設定はしないでください。
基本情報
以下のアンカータグ（リンク）に、属性を追加していきます。
<a href="https://www.pinterest.com/pin/create/button/" > </a>data-pin-do属性
| 値 | 意味 |
|---|---|
| buttonBookmark | クリックすると、ページ上のすべての画像が表示されているフォーム(image picker form)が表示される。そこからユーザーは任意の画像を選択できる。 data-pin-do属性を省略すると、buttonBookmarkが選ばれている状態になる。 |
| buttonPin | 1つの画像を指定でき、クリックすると直接ピン作成フォームに移動する。 同時にmedia属性を使用して画像のURLを指定する必要がある。 他のオプションとしては、PinのURLを指定するurl属性と、Pinの説明を指定するdiscription属性がある。 |
buttonBookmarkの例
クリックすると、ページ上の任意の画像を保存できるフォーム（image picker form）を表示します。
<a href="https://www.pinterest.com/pin/create/button/" data-pin-do="buttonBookmark"> </a>↓こうなります：保存ボタンをクリックしてみてください。
または
<a href="https://www.pinterest.com/pin/create/button/"> </a>↓こうなります：（上と同じ）
data-pin-do は、指定しなければ buttonBookmark を指定したのと同じ意味になるため、省略可能です。
buttonPinの例
<a
data-pin-do="buttonPin"
href="https://www.pinterest.com/pin/create/button/?url=https://tekuteku-ryoiku.com/ikuta-ryokuchi/&media=https://tekuteku-ryoiku.com/wp-content/uploads/2023/08/20230803161633_p505-768x576.jpg&description=生田緑地のメガスタースリーはかっこいい！" >
</a>href=”https://www.pinterest.com/pin/create/button/?
のあとに
url=（PinのURL）&
media=（画像のURL）&
discription=（PINの説明 ） “
を追加します。
media は必須ですが、urlとdiscription は省略可能。
PINの説明以外は、 & や ” も含めてすべて半角文字を使用します。
説明上3行にしていますが、改行やスペースは入れないで下さい。
↓こうなります：↓保存ボタンをクリックしてみてください。
記事が既にPinとして登録されているせいか、discriptionは反映されませんでした。
ボタンの見た目を変える
丸い保存ボタン
丸い保存ボタン にするには
- data-pin-shape=”round”
を追加します。
<a
href="https://www.pinterest.com/pin/create/button/"
data-pin-shape="round"
> </a>↓こうなります：
丸いボタン（data-pin-round)を使うと、後述する「ピン数の表示機能」は無効になります。
大きな保存ボタン（四角）
大きな保存ボタン（四角）にするには
- data-pin-tall=”true”
を追加します
<a
data-pin-tall="true"
href="https://www.pinterest.com/pin/create/button/"
>
</a>↓こうなります：
「data-pin-save=”false”」を追加すると、ボタンが古い スタイルになります（非推奨）。
<a
data-pin-tall="true"
data-pin-save="false"
href="https://www.pinterest.com/pin/create/button/"
>
</a>↓こうなります：
大きな保存ボタン（丸）
大きな保存ボタン（丸）にするには
- data-pin-round=”true”
- data-pin-tall=”true”
を追加します。
<a
data-pin-round="true"
data-pin-tall="true"
href="https://www.pinterest.com/pin/create/button/">
</a>↓こうなります：
ピン数を上に表示
ピン数を上に表示するには、
- data-pin-count=”above”
を追加します。
data-pin-do=”buttonPin” のみ対応です。
<a
data-pin-do="buttonPin"
data-pin-count="above"
data-pin-save="true"
href="https://www.pinterest.com/pin/create/button/?url=http://www.foodiecrush.com/2014/03/filet-mignon-with-porcini-mushroom-compound-butter/&media=https://i.pinimg.com/736x/17/34/8e/17348e163a3212c06e61c41c4b22b87a.jpg&description=So%20delicious!"
>
</a>↓こうなります：
ピン数を横に表示
ピン数を横に表示するには
- data-pin-count=”beside”
を追加します。
data-pin-do=”buttonPin”のみ対応です。
<a
data-pin-do="buttonPin"
data-pin-count="beside"
data-pin-save="true"
href="https://www.pinterest.com/pin/create/button/?url=http://www.foodiecrush.com/2014/03/filet-mignon-with-porcini-mushroom-compound-butter/&media=https://i.pinimg.com/736x/17/34/8e/17348e163a3212c06e61c41c4b22b87a.jpg&description=So%20delicious!"
>
</a>↓こうなります：
保存ボタンのカスタマイズ
保存ボタンを好きな画像に差し替えるには
- data-pin-custom=”true”
を追加します。
好きな画像にできますが、差し替えられますが、作成する画像はPinterestのブランドガイドラインに従う必要がありそうです（以下はあくまで例です）。
<a
data-pin-do="buttonPin"
data-pin-count="beside"
data-pin-custom="true"
data-pin-save="false"
href="https://www.pinterest.com/pin/create/button/?url=http://www.foodiecrush.com/2014/03/filet-mignon-with-porcini-mushroom-compound-butter/&media=https://i.pinimg.com/736x/17/34/8e/17348e163a3212c06e61c41c4b22b87a.jpg&description=So%20delicious!"
>
<img
src=http://cocoon.tekuteku-shoji.com/wp-content/uploads/2023/07/click-here.png"
width="50"
height="50"
>
</a>↓こうなります：
カスタムボタン（data-pin-custom)では、「ピン数の表示機能」は無効になります。