Twitter投稿やタイムラインを表示させる方法

キャプチャ画像

SIRIUSサイトにTwitterの投稿を引用表示させる方法と自身のTwitterのタイムラインを表示させる方法をご紹介します。


Twitterの投稿を引用表示する方法

これはいたって簡単なので”紹介”というほどのものではないかもしれません。

このページをご覧になる時期によっては、以降の流れや画面レイアウトが(仕様変更などにより)異なってる場合もあります。予めご了承ください。

 

まずページ内に表示したいツイッターを開きます。

(タイムラインでも投稿の詳細でもどちらでも可)

 

開いたら表示させたいTwitter投稿の右上の下向き矢印をクリックします。

 

メニューが出てくるので「ツイートを埋め込む」を選択します。

 

キャプチャ画像

 

ページが変わるので「Copy Code」をクリックします。

すると埋め込み表示用のコードが取得できます。

 

キャプチャ画像

 

最後にSIRIUSの編集画面を開き、ツイートを表示させたい位置にペーストする、これだけです。

 

キャプチャ画像

 

実際やってみたのがこちら↓です。

(ちゃんと表示されてるかな?)

 

Twitterのタイムラインを表示させる方法

続いて(あなた自身の)Twitterのタイムラインをサイトに表示させる方法です。

 

今回はサイドメニュー上に表示させる前提で進めていきます。

 

こちらは先ほどよりは若干手間がかかりますが、一度設置したらあとは何もする必要がありません。

 

ただしリアルタイムにタイムラインに新しいツイートが表示されるので、もしも定期的にツイートしてないのであれば”活きてないツイッター”とみなされる恐れもあります。

 

そんな時は無理して表示させる必要はないでしょう。

 

コード取得

最初に以下のページを開きます。

 

https://publish.twitter.com/

 

開いたページにあなたのTwitterURLを打ち込み、矢印をクリックするか[Enter]キーを押します。

 

キャプチャ画像

 

下にスクロールするので左側をクリックします。

(※右側はフォローボタンなどのボタン作成用なので今回は使いません)

 

キャプチャ画像

 

タイムラインがサンプル表示された状態でコードが表示されます。

 

ただしこのままコードをコピー&ペーストしても無駄に長く広がって表示されてしまいます。

 

そこで下の赤枠で囲ったオプション設定をクリックして高さを指定してやります。

 

キャプチャ画像

 

幅300px、高さを500pxにして「update」をクリックします。

(その下の項目は見た目の雰囲気と表示言語の設定です。言語設定は日本語にしてあります)

 

キャプチャ画像

これで横幅300pxでのプレビュー画面になります。

最下段の『Opt-out of tailoring Twitter』はチェックを入れないと「Twitterに閲覧データを送信する」オプションらしいです。(詳しくは知りません)

ということで、チェックは入れておいた方がいいんでしょうかね。

 

これで問題なければ「Copy Code」をクリックしてコードを取得します。

(気に入らなければ再度オプション設定をクリックして調整します)

 

キャプチャ画像

 

SIRIUSへの貼り方

サイドメニュー(SIRIUSでは”メインメニュー”と呼ばれる)への取得したコードの貼り方ですが、レイアウトを統一させるのであればフリースペース「メインメニュー(下段)」にペーストするのが一番ラクです。

 

キャプチャ画像

 

結果、このように表示されました。

 

キャプチャ画像

 

サイドメニューの任意の位置に表示させたい時、あるいはサイドメニュー以外の位置に表示させたい時は、テンプレートに直接コードを貼り付ければ表示はされます。

ただしスタイルシートでレイアウト調整する必要があるので、初心者の方はフリースペースを使うのが無難かと。

 この記事をシェア