Twitterのタイムラインをサイドバーに表示する方法

今回はツイッターとの連携という事でサイトやブログのサイドバーにタイムラインを表示する方法を紹介していきます。

もちろんこのブログで紹介しているアメブロでもシーサーブログでもWordPressでも表示させる事ができるので、それぞれのやり方も解説してみます。

ツイッターとの連携で集客効果やフォロワーを増やせる可能性もありますし、設置も簡単です。必要なのはツイッターのアカウントだけ。ちなみに色は「明るい」のと「暗い」の2種類から選ぶ事ができます。

ツイッターサイド-5

これの設置方法を紹介していきます。

ツイッター設置の手順

ツイッターのタイムラインをサイドバーに表示するためにツイッターにログインしておきます。ログインしたら右上の歯車のマークをクリックして「設定」をクリック。

ツイッターサイド-15

クリックしたら左のサイドバーに「ウィジェット」という項目があるのでクリック。

ツイッターサイド-3

ここで「ウィジェット」の「新規作成」をクリックします。

ツイッターサイド-4

次の画面で各種設定ができます。

ツイッターサイド-6

画像を表示するかどうかや高さ、それから最初の画像で紹介したように「明るい」と「暗い」の2種類のテーマが選択できます。任意で変更をして「ウィジェット」を作成をクリックすると下にコードが表示されます。

ツイッターサイド-7

このコードをサイドバーに貼り付ければ完成です。

Seesaaブログの場合

シーサーブログの管理画面から「デザイン」⇒「コンテンツ」と進み、「自由形式」をサイドバーに追加してこのコードを追加。

ツイッターサイド-8

また、ブログで表示を確認してみて上や下のコンテンツとの余白が欲しい(詰まっている)場合はツイッターのコードの前後に改行タグ<br />を追加する事で上や下に余白を作る事もできます。

それから自由形式にタイトルを付けて表示したい場合、例えば「ツイッターのタイムライン」とかタイトルを表示したい場合はこの記事を参考にして下さい。
Seesaaブログの自由形式のタイトルを表示させる方法

アメブロに追加する場合

アメブロに追加する場合は「マイページ」右上の設定マークをクリックして「プラグインの追加」をクリック。

ツイッターサイド-9

プラグインの追加というページになるので「フリープラグイン」をクリックして取得したコードを追加して保存。

ツイッターサイド-10

「新たにプラグインの追加をした方→サイドバーに配置してください。設定はこちら」という表示がでるので「こちら」という部分のリンクをクリックします。

ツイッターサイド-11

それでコードを追加したフリープラグインをサイドバーの好きな位置に移動させれば完了です。

また、アメブロの場合もブログで表示を確認してみて上や下のコンテンツとの余白が欲しい(詰まっている)場合はツイッターのコードの前後に改行タグ<br />を追加する事で上や下に余白を作る事もできます。

ツイッターサイド-12

WordPressに追加する場合

WordPressの場合は管理画面から「外観」⇒「ウィジェット」と進みます。

ツイッターサイド-13

サイドバーに「テキスト」を追加してテキスト内にコードを追加して「保存」すればOK。

ツイッターサイド-14

WordPressの場合もブログで表示を確認してみて上や下のコンテンツとの余白が欲しい(詰まっている)場合はツイッターのコードの前後に改行タグ<br />を追加する事で上や下に余白を作る事もできます。

以上ブログのサイドバーにツイッターのタイムラインを表示する方法です。他にも任意のツイートを記事内で紹介する方法もあるので紹介しておきます。

Twitterのタイムラインをサイドバーに表示する方法”に8件のコメントがあります。

