
道ばたのデイジーを、棚の奥から出してきた器に。4分で完成です。
結局のところ知りたいのは「うちのホームページに合うかどうか」だと思います。それを確かめるために、メールアドレスを先に渡す必要はありません。レイアウトを切り替え、テーマを試し、キャプション・日付・アイコン・バッジの表示をオンとオフにして、ボードがクリックのたびに変わる様子を見てください。ご自分のアカウントの接続は登録のあと、Pinterest公式のログイン画面で行います。

道ばたのデイジーを、棚の奥から出してきた器に。4分で完成です。

色を塗った板の前にラナンキュラス。飾り立てず、合う背景を選んだだけです。

麻ひもだけで束ねて、ワイヤーは使いません。摘んだばかりに見えるように。

今年うまくドライになったものを全部並べました。このあとリースになります。

ダリア1輪と、窓1つ。10月のお店は、これで全部です。

水に入れる前に、まず箱の中身を仕分けます。
Masonry: ピンそれぞれの縦横比を保ったまま並べる段組みなので、ボードと同じ形になり、切り取られる部分がありません。
自分のボードで作ってみるここに表示しているのはプレビューで、本物のレンダラーではありません。テーマの色は製品が使っているテーマ定義から直接読み込み、レイアウト名も実際の名前ですが、形はこのページのために描いたものです。正方形に切り取って描いている形もありますが、それはこの図の描き方で、ウィジェットがピンを切り取ることはありません。MasonryとPinterest Feedのレイアウトではどのピンも本来の高さのまま並び、横にスクロールする帯のレイアウトでは、ピンが読み込まれても列の高さが変わらないよう、縦長のピンは正方形の枠に収まる大きさに縮め、左右に余白を付けて表示します。実際のスタジオには40種類のレイアウトと16種類のテーマ、すべてのプランで使えるテーマビルダーがあり、編集中は本物のウィジェットが描画されます。Thistlebrook Flowersは私たちが作った架空のデモアカウントで、住所も架空、写真はCC0の差し替え画像です。カードの数字はモックアップ用の例です。
多くのサイトは、Pinterestをフッターの小さな赤いアイコンで済ませています。それは、すでにあなたのページにいる訪問者に、ページを離れてくださいとお願いすることです。下のウォールはもう1つの選択肢で、ボードそのものを、あなたのドメインのページに、あなたのサイトの色で、どのピンも保存されたときの高さのまま並べます。
保存302件
保存243件





保存198件


Pinterestのソースは2種類のどちらかで、どちらにするかはプランの機能ではなく、設定のときにあなたが選ぶものです。X以外のプラットフォームはすべて無料プランで使えるので、どちらも無料プランに含まれます。
Pinterestのソースは、ボード1つか、アカウントのすべてのピンのどちらかです。ボードを選ぶと、ウィジェットはそのボードについていき、あとから保存したピンも自動で届きます。
保存302件

良いフィードウィジェットの目標は、最初からそのページの一部だったように見えることです。40種類のレイアウト、16種類のテーマ、すべてのプランで無料のテーマビルダー、そして日付・アイコン・バッジ・キャプションの表示切り替えがあります。下は1つのボードをそのうち3つのレイアウトで描いたもので、ほかのいくつかはページ上部で実際にクリックして試せます。












