--- title: "PinterestのボードをWEBサイトに埋め込む方法まとめ！" date: 2022-08-16 modified: 2024-11-11 canonical_id: embed-pinterest-board locale_slug: embed-pinterest-board author: "esbasicmath" category: - blog - product-updates summary: "「Pinterest」はインターネット上に散らばる画像を簡単に検索・保存出来るサービスとして世界中で人気を博しています。そんなPinterestでボードに集めた画像は、Pinterest上で確認するだけでなくWEBサイトに埋め込みギャラリーとして活用することが可能です。" draft: false seo: title: "PinterestのボードをWEBサイトに埋め込む方法まとめ！" description: "「Pinterest」はインターネット上に散らばる画像を簡単に検索・保存出来るサービスとして世界中で人気を博しています。そんなPinterestでボードに集めた画像は、Pinterest上で確認するだけでなくWEBサイトに埋め込みギャラリーとして活用することが可能です。" og_image: "https://embedsocial.jp/hp/wp-content/uploads/2022/08/pinterest-banner2.png" og_image_width: 2240 og_image_height: 1260 structured_data: article --- 「Pinterest」はインターネット上に散らばる画像を簡単に検索・保存出来るサービスとして世界中で人気を博しています。そんなPinterestでボードに集めた画像は、Pinterest上で確認するだけでなくWEBサイトに埋め込みギャラリーとして活用することが可能です。今回はPinterestの画像の埋め込み方法をご紹介するとともに、各パターンごとのおすすめ設定方法を解説いたします。 ※本記事はPinterestおよびEmbedSocialシステムの埋め込み機能の使い方を解説することを目的としており、WEBサイトでの埋め込みにおいて、画像の使用における正当性の一切を保証するものではございません。Pinterestの機能を使用して埋め込む場合には、Pinterestの利用規約・著作権に関する法律等をご参照のうえ自己判断で実施いただきますようお願いいたします。なおEmbedSocialでは、自らが作成した画像または使用許可を得た画像のみを埋め込みとして活用することを推奨しています。 ## Pinterestとは？ インターネットやPinterest上の画像を保存しまとめることができる画像検索サービスで、クリエイターを中心に人気を集めています。画像をもとにしたアイデアの探索といった側面から検索エンジンとしても活用することができるほか、自分の作品を画像として投稿することも可能です。 ソーシャルメディアと検索エンジンの中間的な立ち位置として、米国を中心として世界的に人気なサービスです。 ![](https://embedsocial.jp/hp/wp-content/uploads/2022/08/embed-pinterest-7.jpg) ## PinterestのボードをWEBサイトに埋め込む方法 Pinterestで保存した画像一覧（ボード）は、Pinterest上で閲覧するだけでなく埋め込みコードを発行してWEBサイト上に表示させることもできます。Pinterestを自分のポートフォリオとして活用し、投稿した画像をWEBサイトと同期させたい場合などに便利です。 Pinterestのボードは「[ウィジェットビルダー](https://developers.pinterest.com/tools/widget-builder/?type=board&boardHeight=240&boardWidth=400&imageWidth=80&template=square)」より埋め込みコードを発行することができます。表示させるボードのURL・サイズを指定し、表示されたコードを案内に従ってページに埋め込めば表示させることができます。 **1\. 埋め込みを行うボードのURLを入力します** ![](https://embedsocial.jp/hp/wp-content/uploads/2022/08/embed-pinterest-2.jpg) **2\. 表示箇所に合わせたサイズを選択します** ![](https://embedsocial.jp/hp/wp-content/uploads/2022/08/embed-pinterest-5.jpg) **3\. 最後に、取得したコードを指定箇所に埋め込めば表示が完了します** ![](https://embedsocial.jp/hp/wp-content/uploads/2022/08/embed-pinterest-6.jpg) [](https://www.pinterest.jp/embedsocial/how-to/) ### Pinterestのウィジェットは表示が不安定？ 上記箇所にはPinterest公式のウィジェットを埋め込んでいますが、**ブラウザに依存することなく一部のCMSなどでは稀にウィジェットが表示されない**ことがあります。`` タグでウィジェットが構成されていることが一因とも考えられますが、もし表示が不安定な事態が発生する場合には、公式ツール以外の方法を検討してみるのも良いかもしれません。 ![](https://embedsocial.jp/hp/wp-content/uploads/2022/08/pinterest-widget-notshown-scaled.jpg) ## Pinterestのボードをレスポンシブに埋め込む方法 上記の手順でPinterestのボードを埋め込むことができますが、ボードをレスポンシブに表示させるためには追加のコーディングが必要となる場合があります。コーディングを行うことなくレスポンシブに表示させたい場合には、外部ツールを活用することでPC・スマートフォン両方に適した状態で表示させることが可能です。 ここでは、SNS埋め込みツール『[EmbedSocial](https://embedsocial.jp/)』を活用してPinterestのボードをレスポンシブに埋め込む方法をご紹介いたします。 EmbedSocialをご利用いただくには、すべての機能がお試しいただける[7日間の無料トライアル](https://embedsocial.jp/admin/continue_plugin_purchase/socialfeed29/trial?continue_onboarding=ai_widget)からぜひお試しください。Pinterestのボードを簡単に、スタイリッシュなレイアウトでウェブサイトに表示することができます。 [![embeddeed-free-trial-banner-pinterest](https://embedsocial.jp/hp/wp-content/uploads/2022/08/EmbedFeed-Free-trial-banner-Pinterest-1024x512.webp)](https://embedsocial.jp/admin/continue_plugin_purchase/socialfeed29/trial?continue_onboarding=ai_widget) ### **1\. Pinterestを収集先として選択する** EmbedSocialを使って埋め込みを希望するソースの中から「Pinterest」を選択します。 ![embedfeed-select-platform-Pinterest](https://embedsocial.jp/hp/wp-content/uploads/2022/08/embedfeed-select-platform-Pinterest-1024x569.webp) ### **2\. PinterestとEmbedSocialを接続する** Pinterestへとリダイレクトされるため、アプリのアクセスを許可します。これでEmbedSocialがPintrestと接続され、ボードの収集が可能になります。 ![embedfeed-connect-Pinterest-app](https://embedsocial.jp/hp/wp-content/uploads/2022/08/embedfeed-connect-Pinterest-app-1024x569.webp) ### **3\. 表示したいボードを選択します** 接続完了後、WEBサイトに表示したい埋め込みを行うボードを選択します。 ![embedfeed-select-Piterest-board](https://embedsocial.jp/hp/wp-content/uploads/2022/08/embedfeed-select-Piterest-board-1024x569.webp) ### **4\. WEBサイトに表示させるデザインを選ぶ** サイト上に表示させるデザインを、テンプレートから選びます。テンプレートはカスタマイズ可能ですし、テンプレートなしでスクラッチから作成することもできます。CSSも利用できます。 ![embedfeed-select-Pinterest-widget-template](https://embedsocial.jp/hp/wp-content/uploads/2022/08/embedfeed-select-Pinterest-widget-template-1024x569.webp) ### **5\. 埋め込み表示用のコードを組み込む** 最後に、自動生成されたコードをうぇびさサイトに埋め込めばレスポンシブでの表示が完了します。 ![enbedfeed-copy-code-embed-Pinterest](https://embedsocial.jp/hp/wp-content/uploads/2022/08/enbedfeed-copy-code-embed-Pinterest-1024x569.webp) これで設定は完了です。WEBサイトに以下の様に表示することができます。 ![Embed-Pinteres-on-web-example](https://embedsocial.jp/hp/wp-content/uploads/2022/08/Embed-Pinteres-on-web-example-1024x731.webp) ### Pinterestボードのレスポンシブ埋め込み表示例 {{embedsocial-hashtag:ae845dfd2a17bdfbf8a4e031489d2b545045d2aa}} ## Pinterestのボードを他のSNSとミックスして埋め込む方法 SNS埋め込みツール『[EmbedSocial](https://embedsocial.jp/)』では、PinterestだけでなくInstagram・Youtube・TikTokなどの様々なソーシャルメディアから画像・文章・動画コンテンツを収集し、WEBサイトに埋め込み活用することができます。 Pinterest以外にも様々なSNSにコンテンツを展開している場合には、EmbedSocial（エンベッドソーシャル）を活用することで複数のSNSの埋め込みを一括に管理し・自由自在に組み合わせることができ大変便利です。 ### PinterestとInstagramの画像を組み合わせて表示させる場合 Pinterest・Instagramにそれぞれ投稿した画像をシステム上で組み合わせ、WEBサイト上で一つのウィジェットとして表示させることができます。複数のSNS上で異なるブランドや作品の認知拡大に活用し、WEBサイトのコンテンツとして活用したい場合におすすめです。 {{embedsocial-hashtag:f5e15f2af63214cfee07dc01cea88d5a55cb7362}} ### 5つの異なるSNSから収集した画像を組み合わせて表示させる場合 EmbedSocialでは上記の2つに加えて、Twitter・Facebook・Youtube・TikTok・Vimeoの合計7種類のSNSから画像・動画・テキストなどを収集することができます。EmbedSocialへと収集したコンテンツについては、自由自在に組み合わせてホームページ上に表示させることが可能です。 {{embedsocial-hashtag:7a161c7768624375e812f00fd61cc10ee4e8201b}} ### Pinterestのボード画像を特殊なレイアウトで表示させる場合 EmbedSocialでは、2022年8月現在8種類のレイアウトでPinterestのボードをサイト上に表示させることができます。全てのレイアウトはレスポンシブ対応となっているため、追加のコーディングなくスマホ・PC両方に最適化した露出が可能です。 #### Gridレイアウト {{embedsocial-hashtag:717e1a1dce7f940e8686b565e6a6a7f4782f81f2}} #### Carouselレイアウト {{embedsocial-hashtag:3fb4fc85b915c1a565decfaf05189d62fd40760f}} ### Pinterestのボード画像に対し、外部リンクを付け加える場合 またEmbedSocialを活用して表示させる場合には、各画像に対して独自の外部リンクを追加することが可能です。投稿をクリックした際にPinterestへと遷移することなく商品ページやお問い合わせページなどへと誘導することができるようになります。 {{embedsocial-hashtag:70c82dceb4464048dcebe3ed05c997b1106e7a6f}} ## EmbedSocialならSNSとWEBサイトの自由自在な連携が可能に 以上のように、EmbedSocialを活用するとPinterestのボードをレスポンシブの状態で埋め込むことができるだけでなく、サイトデザインに合わせたレイアウトの変更・任意ページへの誘導などSNSを活用したHP更新の自動化・集客促進などに活用することができます。 2022年8月現在、EmbedSocialは一週間の無料トライアルやWEB会議でのご案内などを実施しております。興味をもたれた方はお気軽にお問い合わせくださいませ。 \[include file='blog\_cta'\]