# OGP画像の入手と出力について
TwitterやFaceBookのようにカードが出るようにしたい次第......

**URL:** <https://www.nocode-faq.com/t/topic/340>\
**Category:** bubble\
**Created:** [2021 年 2 月 2 日午前 8:43 UTC](https://www.nocode-faq.com/t/topic/340 "2021-02-02T08:43:20Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Question\_user](https://avatars.discourse-cdn.com/v4/letter/q/53a042/32.png) [@Question\_user](https://www.nocode-faq.com/u/Question_user)\
**Post date:** [2021 年 2 月 2 日午前 8:43 UTC](https://www.nocode-faq.com/t/topic/340/1 "2021-02-02T08:43:20Z")

</div>

OGP画像の入手と出力について  
TwitterやFaceBookのようにカードが出るようにしたい次第です。  
参考例などあれば見たいのですが、いかがでしょうか？  
■共通しそう  
・OGP画像の取得方法を知りたい。  
・パターンは下記3パターン  
・現在投稿はmultiple input(プラグインのRich text inputに変更も想定)  
・投稿するとカードが出てくる状態にしたい。  
・無料・有料問わず。幅広く手段を検討出来る方がbetter  
■パターン  
①記事  
②youtube OGP  
※理想は埋め込んでbubbleページ上で再生出来る形にしたい  
③googleスライド  
※理想は埋め込んでbubbleページ上でスライドを見ていけるようにしたい

---

<div class="post-metadata">

**Author:** ![Answer\_user](https://avatars.discourse-cdn.com/v4/letter/a/eb8c5e/32.png) [@Answer\_user](https://www.nocode-faq.com/u/Answer_user)\
**Post date:** [2021 年 2 月 2 日午前 8:43 UTC](https://www.nocode-faq.com/t/topic/340/2 "2021-02-02T08:43:21Z")

</div>

回答者１  
OGPは…課金しないと、永遠にネズミちゃんが出てまいります…  
対策として皆がよくしてるのが、『アイキャッチを別で貼る』という手段ですが…ただの画像なので、リンクになりません…  
本気運用なら、課金で解決するので、ご心配なく

回答者２  
有料化&本番リンクでないと、OGPは ネズミになってしまいます。  
ちなみに、これは 作成してるアプリ全体的なurlに対してシェアするときの設定です。  
記事など個別のページで動的なOGPにしたいのであれば、各ページの プロパティエディターの下のほうにある部分をいじることになります。  
これも、有料&本番リンクじゃないと ネズミになりますが

質問者  
コンテンツがシェアされる時のOGPは各ページから設定していく必要があるのですね！  
えと、ごめんなさい、僕の質問力の低さが誤解を招いているのですが、  
他のサイトのOGP画像を取得する → bubble内でOGP画像を表示する  
を知りたい次第です\>\<  
(現在bubble→外、ですが、外→bubbleが困ってまして…)

回答者３  
これはbubble内で自動表示させる機能はないですね～  
無理矢理やるとしたら、imageをクリックすると指定のURLに飛ぶというWorkflowを作るということでしょうか。  
①データベースに入れる画像とページURL用にそれぞれFieldを作成  
②投稿や登録をする際にそれぞれ値を入れるWorkflowを作成  
③出力先のImageElementを設置し、「クリックしたら②によってデータベースに入ったURLにジャンプする」Workflowを設定  
一応これで見た目は成立しますが、なんとも力技ですよね…w  
現在のBubbleの仕様では自動でOGPは出ないので仕方がないところではあります  
主旨は違いますが、NoCodeBankも解釈によっては上記のOGPの設定に近いものがあります。  
（画像をクリックするとページへジャンプするという意味で）

> **[Bubble - Visual Programming](https://nocodebank.bubbleapps.io/)**
>
> Build stuff without code and launch a startup without a tech-cofounder! Bubble is a visual programing language. Instead of typing code, use a visual editor to build applications.

また、YouTubeは普通にVideoElementを使えば埋め込み可能ですよ～、下記の画像みたいにしてURL入れていただければ

Googleスライドについてはこちらを参考にURLを生成してみてください。

> **[Googleスライドのプレゼンをホームページに表示させる手順 | テンプレートパーク](https://template-parks.com/info/slide-website)**
>
> Google スライドで作成したプレゼンテーションは、そのスライドショーをホームページ上で公開・表示することが

生成したURLをBubble標準装備のHtmlElementで貼り付けましょう。画像の感じです。  
これで埋め込みが完成するかと思います

回答者２

> <https://twitter.com/NoCoder_K/status/1285199804574777344?s=20>

ドンピシャのプラグイン見つけたのでシェアです〜

## 参考画像

 ![image (45).png](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/1X/fe225f1242011d3c4aebdc4c7be601acf35d8a13.png)

 ![スクリーンショット 2020-07-12 11.58.43 (1).png](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/1X/905c4a3c1900af1f6c228c01a598fe083ad997cd.jpeg)

 ![image (44).png](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/1X/e437b34d1be5dcd5ed0fe422079ccf91f922a3bd.png)

 ![image (43).png](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/1X/6d1f0271a1c90f4b57e1cd7f9b6d21c5fc01cc2d.png)

## 参考URL

> <https://twitter.com/NoCoder_K/status/1271324728939048960?s=19>

> <https://twitter.com/NoCoder_K/status/1285199804574777344?s=20>