実際に出てくる順番に4つのステップを、それぞれが何を生み出すかと一緒に示します。開発者が必要なステップは1つもありません。途中で私たちがパスワードを聞くことはなく、ログインはPinterest公式の画面で行います。
無料で登録してフィードを作り、ソースにPinterestを追加して、Pinterest公式のOAuthの画面で接続します。そのあとボードを1つ選ぶか、すべてのピンのままにします。求めるのは読み取り専用のアクセスなので、ウィジェットにできるのはボードの一覧とピンを読むことだけで、アカウントにそれ以外のことはできません。
クレジットカード不要ここからPinterest公式のログインと権限の許可画面が開きます。パスワードを私たちが見ることも、保存することもありません。
取り込んだピンはCollectの画面にカードで並び、承認・除外のボタンが付きます。説明文はその場で編集でき、有料プランと7日間のトライアルでは先頭へのピン留めもできます。「Pre-approve posts」をオンにすると、承認するまでどのピンも訪問者に表示されません。
表示を決めるのはあなたですキーワードルールとAIコンテンツフィルターで入ってくるピンをふるいにかけ、引っかかったピンをホームページに出さないようにできます。
40種類のレイアウトと16種類のテーマから選び、日付・アイコン・バッジ・キャプションの表示を切り替えると、プレビューがクリックのたびに描き直されます。
プレビューは本物のレンダラースタジオのプレビューは本物のウィジェットです。ここで確認した見た目が、そのまま公開されます。
Get Code(コードを取得)を押して設置先を選び、出てきたコードをフィードを表示したい場所に貼り付けます。通常のHTMLにはスクリプト、WordPressにはプラグインかスクリプト、WixとSquarespaceにはiframe、NotionとGoogleサイトにはURLだけが渡されます。
設置先に合ったコードが出ます<link rel="preload" as="fetch" …><div id="collectsocials-4f9c21a7"></div><script src="…/api/widget"data-feed-id="…" data-token="…"data-container="…" data-api-base="…"defer></script>一部を省略しています。実際のダイアログでは、あなた専用のIDとフィードURLの属性が入ります。そこで設置先を選ぶと、それに合わせてコードの形が変わります。
取り込んだピンはカードで並び、承認する、除外する、説明文をその場で編集する、のいずれかを選べます。有料プランとトライアル中は、先頭へのピン留めもできます。「Pre-approve posts」をオンにすると、新しいピンは承認するまでページに出ません。キーワードルールとAIコンテンツフィルターで、入ってくるピンを先にふるいにかけることもできます。ピンがすべて自分のものでも、商品の隣に置きたいのはその一部だけ、ということはよくあります。
scriptタグは、どこにでもそのまま貼れるわけではありません。外部のコードをサンドボックスに閉じ込めるビルダーもあれば、削除してしまうビルダーもあります。そのため埋め込みの画面は、まずどこに設置するかを聞き、その環境に合ったコードを渡します。
scriptタグ1つとコンテナのdiv1つです。ウィジェットはページに直接描画され、Shadow DOMの中で動くので、ウィジェットのCSSとサイトのCSSが干渉しません。
同じスクリプトを、ページ幅いっぱいに広げるラッパーで包んだものです。Shopifyのテーマはセクションをflexboxで並べるため、そのままだとコンテナが押しつぶされてしまいます。
どちらも、貼り付けたスクリプトをサンドボックスに入れるか取り除くため、iframeのコードを渡します。コード内の小さなスクリプトが動く環境では内容に合わせて高さが変わり、スクリプトが取り除かれる環境でも、フィードは固定の高さの枠の中でスクロールして表示されます。
スクリプトをまったく実行できないサービスには、高さを固定した枠をURLで渡します。中身は枠の中でスクロールします。
速度スコアのランキングは公開していません。ウィジェットのスコアは、ページのどこに置くか、フィードに何が入っているかで変わるからです。代わりに、どう作られているかを公開します。ブラウザの開発者ツールでご自身で確かめられる内容です。
組み込みに必要なのはscriptタグ1つとdiv1つだけです。defer属性付きなので、ページの描画を止めることはありません。
埋め込みコードがフィードのリクエストを先に始めておくので、ピンとコードが順番待ちをせず、同時に届きます。
ウィジェットはShadow DOMの中に描画されます。サイトのスタイルシートがフィードを崩すことも、フィードがページを崩すこともありません。
1つのフィードに10のプラットフォームを組み合わせられるので、ピンの隣にInstagramの投稿、Googleの口コミ、YouTubeの動画を同じ区画に並べられます。X(旧Twitter)以外のプラットフォームはすべて無料プランで使えます。Xだけが有料なのは、XがAPIの利用に料金をかけているという1つの理由からです。無料プランで接続できるソースは1件なので、複数のプラットフォームを混ぜたウォールは7日間のトライアルか有料プランで使えます。ボードにいちばん近いのはTumblrのブログで、写真と文章を同じウォールに混ぜて並べます。
写真を見て日の出のツアーを予約しましたが、写真以上でした。ガイドの方は、どこに、いつ行けばいいかを正確に把握していました。
YouTube尾根道の3日間、最初から最後まで
TikTokブランコが水の上まで大きく振り出されます
日の出チームは、嵐が来る前に尾根までたどり着きました。写真はすべてホームページに載せています。
ラグーンで過ごした一日。6艇で漕ぎ出して転覆はゼロ、水の色は午後のあいだずっとこのままでした。

今年2回目の参加です。スケジュールはすべて時間どおりで、少人数制こそがこのツアーの良さだと思います。
Instagram黄色い壁を見つけたので、もちろん踊りました。
Instagram太陽より一足先に、稜線にたどり着きました。
Instagram気球より先に起きていました。
フェスティバルの最後に、風船を一斉に空へ。10秒ほど、誰もひと言も話しませんでした。