※入院生活から復活しました!!またできるだけ返信しますのでよろしくお願いします(^^)

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

  1. しげぞう 投稿作成者

    りた様

    無事に解決できたようで良かったです。また何かあれば遠慮無くコメント下さい。こちらこそよろしくお願い致します。

  2. りた

    しげぞう様

    りたです。先程の件ですが、時間が解決してくれました。
    また、PCのみタイムラインがみえる設定も完了いたしました。

    お騒がせして申し訳ございません。
    今後共、宜しくお願い致します。

  3. りた

    しげぞう様

    度々すみません。現在Twitterの埋め込みタイムラインを色々いじっていたら、修正できない箇所が発生していまったので、質問させて下さい。

    Twitterの埋め込みタイムラインの幅やスマホのみ非表示など設定していたら、スマホのホーム画面における埋め込みタイムラインが編集できなくなってしまいました。

    これはまずいと思い、ひとまずTwitterの埋め込みタイムラインのコードを全消去したのですが、それでもスマホのホーム画面の埋め込みタイムラインだけ残っている状態です。
    他の記事では削除することができました。
    色々調べたのですが、原因不明でお伺いしている次第です。

    幅を修正するために挿入したコード

    twitterタイムライン

    CSS
    div.twitter_widget_style {
    width: 300px;
    }

    スマホのみ非表示したく、挿入したコード

    記事の更新はこちらから!
    twitterのタイムライン

    何かしらコードミスによる影響なのでしょうか?それとも時間による問題なのでしょうか?

    本当に質問を何度も連投してしまい、本当に申し訳ございません。
    お手隙の間に、ご教授して頂ければ幸いです。
    何卒、宜しくお願い致します。

  4. りた

    しげぞう様

    迅速なご返信、誠にありがとうございます。
    クラスですが、私が勘違いしていました。誤解をお招きしてしまし、大変申し訳ございませんでいした。
    タイトルですが、今までしげぞう様から頂いたコードから解決することができました!もう少し自分で考えるべきでした。これからはもう少し考えてから質問します。本当にすみません。

    また、ツイッターのタイムラインの位置調整、承知致しました。非常に悩ましいところですが、SNSからの流入は貴重なので、設置します!

    今後も質問すると思いますが
    何卒、宜しくお願い致します。

  5. しげぞう 投稿作成者

    りた様

    コメントありがとうございます。1つ1つ回答してみますね。

    1.タイトルについて

    タイトルというのは見出しの事だと思います。私の場合はFacebook、Twitterを呼び出す前に見出し「h4」を使って見出しを設置してます。なので、固定ページと個別ページそれぞれTwitterのタイムラインを設置するコードの直前に見出しタグを入れるとタイトル(見出し)になります。

    また、「h4」の見出しは装飾されていないので、スタイルシートで他の見出し同様に装飾をする必要があります。これは「h3」を使ってもいいかと思います。

    2.Twitterの位置調整について

    クラス名「tt」が見当たらないのです、すみません。私が見つけられないだけかもしれませんが、一応SNSボタンの下にあるようなので、SNSボタンの下に余白を作ります。スタイルシートに次のコードを追加でOKかと思います。

    .share {
        margin-bottom: 30px;
    }

    3.スマホのタイムラインについて

    Twitterのウェイジェットは高さだけを指定するタイプだったと思いますので、横幅は自動で調整されると思います。TwitterやFacebookの表示はJavaScriptを使うので若干読み込みに時間がかかる場合もあります。表示速度をあげる観点で言えば本当は外した方が良いのかも知れませんが、これは何を優先するかで変わってくると思いますので、りた様の判断になると思います。

    また何かあればコメント下さい。

  6. りた

    しげぞう様

    いつもお世話になっております。りたです。
    本日、twotterでブログ更新しようと考え、サブアカウントを入手して、単一記事及び固定ページにタイムラインを貼り付けることができました。そこで、数点ご質問したいことがあります。

    ①タイトルについて
    しげぞう様のブログのようなタイトルを作るにはどのようばコードを挿入すればよろしいのでしょうか?

    ②twitterのタイムラインにおける位置について
    上下の余白を作りたいのですが、どうようなコードをうちこめばよいのでしょうか?クラスはttに定義致しました。

    ③スマホにおけるtwitterのタイムラインについて
    twitterのタイムラインを貼り付けた後に、スマホで確認したのですが、負荷がかかっているように感じました。スマホ用に幅を指定したわけではないのですが、自動的に幅が修正されていたので、これが原因かと思いました。
    スマホ用に幅を指定する方法をご教授して頂ければ、幸いです。

    しげぞう様に頼りっきりで大変恐縮ですが、何卒宜しくお願い致します。

  7. しげぞう 投稿作成者

    らすかる♪様

    わざわざありがとうございます!また分からない部分や質問などありましたらいつでもコメント下さいませ!今後もよろしくお願い致します。

  8. らすかる♪

    アメブロでの追加方法がわからなかったので参考にさせていただきました
    細かく説明されててとてもわかりやすかったです
    ありがとうございました(*^_^*)