Twitterのウィジェット「埋め込みタイムライン」を使ってみよう - デザインってオモシロイ -MdN Design Interactive-
デザインってオモシロイ MdN Design Interactive

Twitterのウィジェット「埋め込みタイムライン」を使ってみよう

  • 新規会員登録
  • ログイン管理
  • Twitter
  • facebook
  • はてなブックマーク
  • RSS

2026.4.25 SAT

  • TOP
  • 特集
  • 連載
    • ALL
    • デザイン・アート
    • テクノロジー
    • コラム
    • インタビュー
    • レポート
    • インサイト
  • Tech
    • ALL
    • プログラミング
    • UI/UX
    • フレームワーク
    • Webアプリ
    • Webサービス
    • その他
  • ニュース
    • ALL
    • ニュース
    • 新製品
    • テクノロジー
    • アートイベント
    • モバイル
    • ネットで話題
新規会員登録
ログイン管理
  • プレスリリース
  • メルマガの登録・解除
  • プライバシーポリシー
  • 特定商取引法
  • 利用規約
  • お問合せ
  • 広告掲載について
  • インプレスグループ
閉じる
  • TOP
  • ニュース -
  • Twitterのウィジェット「埋め込みタイムライン」を使ってみよう
【サイトリニューアル!】新サイトはこちら/MdNについて
  • ALL
  • ニュース
  • 新製品
  • テクノロジー
  • アートイベント
  • モバイル
  • ネットで話題

コラム

2012.9.6 THU

Twitterのウィジェット「埋め込みタイムライン」を使ってみよう

Twitterのウィジェット「埋め込みタイムライン」を使ってみよう

2012年09月06日
TEXT:編集部


TwitterよりWebサイトオーナー向けに「埋め込みタイムライン」の提供が開始となりました。このウィジェットを使うことで、TwitterのタイムラインをWebサイトへ手軽に組み込むことができます。さらに、埋め込んだタイムラインからほかのユーザーがつぶやく機能も用意されています。設定も非常に簡単なので、ぜひお試しください。



1. ウィジェットの設定画面にアクセス
PCのWebブラウザからTwitterにログインしたのち、設定画面から「ウィジェット」を選択します。ここから[新規作成]ボタンを押して作成を開始しましょう。

右上のアイコンから「設定」を選択
右上のアイコンから「設定」を選択

左のメニューから「ウィジェット」を選びましょう
左のメニューから「ウィジェット」を選びましょう

[新規作成]ボタンを押して作成します
[新規作成]ボタンを押して作成します



2. ツール画面で各種設定
[新規作成]ボタンを押すと、以下のような設定画面が表示されます。「タイムライン」「お気に入り」「リスト」「検索」とそれぞれに関する埋め込みタイムラインが作成できますが、ここでは通常のタイムラインを作成します。左側の「オプション」にある項目を変更してカスタマイズしていきます。カスタマイズした結果は右側のプレビューで確認が可能。オプションの項目は以下の通りです。設定が終わったら[ウィジェットを作成]ボタンをクリックします。

●ユーザー名
Twitterアカウント名を入力します。ほかのユーザーのアカウント名を入れることもできます。

●高さ
タイムラインの高さをピクセル単位で変更できます。なお、デフォルトのサイズは520×600ピクセル。横幅はWebサイトに合わせて自動で変更されます。

●テーマ
「明るい」「暗い」の2種類から設定できます。ツイートに添付した画像などを事前に開いた状態で表示させたい場合は「画像を自動的に開く」にチェックを入れましょう。

●リンクの色
リンクの色が設定できます。カラーピッカーから選択したり、Webカラーで指定しましょう

●ドメイン
埋め込むWebサイトのドメインを入力します。さらにTwitterのカスタマイズ機能を無効にしたい場合はチェックボックスをクリックしましょう。

ツール画面
ツール画面



3. コードを取得してWebサイトに埋め込む
すると画面下部に、コードが表示されました。このコードをコピーしてWebサイトに張り付けましょう。実際にこのWebページ最下部にも埋め込んでみました。たったこれだけで、WebサイトにTwitterのタイムラインが表示できますので、興味のある方はぜひお試しください。

このようにコードが表示されます
このようにコードが表示されます





@MdN_tsushin からのツイート

twitter facebook このエントリーをはてなブックマークに追加 RSS
【サイトリニューアル!】新サイトはこちら/MdNについて

前の記事を読む

今さら聞けない! レンタルサーバの選定と便利な使い方 第3回

今さら聞けない! レンタルサーバの選定と便利な使い方 第3回

2012.9.5 WED

次の記事を読む

クローンサービスの挑戦を受けるiPhone5

クローンサービスの挑戦を受けるiPhone5

2012.9.10 MON

アクセスランキング

8.30-9.5

  • 携帯大手3社、メッセージアプリ「+メッセージ」を各社全ブランドとMVNOに拡大
  • テレビの音声をワイヤレス化して飛ばせる「トランスミッター」発売、サンワサプライから
  • iPhone 12/iPhone 12 Proに音の不具合、対象モデルは無償修理へ
  • ビクトリノックス、30色バリエーションのマルチツール「クラシック カラーズ」を発売
  • 今月発表のiPhone13、低軌道衛星通信を使い“圏外”でもテキスト送信などが可能か
MdN BOOKS|デザインの本

Pick upコンテンツ

現在

  • 【文房具連載】第19回 五十嵐製紙「Food Paper」/物語のある、ニューフェイスな文房具・雑貨
  • 見た目のかわいさだけじゃない、犬の形をした実用性の高いウェブカメラ
  • この秋に発表予定のiPhone 13(仮称)はどのような変貌を遂げるのか?
  • 植物性由来100%、合成香料不使用など、エコな洗濯洗剤5選/ライフスタイル連載・こんげつのきぶん
  • 【DESIGN DIGEST】書籍カバー『顔のない花嫁/K.R.アレグザンダー』、商品パッケージ『秋の限定商品/アフタヌーンティー・ティールーム』

MdN公式Instagram

Instagramでは、デザイン関連本や本に関連した参加型コンテストについて発信しています。

page top
MdN
impress
  • メルマガの登録・解除
  • プライバシーポリシー
  • 特定商取引法
  • 利用規約
  • お問合せ
  • 会社概要
  • インプレスグループ
  • 広告掲載について
  • MdN デザインの本
  • MdN新書 新ジャーナリズム宣言。
  • “静寂”文具サイト
  • MdN DESIGNFONT STORE

Copyright © MdN Corporation,
an Impress Group company. All rights reserved.

page top
MdN
impress
  • メルマガの登録・解除
  • プライバシーポリシー
  • 特定商取引法
  • 利用規約
  • お問合せ
  • 会社概要
  • 広告掲載について
  • インプレスグループ
  • MdN デザインの本
  • MdN新書 新ジャーナリズム宣言。
  • “静寂”文具サイト
  • MdN DESIGNFONT STORE

Copyright © MdN Corporation,
an Impress Group company. All rights reserved.