• TOP>
  • Twitterのツイートやタイムラインを表示する

Twitterのツイートやタイムラインを表示する

ゲームタイトルに関する公式Twitterなどのタイムラインをページに表示させる方法の解説です。

旧バージョン時のページはこちら

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

ページに該当アカウントのタイムラインを貼る

書式

#twitter(該当URL)

使用例

#style(style=width100%;height:800px;overflow-y:scroll;){{
#twitter(https://twitter.com/famitsu)
}}

使用結果
ファミ通公式のTwitterのタイムラインを表示

Twitterの検索結果を表示する場合

TwitterのウィジェットIDを取得する

Twitterのホーム画面を表示し、画面右上にある自身のアイコンをクリックしてメニューを呼び出し、設定を押してください。

Twi01

設定画面に移動したら左メニューにある「ウィジェット」をクリックし、「新規作成ボタン」を押してください。

Twi02

新規作成ボタンを押すと選択肢が出てきますので、検索を選んでください。

kensaku

検索の入力フォームにウィジェットを作成したい検索項目の記入と各種設定を終えたら、「ウィジェットを作成」ボタンを押してください。

kensaku_3

ウィジェット作成ボタンを押すと、画面右下の赤枠に囲まれた部分にコードが出現します。

kensaku_5

点線部分にあるdata-widget-idと書かれた箇所にウィジェットIDが記載されています。

コード例

<a class="twitter-timeline" href="https://twitter.com/search?q=%E3%83%95%E3%82%A1%E3%83%9F%E9%80%9A " data-widget-id="770931387545202689">ファミ通に関するツイート</a><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

赤字の部分の数字で記載されているウィジェットIDをコピーします。

一度、テキストエディタなどに貼り付けてからコピーするのが簡単でオススメです。

ウィジェットIDは作成するウィジェット毎に異なります。

ページにTwitterウィジェットを貼る

作成したTwitterウィジェットをページに貼り付けるには下記の書式にある(ウィジェットID)の部分を先ほどコピーした数字に置き換えてください。

書式

#twitter(ウィジェットID)

使用例

#twitter(770931387545202689)

使用結果
「ファミ通」の検索結果を表示

Twitterの表示幅を調整する

横幅と表示する高さを、構文で調整ができます。

横幅を調整する方法

Twitterウィジェットの横幅を調整するには、以下のように記入します。

書式

#style(style=width:数字px;){{
#twitter(ウィジェットID)
}}

数字の部分に入れた値が横幅になります。単位はpxです。

使用例

#style(style=width:280px;){{
#twitter(601580567734329344)
}}

今回は280pxで表示しています。横幅を変えるときは280の数字を変更してください。

使用結果

また、%でも指定できます

使用結果

高さを調整する方法

Twitterウィジェットの高さを調整するには、以下のように記入します。

書式

#style(style=height:数字px;overflow-y:scroll;){{
#twitter(ウィジェットID)
}}

今回は、640pxで指定しています、高さを変えたいときは、数値を変えてください。
横幅と同時に指定もできます

ページに特定のツイートを貼る方法

URLを取得して特定のツイートをページに貼り付けます。

ツイートのリンクからURLをコピー

まずは表示したいツイートからリンクを取得します。

リンクの取得方法はツイートの下にある赤枠に囲まれた「●●●」の機能ボタンをクリックし、出てきたメニューから「リンクをコピー」を押します。

Twi06

「リンクをコピー」を押すと、ツイートのURLが出現するので、これをコピーしてください。

Twi07

コピーしたリンクを構文に組み込んで貼り付ける

URLをコピーしたら以下の構文のように編集画面に記入すれば完了です。

書式

#media(ツイートURL)

構文#media()は静画や動画を貼り付ける際にも利用できます。
詳しくはプラグイン一覧の動画、Twitter、静画を貼り付ける を参照してください。

使用例

#media(https://twitter.com/famitsu/status/661525587895279616)

使用結果

ツイートの横幅を調整する

ツイートの横幅を調整するには、以下のように記入します。

書式

#style(style=width:数字px;){{
#media(ツイートURL)
}}

数字の部分に入れた値が横幅になります。単位はpxです。

使用例

#style(style=width:280px;){{
#media(https://twitter.com/famitsu/status/661525587895279616)
}}

今回は280pxで表示しています。横幅を変えるときは280の数字を変更してください。

使用結果

関連リンク一覧

構文・プラグイン一覧の関連リンク

動画、静画、Twitterを貼り付ける

Twitter・ニュースの関連リンク

関連するニュース記事を収集

コメント

ゲスト
コメントを入力する。
投稿前に利用規約をご確認ください。
ゲスト

コメントの投稿が完了した時点で、本サービスの利用規約に同意したものとさせていただきます。

アクセスランキング

編集メンバー参加申請

こちらの申請フォームより、Wikiの管理人へ参加申請をしてください。

管理人が申請を承認すると、編集メンバーに参加できます。

編集メンバーの詳細はこちらから。

あなたのアカウント ゲスト
サイト名 電ファミニコゲーマー攻略Wikiマニュアル
メッセージ ※メッセージは100文字以内で入力してください。
編集メンバー参加申請

編集に参加するにはログインが必要です。

電ファミニコゲーマー攻略Wikiマニュアルへようこそ!

{{isNeedLogin ? 'この機能のご利用には、Twitterでログインをお願いします。' : 'ログインはTwitterのアカウント連携で行います。'}}
※勝手にツイートすることはありません。