wordpressスマホ対応サイト・wpプラグイン・検索体験最適化・SNS・ 動画・bgmやテーマ曲を駆使して、リアルビジネスへの集客を達成するためのコラム!

   

wordpress屋のマルチメディアコンテンツ制作読んどけ☆コラム

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

      2017/11/04

こんにちは、管理人@SS_mshpです。

今回は、管理人も利用している画像共有ツール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サイトやブログに写真・絵などの画像コンテンツを取り入れてみてください。

*アトリエSS・web制作サービスページに移動します。webリニューアル・ロゴ・記事・wordpress化などでお力添えできます。

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

Message

メールアドレスが公開されることはありません。

  関連記事

仮想通貨(ビットコイン)サイト・トレードブログ制作時に便利な、チャート/相場ウィジェット紹介

今回は、『webサイト・ブログに、ビットコインなどの仮想通貨チャートや価 …

インスタグラムで、PCから画像アップロードする方法【ユーザーエージェント変更】

今回は、SNSのインスタグラムで、『PCから画像アップロードできるように …

無料でもこんなに使える!オンラインストレージ(ネットにファイル保存)いろいろ

今回は、覚えておくとファイル保存時に便利な『無料でも結構使えるオンライン …

ビジネス版『LINE@(ラインアット)』で登録・無料アカ作る~個別返信や他サイトとの連携は?

今回は、若いユーザーはほとんどがメールがわりに使っている(キャリアメール …

soundcloudのいいね機能を使って、自分のお好みの作業用BGMプレイリストを作る

今回は、管理人がプログラムとかCSSコード書いてるときに、作業用BGMプ …

【画像・グラフィック系SNS】pinterest(ピンタレスト)をはじめる~アカウントの作り方や削除のしかた

今回は、管理人がお絵描きアカウントにしようと検討している画像・グラフィッ …

インスタグラム乗っ取りが発生したときは、通知メールからパス変更・メルアドを戻す・二段認証する

今回は、管理人の運用しているインスタグラムアカウントで、内容を書き換える …

【強力フリーお絵描きツール】メディバン・ペイント使ってみる~アカウント作ってブラシをクラウドから大量にget!

今回は、(一応音楽話題メインとしてスタートしたこのサイトですが)強力なフ …

pinterest(ピンタレスト)で、オリジナル画像やイラストなどをアップしたり消したりする方法

今回は、数日前に書いた画像・グラフィック系SNS『pinterest(ピ …

インスタグラムで、スマホ1台でもサブアカウントを取得する方法【複数アカウント】

今回は利用者も多い写真SNS『インスタグラム』を使って、複数アカウントで …