ランキングに参加中です♪応援クリックをいただけると とても嬉しいです♪
人気ブログランキングへ

twitter

ブログにツイッターを埋め込む方法(1.ツイート2.タイムライン3.フォローボタン)

こんにちは、専業アフィリエイターの孔雀です。

この記事では、ブログにツイッターのツイート文、タイムライン、フォローボタンを埋め込む方法について解説していきたいと思います。

この記事は、主に以下のような人をターゲットに書いています。

この記事を読むべき人

  • ブログにツイッターのツイート文を埋め込む方法を知りたい人
  • ブログにツイッターのタイムラインを埋め込み方法を知りたい人
  • ブログにツイッターのフォローボタンを設置する方法を知りたい人

ブログにツイッターを埋め込むことで、ブログに訪問してきた読者を自分のツイッターに誘導させることが可能になります。

ツイッターからブログ記事へ流入させるだけでなく、ブログからもツイッターへ流入させるような仕組みを作っていきましょう。

スポンサーリンク

ブログにツイッターを埋め込む方法

ブログに埋め込み可能なツイッターのコンテンツは、主に以下の3つがあります。

①ツイート
②タイムライン
③フォローボタン

1つずつ埋め込み方法を解説していきます。

ツイート文の埋め込み方法

これは自分が呟いたツイート文だけでなく、他人の呟いたツイート文も埋め込むことが可能です。

まず、埋め込みたいツイート文の右上にある矢印部分をクリックします。

ブログにツイッターを埋め込む方法

ツイートを埋め込む」をクリックします。

ブログにツイッターを埋め込む方法

set customization options.」のリンク(下の画像の赤枠部分)をクリックします。

ブログにツイッターを埋め込む方法

①と②のカスタマイズを選択します。

