【PR】当サイトでは広告を掲載しています

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

Twitterのタイムラインをサイドバーに表示する方法 Twitter・Facebook・SNS関連

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

ツイッターとの連携で集客効果やフォロワーを増やせる可能性もありますし、設置も簡単です。

必要なのはTwitterのアカウントだけ。ちなみに色は「明るい」のと「暗い」の2種類から選ぶ事ができます。

タイムラインではなくて個別のTweetを埋め込む方法は以下記事を参考にしてみてください。

【図解】WordPressブログの記事内にTwitter(X)のツイートを埋め込む方法
Twitter(X)では自分のツイートや他人のツイートを記事内に埋め込んで紹介す...
著作者情報
このサイトの管理人

WEBエンジニア11年目。これまでに100を超えるサイトの立ち上げや運営に携わり、2017年に法人化。カスタマイズ、デザイン、ツール作成、サイト移転まで何でもこなします。

Twitterのタイムライン設置方法

タイムラインを表示させたいTwitterアカウントのプロフィールをクリックして上部に表示されているURLをコピー。

Twitterのタイムラインをブログに設置する手順1

次にTwitter publishを開きます。

https://publish.twitter.com/

Twitter publishの検索窓に先程コピーしたプロフィールのURLを貼り付けして「→」をクリック。

Twitterのタイムラインをブログに設置する手順2

次に「Embedded Timeline(タイムラインの埋め込み)」を選択。

Twitterのタイムラインをブログに埋め込む方法3

その下にある「set customization options」部分をクリックして設定をしていきます。

Twitterのタイムラインをブログに埋め込む方法4

以下のような設定項目が出てきます。

Twitterのタイムラインをブログに埋め込む方法5

  • 埋め込むタイムラインのサイズ(px)
  • 色:白(Light)と黒(Dark)から選択
  • 言語:AutomaticのままでOK

下にプレビューが表示されるので見ながら調整してみてください。

サイズに関してよく分からない場合はそのまま埋め込んでみてください。横幅はピッタリになるように自動でサイズ変更されます。

設定できたら「update」をクリック。

Twitterのタイムラインをブログに埋め込む方法7

コードが表示されるので「Copy Code」をクリックしてコードをコピー。

Twitterのタイムラインをブログに設置する手順3

後はコピーしたコードを貼り付けたい場所に貼り付けたらOKです。

WordPressのサイドバーに貼り付ける場合

WordPressの管理画面から「外観」⇒「ウィジェット」と進み、サイドバーにテキストや、カスタムHTMLのボックスを追加してコピーしたコードを貼り付けて保存。

Twitterのタイムラインをブログに設置する手順4

これでサイドバーTwitterのタイムラインが表示されます。

【図解】WordPressブログの記事内にTwitter(X)のツイートを埋め込む方法
Twitter(X)では自分のツイートや他人のツイートを記事内に埋め込んで紹介す...
記事下Twitter自動ツール

Twitter(X)は自動ツールを使って稼げる?

Twitter(X)のアフィリエイトでは自動投稿ツール(bot)を利用する方が多いです。

自動投稿ツールを利用して予約投稿や繰り返し投稿をすることで、フォロワーを増やしたり、売上を作ることができます。

私も自動投稿ツール使ってブログへ集客していますが「全自動売上発生マシーン」になります。Twitterで稼ぐなら他のツールは不要!これだけあれば十分です。

↓マネートラック

↓DMMアフィリエイト
Twitterアフィリエイト成果1

↓Amazonアソシエイト
Amazon成果

私が利用しているのが、「Twitter自動投稿予約ツール」で、予約投稿、セットしたツイートの繰り返し投稿、ツリー型投稿、複数アカウントの利用OKで一括管理も可能というツールです

Twitter自動投稿予約ツールでできる事

  • 画像、動画、引用、スレッド(ツリー)の自動投稿
  • ツイートの「予約日時」の設定可能
  • 一度セットすれば「繰り返し」無限に投稿も可能
  • 曜日毎の予約時間を自動反映可能
  • アナリティクスデータを元に分析が可能
  • ツイートの予約投稿件数は10,000件
  • 複数のツイッターアカウントでも使用可
  • 複数アカウントの投稿時間も1シートでまとめて確認可能
  • PCで設定が終わればスマホからも予約可能
  • 無制限のサポートあり
  • 買い切りなので一度買ったらずっと使える

Amazonや楽天などのセール情報、アダルトアフィリエイト、ブログ記事への誘導、情報商材の定期ポストや繰り返し投稿などなんでも利用できます。

10円でも売上が発生したならそれを自動化して横展開して増やしていくことができます。

Twitterを自動化させればツールがあなたの代わりに24時間365日休みなく営業してくれますよ!

サブスクとかはなく買い切りのツールで一度購入したらずっと利用できますし、複数アカウントにも利用できます。

※販売終了してたらすみません!

「Twitter自動投稿予約ツール」の詳細ページはこちら

↓Twitter自動投稿ツールのレビュー記事はこちら↓
おすすめのTwitter(X)自動投稿予約ツール。botのように定期ツイートや繰り返しポストも可能
X(Twitter)はアフィリエイトなどとも相性がよく、SEO完全無視ですぐにマ...

Twitter自動投稿ツールのレビュー1

Twitter自動投稿ツールのレビュー2

Twitter自動投稿ツールのレビュー3

Twitter自動投稿ツールのレビュー4

Twitter自動投稿ツールのレビュー5

Twitter自動投稿ツールのレビュー6

Twitter自動投稿ツールのレビュー7

Twitter自動投稿ツールのレビュー8

Twitter自動投稿ツールのレビュー9

Twitter自動投稿ツールのレビュー10

■Twitter(X)自動投稿予約ツール
「Twitter(X)自動投稿予約ツール」の詳細ページはこちら

Twitter・Facebook・SNS関連

コメント

  1. らすかる♪ より:

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

    • しげぞう より:

      らすかる♪様

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

  2. りた より:

    しげぞう様

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

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

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

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

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

    • しげぞう より:

      りた様

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

      1.タイトルについて

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

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

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

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

      .share {
          margin-bottom: 30px;
      }

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

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

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

  3. りた より:

    しげぞう様

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

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

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

  4. りた より:

    しげぞう様

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

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

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

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

    twitterタイムライン

    CSS
    div.twitter_widget_style {
    width: 300px;
    }

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

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

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

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

  5. りた より:

    しげぞう様

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

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

タイトルとURLをコピーしました