Twitterの投稿やタイムラインをサイトに埋め込む方法
Twitter(単体の投稿の埋め込み方法)
- Web版のTwitterにアクセスし、ID(電話番号、メールアドレス、ユーザー名)とパスワードを入力してログインします。
- 下記を参考に設定し Update をクリックします。
How would you like this to look?
- 背景をLight(白)またはDark(黒)から選択します。
What language would you like to display this in?
- ツイートの日付等の表示言語を選択します。
Would you like to limit context in this Tweet?
- ツイートが別ツイートへの返信である場合、チェックすると元ツイートを非表示にできます。
Opt-out of tailoring Twitter
- Twitterに閲覧データを送信しない場合はチェックを入れます。
新たにコードが生成されるので Copy Code をクリックしてコピーします。
コピーしたコードは、後ほどbingo!CMSの編集画面で使用します。メモ帳などに貼り付けて保存しておきます。
- ユニットの編集画面を開き、html の入力欄に、先程コピーしておいたコードのうち、<blockquote>〜</blockquote>を貼り付けて保存します。
スマートフォンでも埋め込みを表示させる場合は、SP でタブを切り替え、PCの内容をコピー をクリックしてから保存します。
以下は、bingo!CMS公式Twitterのツイートを埋め込む場合の入力例です。
<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">《パッチファイル適用代行の年内対応締め切りは11/13(金)18:00受付分まで》<br>締め切り以降にお申し込みいただいた場合、年内対応完了のお約束はできかねますのでご注意ください!<a href="https://twitter.com/hashtag/bingocms?src=hash&ref_src=twsrc%5Etfw">#bingocms</a> <a href="https://twitter.com/hashtag/CMS?src=hash&ref_src=twsrc%5Etfw">#CMS</a> <a href="https://twitter.com/hashtag/AdobeFlash?src=hash&ref_src=twsrc%5Etfw">#AdobeFlash</a> <a href="https://t.co/Asv5r5sqaD">https://t.co/Asv5r5sqaD</a></p>— bingo!CMS【公式】クラウドプラットフォームプレリリース中 (@bingocms) <a href="https://twitter.com/bingocms/status/1325605142138253312?ref_src=twsrc%5Etfw">2020年11月9日</a></blockquote>
Twitter(タイムラインの基本的な埋め込み方法)
- https://publish.twitter.com/ にアクセスし、埋め込みコードを発行したいTwitterのURLを入力して入力欄の右端にある矢印をクリック(またはEnterキーを押下)します。
- コードが生成されるので、 Copy Code をクリックしてコードをコピーします。
コピーしたコードは、後ほどbingo!CMSの編集画面で使用します。
メモ帳などに貼り付けて保存しておきます。
以下は、bingo!CMS公式Twitterの場合のコードの生成例です。
<a class="twitter-timeline" href="https://twitter.com/bingocms?ref_src=twsrc%5Etfw">Tweets by bingocms</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
- bingo!CMS管理画面を開き、Twitterを埋め込みたいページに、HTML v17ユニット をドラッグ&ドロップで配置します。
ユニットの編集画面を開き、html の入力欄に<a>タグのみを貼り付けて保存します。
スマートフォンでも埋め込みを表示させる場合は、SP でタブを切り替え、PCの内容をコピー をクリックしてから保存します。
以下は、bingo!CMS公式Twitterの場合の<a>タグの入力例です。
<a class="twitter-timeline" href="https://twitter.com/bingocms?ref_src=twsrc%5Etfw">Tweets by bingocms</a>
- ページ編集画面右上の このページ用のcssとjavascriptの設定 をクリックし、CSS・JS設定 を開きます。
javascript の入力欄に<script>タグのみを貼り付けて保存します。
スマートフォンでも埋め込みを表示させる場合は、スマートフォンにコピー をクリックしてから保存します。
※bingo!CMSのバージョンにより、スマートフォン用の入力欄がない場合があります。
保存後、ポップアップウィンドウは × で閉じます。
以下は、bingo!CMS公式Twitterの場合の<script>タグの入力例です。
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
Twitter(タイムラインの高さや幅を調整して埋め込む方法)
- 前述の Twitter(基本の埋め込み方法)の手順3 で、コードをコピーする前に set customization options (カスタマイズオプションを設定する)をクリックします。
その他のSNS
-
Facebookの投稿やタイムラインをサイトに埋め込む方法
bingo!CMSで制作したサイト上に、Facebookの投稿やタイムラインを埋め込む方法をご紹介します。
-
Instagramの投稿や一覧をサイトに埋め込む方法
bingo!CMSで制作したサイト上に、Instagramの投稿や一覧を埋め込む方法をご紹介します。