Twitterの投稿やタイムラインをサイトに埋め込む方法

Twitter（単体の投稿の埋め込み方法）

  1. Web版のTwitterにアクセスし、ID（電話番号、メールアドレス、ユーザー名）とパスワードを入力してログインします。
  1. 埋め込みたい投稿の右上にある、点が3つ並んだメニューをクリックします。
  1. ツイートを埋め込む をクリックします。
  1. Twitter Publish が開きます。
    そのまま埋め込みコードをコピーする場合は Copy Code をクリックします。
    コピーしたコードは、後ほどbingo!CMSの編集画面で使用します。
    メモ帳などに貼り付けて保存しておきます。
    オプション設定を行う場合は set customization options. をクリックします。
  1. 下記を参考に設定し 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の編集画面で使用します。メモ帳などに貼り付けて保存しておきます。

  1. bingo!CMSのツイートを埋め込みたいページにHTMLv17 をドラッグ&ドロップで配置し、ユニット編集 をクリックします。
  1. ユニットの編集画面を開き、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&amp;ref_src=twsrc%5Etfw">#bingocms</a> <a href="https://twitter.com/hashtag/CMS?src=hash&amp;ref_src=twsrc%5Etfw">#CMS</a> <a href="https://twitter.com/hashtag/AdobeFlash?src=hash&amp;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>
  1. ページ編集画面右上の このページ用のcssとjavascriptの設定 をクリックし、CSS・JS設定 を開きます。
  1. javascript の入力欄に、先程コピーしておいたコードのうち、<script>〜</script>を貼り付けて保存します。
    スマートフォンでも埋め込みを表示させる場合は、スマートフォンにコピー をクリックしてから保存します。
    保存後、ポップアップウィンドウは画面右上の × で閉じます。

以下は、bingo!CMS公式Twitterのツイートを埋め込む場合の入力例です。

<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
  1. 埋め込みが完了しました。
    ページ編集画面にうまく表示されないときは、画面右上の PREVIEW のボタンをクリックし、プレビュー画面で確認してください。
  1. ツイートの埋め込みがプレビュー画面で確認できました。
    投稿の横幅は、デフォルトで550pxに指定されています。

Twitter（タイムラインの基本的な埋め込み方法）

  1. https://publish.twitter.com/ にアクセスし、埋め込みコードを発行したいTwitterのURLを入力して入力欄の右端にある矢印をクリック（またはEnterキーを押下）します。
  1. 表示オプションが表示されるので Embedded Timeline （埋め込みタイムライン）を選択します。
  1. コードが生成されるので、 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>
  1. 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>
  1. ページ編集画面右上の このページ用の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>
  1. 埋め込みが完了しました。
    ページ編集画面にうまく表示されないときは、画面右上の PREVIEW のボタンをクリックし、プレビュー画面で確認してください。
  1. 埋め込みをプレビュー画面で確認します。
    基本的な埋め込み方法の場合、HTML v17ユニット を設置したコンテナの幅に合わせて表示されます。

Twitter（タイムラインの高さや幅を調整して埋め込む方法）

  1. 前述の Twitter（基本の埋め込み方法）の手順3 で、コードをコピーする前に set customization options （カスタマイズオプションを設定する）をクリックします。
  1. 高さと幅、背景色、言語を設定し Update をクリックします。
    新たにコードが生成されるので Copy Code をクリックしてコピーします。
    後は、前述の基本的な埋め込み方法の通りに設定します。

PCとスマートフォンで表示幅を変更したい場合は、それぞれコードを発行し、HTML v17ユニット のPC・Tablet用とSP用のタブにそれぞれの<a>タグを分けて記述してください。

その他のSNS

ページトップ