オカンTECHロゴ
iPadほしい人!買う前に絶対見てほしい

【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

 

 

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

 

 

ITハンドブック
初めてのオカンにはまずはこれ!

これだけ読めばお悩み解決!オカンがIT迷子にならないためのハンドブック?

これだけ読めばお悩み解決!オカンがIT迷子にならないためのハンドブック


入れておきたい定番スマホアプリ

CanvaProの30日間無料トライアルの登録方法!期間の延長は可能?

インスタグラマー御用達!CanvaProの30日間無料トライアルの登録方法

タクシーアプリGOを陣痛タクシーとして利用してみた!登録から使い方まで解説

タクシーアプリGOを陣痛タクシーとして利用してみた!登録から使い方まで

実家のオカンに教えた得する情報

安過ぎて鼻血が出そうになる中古Apple製品買い方

安過ぎて鼻血が出そうになる中古Apple製品買い方

CanvaProの30日間無料トライアルの登録方法!期間の延長は可能?

家事との相性バツグン!Audibleを使って読みたかった本を読破

iPhoneでYouTubeをバックグラウンド再生する無料アプリ

iPhoneでYouTubeをバックグラウンド再生する無料アプリ

オカンでも出来るインスタ攻略

スマホアプリだけでインスタの文字投稿を作成する方法【初心者でも簡単】

スマホアプリだけでインスタの文字投稿を作成する方法【初心者でも簡単】

Instagram片思いチェックアプリReports Followers

Instagram片思いチェックアプリReports Followers

人気記事

Canvaで画像編集できるならココナラで出品して稼ごう【スマホを使った始め方】

Canvaで画像編集できるならココナラで出品して稼ごう【スマホを使った始め方】

【衝撃】ジブリとジャニーズの作品がネット配信されない理由は?

【衝撃】ジブリとジャニーズの作品がネット配信されない理由は?

Canvaアプリで別アカウントに画像を引き継ぐには?複数登録は可能?データ移行方法を解説!

Canvaアプリで別アカウントに画像を引き継ぐには?複数登録は可能?データ移行方法を解説!

現役はてなブログカスタマイズ9選!トレンドはSWELL風デザインとSNS連携?

現役はてなブログカスタマイズ9選!トレンドはSWELL風デザインとSNS連携?

ブログ:オカンTECHの紹介

ーパソコンでわからないことがあるわ。息子が次に実家に帰ってきたら聞こう。
ースマホのプランを変えたいけどよくわからないわ。携帯ショップに問い合わせしよう。

このブログではこういった時に誰かに頼らずに自分で答えに辿り着けるオカンの「IT的自立」を目指します。


新着記事
オカンTECH

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

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

©️ 2022 オカンTECH Powered by Hatena Blog