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

ブログ内検索

※本記事はプロモーションが含まれています。

twitter

ブログにツイッターを埋め込む方法(1.ツイート2.タイムライン3.フォローボタン)と著作権に関する注意事項

2020年5月1日

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

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

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

この記事を読むべき人

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

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

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

スポンサーリンク

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

ブログに埋め込み可能なツイッターのコンテンツは、主に以下の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ページアドレスをコピーします。

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

    ブログにツイッターを埋め込む時の著作権に関する注意事項

    自分がツイートした呟きを自分のブログに埋め込むのは問題ありませんが、他人のツイートした呟きをブログに埋め込む場合には注意が必要です。

    ツイッターの利用規約上では、ツイッター上の機能を使って他人のツイートを他人の許可なくブログに埋め込む行為自体は違反行為にはなりません。

    ただし、そのツイートの中に著作権を侵害する画像などが使われている場合には、そのツイートをブログに埋め込んだ側も著作権侵害となる可能性が出てくるので注意です。

    孔雀
    また、埋め込んだツイート元からクレームなどがあった場合にはただちに埋め込んだツイートを削除する配慮も必要だよ

    まとめ:ブログにツイッターを埋め込む方法(1.ツイート2.タイムライン3.フォローボタン)と著作権に関する注意事項

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

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

    関連記事

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

    人気おすすめ記事

    • この記事を書いた人

    孔雀

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

    -twitter

    © 2024 孔雀イズム