pinterest(ピンタレスト)をwebサイトに埋め込んで、インスタ画像ウィジェットみたいに使う方法

                    更新: 2020/07/24   1716文字

今回は、管理人も利用している画像共有ツールpinterest(ピンタレスト)を利用し、webサイト上の画像コンテンツとして利用してみます。

インスタだとsnapwidget以外ではトークン発行とか、結構めんどくさいんですけど、ピンタレストだとわりとラクでした。さっそく写真コンテンツをwebサイトやブログに埋め込んでみましょう。

pinterest(ピンタレスト)をwebサイトやブログに埋め込む方法

埋め込みはボードごとに設定できる!

管理人がピンタレストで便利だなと思った機能がコレ。『ボードごとに埋め込みタグ発行できる』。管理人のピンタレストには『風景・食べ物・お絵描き』の3つのボードがあり、『お絵描き』を選びました。

サイトに埋め込みたいボードの画面に行き、シェアとかするアイコンから『ウィジェット作成』を押します。

あとは、

そのままボードのurlが、ウィジェット作成画面に入ります。レイアウトは『四角・サイドバー・ヘッダー・カスタム』から選びます。

気をつけるポイント~ウィジェットコードと、動作用javascriptがある


ポイントは『ウィジェット表示用コード』と『動作用javascript』の二つがある点です。これを表示するページに貼ります。

あと、なぜ『bodyタグの閉じる前・一番最後に貼ってね』と言っているかというと『async deferってついてる、非同期読み込みだから』です。表示速度とかにも気を使っているといえます。べつにbodyタグの閉じるとこ手前じゃなくても動作しますが、上記の理由によりヘッダーじゃなくてokです。

全部のページに表示したいときは、テンプレートに入れるとよいでしょう。

表示例


『鉛筆お絵描きまとめボード』を、記事のひとつに貼ってみました。画像が少ないのとサイズミスったので、すこしスカスカしてますが、手順ということでご了承ください。

カスタムサイズでピンタレストをwebサイトやブログに埋め込む

写真の部分のサイズと、アカウント名とか左右マージンに気をつけてサイズ指定しよう


さっきのが微妙だったので、サイドウィジェットみたいに使えるようにしてみます。画像幅140で横2枚・ボード幅280・縦480としました。なんでこんな微妙なサイズかというと・・・


左右マージン10ずつ&上と下にボタンやアカウント名表示が出るので、実際の出力サイズが異なるからです。これ『横280・縦を490』にすれば、アドセンスのハーフページ(300×600)と同じサイズになりそうですね。

カスタム表示例


カスタムサイズでやってみました。アドセンスハーフページ(300×600)をサイドカラムにつかっているので、この横幅だとレイアウト的にぴったり合います。

特定ボードだけではなく、アップした画像を全部表示したいときは?


『プロフィール』を選んで、『アカウントのトップページのurl(管理人の場合は、https://www.pinterest.jp/mshp0723drawing/)』を指定することにより可能でした。

公開ボードが3種類ありますが、全部まざった状態で表示ができます。サイズはメインカラムに使うか、サイドのウィジェットに使うかに応じて変更してください。

あとがき・まとめ

  • 特定のボードを指定できる
  • アップした画像を全部表示は、プロフィール&アカウントのトップページのurl指定
  • javascriptも忘れずに
  • カスタム表示のときは、左右マージンと上下のボタンいれたサイズになる

まとめるとこんなところだと思います。うまく利用して、webサイトやブログに写真・絵などの画像コンテンツを取り入れてみてください。

WordPressサイト制作&リニューアル・機能開発サービス | アトリエSS


【カテゴリ】 - お役立ちツール・SNS etc
【タグ】 -

  関連記事

【画像・グラフィック系SNS】pinterest(ピンタレスト)をはじめる~アカウントの作り方や削除のしかた
【サイトスマホ対応】fc2ぶろぐで、スマホ表示時の検索タグって使えないの?回答→レスポンシブを使えばokです。
【公式】TVがなくても情報収集しよう~インターネットで視聴できるテレビ・ラジオ・動画まとめ
広告なしYouTube Premium(月額1,180円・将来音楽配信と統合)は高い?他動画・音楽サイト比較と、無料版のうざい広告への対処
pinterest(ピンタレスト)をwebサイトに埋め込んで、インスタ画像ウィジェットみたいに使う方法
【youtubeチャンネル】リンクを貼るとき、urlパラメーター付与して『再生回数順』などで表示させる方法
インスタグラムで、PCから画像アップロードする方法【ユーザーエージェント変更】
【無料プラン有】カンタン予約フォームが作れる『RESERVA』を使ってみる
インスタグラム乗っ取りが発生したときは、通知メールからパス変更・メルアドを戻す・二段認証する
インスタグラムで、スマホ1台でもサブアカウントを取得する方法【複数アカウント】
pinterest(ピンタレスト)オリジナル画像やイラストなどをアップしたり消したりする方法
soundcloudのいいね機能を使って、自分のお好みの作業用BGMプレイリストを作る