ちなみに、カスタマイズの内容は下記の通りです。

  • ①は背景色の選択で、「Light」は白、「Dark」は黒になります。
  • ②は言語の選択ですが、デフォルトの「Automatic」のままでOKです。
  • 設定が完了したら、「Update」をクリックします。

    ブログにツイッターを埋め込む方法

    Copy Code」をクリックします。

    これでブログへ貼り付けるタグがコピーされました。

    ブログにツイッターを埋め込む方法

    次に、コピーしたタグをブログへ貼り付ける作業です。

    貼り付ける場合は、必ずhtmlが編集できるモードに切り替えてから貼るようにします。

    例えば、WordPressなら「テキスト」モード、

    ブログにツイッターを埋め込む方法

    はてなブログの場合は「HTML編集」モードといった具合です。

    ブログにツイッターを埋め込む方法

    ブログへ正しく貼り付けられれば、以下のように表示されます。

    ブログにツイッターを埋め込む方法

    タイムラインの埋め込み方法

    次に、特定のアカウントで表示されるタイムラインを埋め込む方法です。

    まず、タイムラインを埋め込みたいツイッターアカウントのTOPページアドレスをコピーします。

    孔雀
    ツイッターアカウントのTOPページのアドレスを確認するには、自分が運営しているアカウントなら「プロフィール」、他のアカウントなら「ツイッターアイコン」をクリックした時に表示されるのがTOPページのアドレスだよ

    次に、「https://publish.twitter.com/」をクリックし、コピーしたアドレスを入力して矢印部分をクリックします。

    ツイッターのタイムラインの埋め込み方法

    左側の「Embedded Timeline」をクリックします。

    ツイッターのタイムラインの埋め込み方法

    set customization options.」のリンク(下の画像の赤枠部分)をクリックします。

    ツイッターのタイムラインの埋め込み方法

    埋め込むタイムラインのサイズ(高さ、横幅)を指定します。

    数字の単位は、px(ピクセル)です。

    下にプレビューがリアルタイムで表示されるので、それを確認しながら設定するといいと思います。

    そして、①と②のカスタマイズを設定します。

    ちなみに、カスタマイズの内容は下記の通りです。

  • ①は背景色の選択で、「Light」は白、「Dark」は黒になります。
  • ②は言語の選択ですが、デフォルトの「Automatic」のままでOKです。
  • 設定が完了したら、「Update」をクリックします。

    ツイッターのタイムラインの埋め込み方法

    Copy Code」をクリックします。

    これでブログへ貼り付けるタグがコピーされました。

    ツイッターのタイムラインの埋め込み方法

    次に、コピーしたタグをブログへ貼り付ける作業です。

    貼り付ける場合は、必ずhtmlが編集できるモードに切り替えてから貼るようにします。

    例えば、WordPressなら「テキスト」モード、

    ツイッターのタイムラインの埋め込み方法

    はてなブログの場合は「HTML編集」モードといった具合です。

    ツイッターのタイムラインの埋め込み方法

    ブログへ正しく貼り付けられれば、以下のように表示されます。

    ツイッターのタイムラインの埋め込み方法

    フォローボタンの設置方法(フォロワー数を表示)

    次に、自分が管理するツイッターアカウントのフォローボタンを設置する方法です。

    これを設置することで、わざわざツイッターのプロフィール画面に飛ばなくてもブログから直接フォローできるようになります。

    ブログから直接ツイッターへのフォローができるようになります。

    フォローボタンを設置したいツイッターアカウントのTOPページアドレスをコピーします。

    次に、「https://publish.twitter.com/」をクリックし、コピーしたアドレスを入力して矢印部分をクリックします。

    ツイッターのフォローボタンの設置方法(フォロワー数を表示)

    右側にある「Twitter Buttons」をクリックします。

    ツイッターのフォローボタンの設置方法(フォロワー数を表示)

    左側にある「Follow Button」をクリックします。

    ツイッターのフォローボタンの設置方法(フォロワー数を表示)

    set customization options.」のリンク(下の画像の赤枠部分)をクリックします。

    ツツイッターのフォローボタンの設置方法(フォロワー数を表示)

    ①と②のカスタマイズを指定します。

    下にプレビューがリアルタイムで表示されるので、それを確認しながら設定するといいと思います。

    カスタマイズの内容は以下の通りです。

    ①・・・フォローボタンにツイッターアカウントのIDを表示させない場合にチェックを入れます。
    ②・・・やや大きめのフォローボタンにしたい場合ににチェックを入れます。

    設定が完了したら、「Update」をクリックします。

    ツイッターのフォローボタンの設置方法(フォロワー数を表示)

    Copy Code」をクリックします。

    これでブログへ貼り付けるタグがコピーされました。

    ツイッターのフォローボタンの設置方法(フォロワー数を表示)

    コピーしたコードをブログで表示させたい箇所に挿入すればOKです。

    このフォローボタンをクリックするたけで、指定したアカウントへのフォローが完了します。

    ツイッターのフォローボタンの設置方法(フォロワー数を表示)

    ツイッターのフォローボタンの横にフォロワー数を表示させる方法

    フォローボタンの横にフォロワー数が表示されるバナーも設置できます。

    以下のようなバナーですね。

    表示例


    上でコピーしたコード内にあるタグの一部を書き換えることで表示させることが可能です。

    ツイッターのフォローボタンの設置方法(フォロワー数を表示)

    タグの一部を以下のように変更すると、フォロワー数が表示されるバナーが追加されます。

    data-show-count="false"」⇒「data-show-count="true"

    ブログにツイッターを埋め込む方法まとめ

    今回は、ブログにツイッターのツイート文、タイムライン、フォローボタンを埋め込む方法について解説してみました。

    最近はブログとツイッターを連動させて運用するのが一般化してきたので、やり方をおぼえて取り入れてみてください。

    関連記事

    最後までお読みいただき、ありがとうございました♪ 応援クリックをいただけると励みになります♪
    人気ブログランキングへ
    • この記事を書いた人

    孔雀

    2004年にアフィリ業界に参入。 2017年から脱サラし、専業アフィリエイターに転職。 ほぼ独学でSEO、マーケティングを学び、2018年6月にアフィリエイトのみで月収50万円を達成。 誰にも縛られない自由な生活を求めて日々精進中。 最終目標は、何もせずに収入が入ってくる不労所得を作り出すこと。

    -twitter

    Copyright© 孔雀流アフィリエイトブログの始め方 , 2020 All Rights Reserved.