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サイトやブログに写真・絵などの画像コンテンツを取り入れてみてください。

*お問い合わせフォームページに移動します。webリニューアル・ロゴ・記事・wordpress化などでお力添えできます。

■LINEできいてみる(アカウントがある方)

(タップ・またはqrでアプリを起動してください。回答できる内容には限りがありますが、なにか課題解決のきっかけができるかもしれません。)


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

Message

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

  関連記事

pinterest(ピンタレスト)で、デザインアイデア探し方・著作権が心配な場合は非公開ボードも使う

今回は、pinterest(ピンタレスト)を使用して、デザインのアイデア …

【無料プラン有】カンタン予約フォームが作れる『RESERVA』を使ってみる

今回は、導入しようとすると結構大変な『予約フォーム』を、サクっと作れそう …

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

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

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

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

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

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

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

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

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

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

本レビュー『コトラーが教えてくれたこと、女子大生バンドが実践したマーケティング

今回は、先日book offで200えんで売ってたから買ってみた本を、は …

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

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

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

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