twitter ウィジェット01

その他もろもろ

twitterのウィジェット

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

 

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

 

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

 

すると、

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

 

次に、画面右横の「新規作成」をクリックします。↓
twitter ウィジェット

 

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

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

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

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

twitter ウィジェット

 

タイムラインの横幅や高さは自動で取得してくれるみたいですが、

指定することも可能です。

具体的には、

「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>

関連記事

  1. CMS(Content Management)

    その他もろもろ

    Joomlaをインストールしてみました!!

    今回はJoomlaをインストールしてみました。まず、事前にデー…

  2. Java

    その他もろもろ

    eclipse上からTomcatの起動設定

    前回書いた「Eclipse+Tomcatの開発環境を作成」の記事で…

  3. Piwikトラッキングコード05

    その他もろもろ

    Piwikのトラッキングコードを設定

    Piwikのトラッキングコード設定です。まず、画面…

  4. .htaccess

    その他もろもろ

    .htaccessを使って、wwwあり・なしを統一

    サイトを運営する際に、ドメインに「www」を付けて運用するのか、付…

  5. カザフスタン アイキャッチ

    その他もろもろ

    カザフスタン旅行を計画中

    本日は少し時間に余裕があったので、旅行ネタでも載せておきます。…

  6. その他もろもろ

    apple-touch-icon.png

    サーバーのエラーログを見ると、File does not exis…

最近の記事

  1. JavaScript
  2. バージョンアップ
  3. JavaScript
  4. セキュリティー
  5. JavaScript
PAGE TOP