オカンTECH

全国のオカンのITリテラシーを底上げだ!

f:id:beaber:20211122011912p:plain
 音楽聞き放題の無料体験もう試した?

【SNS連携】はてなブログの画像にピンタレストの保存ボタンを表示する方法

 


f:id:beaber:20210628164354p:plain













はてなブログでもWordPressみたいにPinterestの保存ボタンを設置できるのかしら?

f:id:beaber:20210628164402p:plain







公式のウィジェットを使うことで簡単に実現できるよ。Pinterestを利用中のピナーには必須の設定だよ。

 

このページでは「はてなブログでピンタレストの保存ボタンを表示する方法」を中心に紹介。

記事後半ではおまけにピンタレストへのリンクを貼る方法を説明していきます。

 

 

教えるのはこんな人
 

f:id:beaber:20211128071130p:plain

おかぺー(@DemoOkan)

 

この記事をおすすめしたい人
  • ピンタレストを伸ばしたいはてなブロガー
  • ブログに多くの画像を使っている
  • ときどきピンタレストのことを思い出したい

 

f:id:beaber:20211117154746p:plain

 

はじめに

このブログのコンセプトはオカンに伝わるITブログです。

 

そのため、専門用語など難しい言葉は最大限排除して紹介していきます。それでも分からない表現があれば、問合せフォームかTwitterよりご質問ください。

 

f:id:beaber:20210628164407p:plain







Twitter、コメント欄で感想などいただけると泣いて喜びます!

完成イメージ(スマホ/パソコン)

 

「はてなブログでピンタレストの保存ボタンを表示する」

 

ページ内の画像にピンタレストの保存ボタンを表示させます。

パソコン版は画像をドラッグしたら(なぞったら)、スマホ版は画像を表示したらピンタレストの保存ボタンが現れるようにします。

 

 

スマホ表示だと以下のようなイメージです。画像の左上に「p」のマークが表示されます。

 

f:id:beaber:20211217002150p:plain

図:pマークイメージ(スマホ表示)

 

 

パソコンだと以下のようなイメージです。スマホと同じく左上に「p」が表示されます。

 

f:id:beaber:20211217002204p:plain

図:pマークイメージ(PC表示)

 

 

今回はこの保存ボタンの表示方法を紹介します。

 

 

ピンタレストの保存ボタンを表示する手順

※この先の手順はパソコンで操作してください。

STEP
ウィジェットビルダーを開く
Pinterestのウィジェットビルダーにアクセスする。

https://developers.pinterest.com/tools/widget-builder/?

 

STEP
各項目を選択する
[保存]ボタン、ボタンの種類:画像にホバーした時、「円形」、「大」を選択する。

f:id:beaber:20211215004017p:plain

STEP
表示確認
それぞれの項目を選択した後の画面は以下の通り。

f:id:beaber:20211215004153p:plain

STEP
コードをコピーする
右下に表示されているコードをコピーする。

f:id:beaber:20211215010914p:plain

STEP
はてなブログの詳細設定画面を開く
「詳細設定」を押す。

f:id:beaber:20211125002922p:plain

STEP
テキストボックスを選択する
下の方へ行き、「<head>要素にメタデータを追加」を押す。

f:id:beaber:20211125002955p:plain

STEP
コードを入力する
先ほどコピーしたPinerestのコードを貼り付ける。

 

STEP
変更内容を保存
一番下へ行き、「変更する」を押す。

f:id:beaber:20211125003203p:plain

STEP
表示確認
ブログを開き、画像をドラッグした時にpマークが表示されることを確認する。手順は以上です。お疲れさまでした。

f:id:beaber:20211215010313p:plain

 

 

ピンタレストへのリンクをプロフィールに貼るおすすめの方法

はてなブログのSNSリンク機能はピンタレストに対応していません。

そのため、オリジナルのプロフィール欄を作り込む必要があります。

 

f:id:beaber:20211217002707p:plain

図:Pinterestのリンク機能がない

 

はてなブログのプロフィール欄の作り込みはやってみるとわかりますが、結構面倒です。

SNSのフォローページのURLを取得して、リンクを貼って、次のSNSを開いて、、といったりきたりが多いです。

 

そこでおすすめなのがフジブロっ!さん作のフォローボタン作成フォームです。

そのまんまはてなブログの管理画面にあっても違和感がないような使い勝手で 簡単にプロフィールページが作れます。

 

まとめ

おしゃれはコピペで作れます。笑

はてなブログでもPinterestと連携をとり、相互のページの行き来が可能となります。

 

Pinterestを眺めていると意外とはてなブログのピンも投稿されているので、需要はあると思います。

 

最後に関連記事のご紹介。はてなブログでも少しは稼げるんだよ

といった記事です。

 

www.okan-tech.com

 

 

最後までありがとうございました。

 

 

オカンTECH

全国のオカンのITリテラシーを向上だ!

プライバシーポリシー
広告関係のお問合せはこちら

©️ 2021 オカンTECH Powered by Hatena Blog