架空のブランドのデモフィードで、接続できる10のソースのうちいくつかを1つのウォールに並べています。投稿、口コミを書いた人、反応の数はすべて例で、製品の指標ではありません。カードに載っている項目はどれも実際のウィジェットが描画するものですが、このウォール自体はウィジェットが配信したものではなく、このページのために描いたものです。
デザインスタジオのすべての機能を7日間、クレジットカードなしで試せます。トライアルが終わっても、実際に公開中のホームページで使い続けられるプランが残ります。
ピンタレストのアカウントからピンを取り込み、ホームページ上に自動で更新される一区画として表示する、埋め込み型の部品です。一度接続して、すべてのピンかボード1つを選び、見た目を整えてコードを1つ貼り付ければ、それ以降はアカウントの更新に自動でついていきます。訪問者はPinterestへ移動せず、あなたのページにとどまったままピンを見られます。
いいえ。個人用アカウントでもビジネスアカウントでも、PinterestのAPIでピンとボードを読み取れるので、どちらでも使えます。私たちが求めるのは読み取り専用のアクセスで、ボードの一覧を取得してピンを読む権限だけです。ウィジェットがアカウントに投稿したり、ピンを編集・削除・リピンしたりすることはできません。そのための権限を、最初から求めていないからです。
できます。設定のときに、ソースの選択画面にボードの一覧が出るので、そのうち1つを選びます。ウェディングのページにはウェディングのボード、別のページには別のボード、という分け方ができます。すべてのピンのままにすれば、アカウント全体についていきます。どちらの場合も、あとから保存したピンは自動で届きます。
Pinterestのピンについては、反応の数(保存数・コメント数)を取り込んでいません。反応の欄があるカードでは数字が0と表示されるため、Pinterestのフィードでは、デザインスタジオの「Show Likes & Comments」をオフにしてください。
使えます。CollectSocialsのウィジェットでは、表示するピンをあなたが決められ、見た目は40種類のレイアウトと16種類のテーマから選べます。トライアル中と有料プランでは、Instagramの投稿やGoogleの口コミなど、ほかのプラットフォームと1つのウォールにまとめることもできます。ボードに新しいピンを保存すれば、コードを貼り直さなくてもホームページに届きます。Pinterest公式のツールは検証していないため、このページでは比べていません。
重くならないように作っています。deferのスクリプト1つとコンテナ1つだけで、フィードのリクエストはスクリプトのダウンロードと並行して始まり、描画はShadow DOMの中で行われるのでサイトのCSSに触れません。速度テストのランキングはあえて公開していません。スコアはフィードをページのどこに置くか、何が入っているかで変わるからです。そう判断した理由は、テストデータと一緒に、8つのInstagramフィードウィジェットを同じページで比べた検証で説明しています。
Pinterestとの連携は、アップグレードなしで無料プランのまま使えます。40種類のうちMasonryを含む7種類のレイアウト、16種類のテーマすべてとテーマビルダー、モデレーション、そして1日1回の自動同期が含まれます。無料プランのウィジェットには小さなCollectSocialsのクレジットリンクが入り、有料プランでは外せます。7日間のトライアルでは、すべてのレイアウトとモバイル用の別デザインを含むデザインスタジオの全機能を、クレジットカードなしで使えます。
プランのスケジュールに合わせて自動で同期されます。無料プランは24時間ごとで、上位のプランほど間隔が短くなり、最上位のプランでは5分ごとです。Pinterestのアクセストークンは30日ごとに期限が切れますが、ウィジェットが裏側で自動的に更新します。Pinterestが更新を受け付けなかった場合は、再接続をお願いします。手動で更新したり、コードを貼り直したりする必要はありません。
はい。取り込んだピンはモデレーションの画面にカードで並び、承認・除外と説明文の編集ができます。新しいピンは初期設定ではそのまま表示され、フィードの設定で「Pre-approve posts」をオンにすると、承認するまで表示されません。承認・除外・説明文の編集はすべてのプランで使え、ピン留めは有料プランと7日間のトライアルで使えます。キーワードルールとAIコンテンツフィルターで、入ってくるピンを先にふるいにかけることもできます。自分のボードでも役に立つ機能です。ピンはすべて自分のものでも、商品の隣に置きたいのはその一部だけ、ということはよくあります。
MasonryとPinterest Feedのレイアウトは、画面の幅が狭くなると列の数を自動で減らします。スマホ用のコードを別に用意する必要はなく、埋め込みコードは同じままです。横にスクロールする帯のレイアウトでは、縦長のピンは正方形の枠に収まる大きさで表示されるので、ピンが読み込まれても列の高さは変わりません。スマホだけ別のレイアウトとテーマにしたい場合は、トライアル中と有料プランのデザインスタジオで設定できます。
HTMLを貼り付けられるブロックがあるビルダーやブログなら、Plain HTMLのコードをそのまま貼り付けられます。スクリプトが取り除かれてしまう場合は、埋め込みの画面でWixかSquarespaceを選んだときに出るiframe形式のコードを使うと、フィード自体は表示されます。高さの自動調整はスクリプトが動くときだけ働き、動かない場合は固定の高さの枠の中でスクロールする表示になります。WordPressなら、コードを使わずにプラグインのブロックで配置することもできます。
できます。1つのフィードに、Instagram、Facebook、YouTube、TikTok、Googleの口コミを含む10のプラットフォームを組み合わせ、1つのウォールにできます。X(旧Twitter)以外のプラットフォームはすべて無料プランで使えます。Xだけが有料なのは、XがAPIの利用に料金をかけているという1つの理由からです。無料プランで接続できるソースは1件なので、複数のプラットフォームを混ぜたウォールは7日間のトライアルか有料プランで使えます。Pinterestのウォールと組み合わせやすいInstagramについては、専用のページで説明しています。
Pinterestを接続し、ボードを選び、レイアウトを決めて、コードを1つ貼るだけです。7日間のトライアルではデザインスタジオのすべての機能が使え、クレジットカードも求めません。
WordPress、Shopify、Wix、Squarespace、Webflow、Notion、そして通常のHTMLで使えます。