エンジニア足立のコーディング日記

エンジニア足立のコーディング日記

ブログトップへ >> 『2014年5月』の記事一覧

RSS twitterのウィジェット

この記事を読むのに掛る所要時間: 38

今日はtwitterのタイムラインをサイトに表示させてみました。

 

方法は、まず取得しているアカウントでtwitterの画面にログインします。

 

そして、右上にあるメニューから「設定」を選択します。
twitter ウィジェット01

 

すると、

画面の左下に「ウィジェット」というメニューが出てくるので、選択します。↓
twitter ウィジェット02

 

次に、画面右横の「新規作成」をクリックします。↓
twitter03

 

この様な画面に出てくるので、↓

「高さ」や「テーマ」、「リンクの色」などを設定して、「ウィジェットを作成」をクリックします。
twitter ウィジェット04

 

すると、以下の様にソースを取得出来るので、

 

サイトの表示させたい箇所に貼り付けてやればOKです。

twitter ウィジェット05

 

タイムラインの横幅や高さは自動で取得してくれるみたいですが、
指定することも可能です。

具体的には、
「class=”twitter-timeline”」というクラスを指定している<a>タグに「width=””」と「height=””」を指定してやります。

 

例えば、こんな感じです↓↓
=================================================================
<a class=”twitter-timeline” width=”520″ height=”200px” href=”https://twitter.com/xxxxxxxxxxx”  data-widget-id=”000000000000000″>@〇〇〇〇 からのツイート</a>
=================================================================
※因みに、
 横幅の最小は「180px」、最大は「520px」、高さは最小で「200px」となっているようです。

 

あと、
「data-chrome」を設定することでインターフェースを変更することも可能なようです。

「data-chrome」で設定できる項目は、
以下の5つになります。
noheader:タイムラインのヘッダーを表示させない
nofooter:タイムラインのフッターを表示させない
noborders:ウィジェットのボーダー(枠線)を削除する
noscrollbar:タイムラインのスクロールバーを非表示にする
transparent:タイムラインの背景を透明にする

半角スペースで区切れば、複数設定することも可能です。

 

例えば、こんな感じです↓↓
=================================================================
<a class=”twitter-timeline” data-chrome=”noheader nofooter transparent” width=”520″ height=”200px” href=”https://twitter.com/xxxxxxxxxxx”  data-widget-id=”000000000000000″>@〇〇〇〇 からのツイート</a>
=================================================================

このページのTOPへ戻る

著者情報

足立 拓也(あだち たくや)
1980年生まれ。
出身:兵庫県丹波市。
趣味:ボクシングジム通い。
特技:歴史の話しをすること。
一言:頑張って面白いブログを書きます。

月別アーカイブ

  •  

    • [—]2017 (10)
    • [+]2016 (49)
    • [+]2015 (86)
    • [+]2014 (81)
    • [+]2013 (104)
    • [+]2012 (78)
  • カテゴリー