紅蓮ブログ

アフィリエイトのことが全く分からないあなたに超簡単に詳しく、実戦形式でお話していくブログです

はてなブログにTwitterを埋め込む方法【初心者向け】

f:id:slash1196:20210709212020j:plain

f:id:slash1196:20200520205950j:plain

はてなブログ初心者

「はてなブログで書いているんだけど、Twitterの埋め込みってどうやったらいいのかな。

教えてほしいな。」

 

こんなお悩みにお答えします。

 

  この記事でわかること

  • はてなブログにTwitterを埋め込む方法
  • ブログにTwitterやタイムラインを埋め込むメリット

 

こんにちわ、紅蓮です。

 

はてなブログで書いていて、Twitterってどうやって記事中やサイドバーに埋め込んでるんやろうって思うことはありませんか?

 

そんなあなたに今回ははてなブログでTwitterを埋め込む方法ですね。

 

この記事を読むとはてなブログにTwitterを埋め込む方法はもちろん、Twitterを埋め込むメリットもまるっとわかっちゃいます。

 

この記事を書く僕は、はてなブログ歴は3年ほど。

現在は、ブログ収益も月3000円を超えるまでになりました。

 

そんな僕が、Twitterの埋め込み方法のすべてをお話していきます。

 

では早速行ってみましょう。

Here We Go!!

 

目次

 

はてなブログにTwitterを埋め込む方法

f:id:slash1196:20210708173159j:plain

では早速はてなブログにTwitterを埋め込む方法をお話していきましょう。

 

方法は2つあり、以下の通り。

 

  • 方法①記事の文中にTwitterを埋め込む方法
  • 方法②Twitterのサイドバーにタイムラインを入れる方法

 

では詳しく見ていきましょう。

方法①記事の文中にTwitterを埋め込む方法

ではまず、記事の文中にTwitterを埋め込む方法からお話していきましょう。

 

つぶやきを文中に埋め込む方法は、3つあります。

 

  • 埋め込み方法①リンクをはる方法
  • 埋め込み方法②Twitterと連携してサイドメニューから入れる方法
  • 埋め込み方法③HTMLで埋め込む方法

 

では詳しく見ていくことにしましょう。

 

埋め込み方法①リンクで埋め込む方法

記事の文中にTwitterを埋め込む方法の1つ目は、リンクで埋め込む方法ですね。

やり方は、以下の通り。

 

①-1.Twitterのツイートをクリックする

f:id:slash1196:20210709195717j:plain

まずTwitterにアクセスし、お気に入りのツイートをクリックします。

 

①-2.URLをコピーする

f:id:slash1196:20210709200406j:plain

そして、お気に入りのツイートのURLをコピーします。

 

①-3.URLをはてなブログの貼りたい場所に張り付ける

次にはてなブログの編集画面の貼りたい場所を探します。

そしてその場所に貼り付けます。

 

①-4.URLを埋め込みを選んで挿入する

f:id:slash1196:20210709200802j:plain

すると、以下のような画面が出てくるので、「埋め込み」をダブルクリックします。

すると記事に、ツイートが埋め込まれます。

f:id:slash1196:20210709200944j:plain

 

方法②Twitterと連携してサイドメニューから入れる方法

記事の文中にTwitterを埋め込む方法の2つ目は、Twitterと連携してサイドメニューから埋め込む方法です。

 

手順は以下の通り。

 

②-0.アカウント設定でTwitterと連携する

f:id:slash1196:20210709203915j:plain

まず、アカウント設定をクリックして、上部のタブの中から「外部サービス連携」をクリックします。

 

f:id:slash1196:20210709203948j:plain

そのあとに、一番上の「Twitter連携設定」を「有効にする」をクリックします。

 

f:id:slash1196:20210709204052j:plain

すると、上記のような画面になるので、「連携アプリを認証する」をクリックします。

 

f:id:slash1196:20210709204128j:plain

そして「Twitter連携設定」の下に「現在有効です」とかかれていたら、連携作業が終了です。

 

②-1.+マークをクリック

f:id:slash1196:20210709204947j:plain

 

次に、記事の編集画面に行きます。

編集画面の右下にある、+マークをクリックします。

 

②-2.Twitter貼り付けをクリック

f:id:slash1196:20210709205014j:plain

Twitter貼り付けをクリックして、スイッチを入れます。

青になっていたら、スイッチが入っているということですね。

 

②-3.Twitterマークをクリック

f:id:slash1196:20210709205116j:plain

次にTwitterマークをクリックします。

 

f:id:slash1196:20210709204500j:plain

もしない場合には右下にある・・・マークをクリックしましょう。

すると左に出てくるので、そこをクリックしましょう。

 

②-4.好きなツイートをダブルクリック

f:id:slash1196:20210709205200j:plain

次に好きなツイートを選んでダブルクリックしましょう。

すると、入れたいところに入れられますからね。

 

③HTMLで埋め込む方法

記事の文中にTwitterを埋め込む方法の3つ目は、HTML方式で埋め込む方法ですね。

 

手順は、以下の通り。

 

③-1.好きなツイートを選ぶ

まずTwitterのページにアクセスし、好きなツイートを選びます

 

③-2.右端の.・・・マークをクリック

f:id:slash1196:20210709205221j:plain

好きなツイートの右端に、・・・マークがありますのでそこをクリックしましょう。

 

③-3.ツイートを埋め込むをクリック

f:id:slash1196:20210709205313j:plain

するとドロップダウンが出てきます。

中から</>ツイートを埋め込むをクリックしましょう。

 

③-4.コードをコピーするをクリック

f:id:slash1196:20210709205858j:plain

すると、上記の画面になります。

 

コードをコピーするボタンをクリックします。

すると、ツイートをHTMLコードに変換したコードがコピーされます。

 

③-5.ブログのHTML編集で好きな場所に張り付ける

次にブログのHTML編集で好きな場所を選びます。

そこに貼り付けましょう。

 

方法②はてなブログのサイドバーにTwitterのタイムラインを入れる方法

続いて、はてなブログのサイドバーにTwitterのタイムラインを埋め込む方法をご紹介します。

 

手順は、以下の通り。

 

手順①Twitter Publish にアクセス

f:id:slash1196:20210709205507j:plain

まずTwitter Publishにアクセスしましょう。

Twitter Publishにアクセス。

 

手順②TwitterのあなたのホームのURLを入力

次に「Enter a Twitter URL」と書いてある欄に、あなたのTwitterのホーム画面のURLを入力しましょう

 

手順③表示オプションを埋め込まれたタイムラインを選択

f:id:slash1196:20210709210043j:plain

次に、Here are your display options と書かれている表示オプションを決める場所に飛ぶので、そこで左側の「Embedded Timeline」を選択しましょう。

 

手順④Set Customization Options をクリック

f:id:slash1196:20210709210123j:plain

すると、「That's all we need, unless you'd like to set customization options.」と書いてあるリンクをクリックします。

 

手順⑤大きさをカスタマイズする

f:id:slash1196:20210709210108j:plain

すると上記の画像の画面が出てくるので、タイムラインの大きさをカスタマイズしましょう。

 

数値ですが、大体以下のものがいいと思います。

 

  • Height:300pxくらい
  • Width:500~600pxくらい

 

最後に「update」を押して、カスタマイズは終了です。

 

 

手順⑥コードをコピーする

f:id:slash1196:20210709205858j:plain

すると下にHTMLコードが出てきます。

Copy Codeをクリックして、コードをコピーしましょう。

 

手順⑦はてなブログ側でデザイン→カスタマイズ→サイドバーと進む

f:id:slash1196:20210709210232j:plain

次にはてなブログに行き、「デザイン」→「カスタマイズ」→「サイドバー」と進みましょう。

 

手順⑧モジュールを追加するをクリックし、HTMLを選択

f:id:slash1196:20210709210253j:plain

次にモジュールを追加するをクリックします。

すると、サイドメニューが出てきますので</>HTMLをクリックします。

 

手順⑨必要事項を入力する

f:id:slash1196:20210709210312j:plain

すると上記の画面になりますので、必要事項を入力します。

 

必要事項は以下の通り。

 

【必要事項】

  • タイトル:Twitter
  • <p></p>:先ほどコピーしたTwitterのコードの貼り付け

 

最後に「適用ボタン」のクリックを忘れずに。

 

手順⑩プレビュー画面で確認後、保存する

次にプレビュー画面でサイドバーにタイムラインのある状況を確認します。

それでOKなら、「変更を保存する」ボタンをクリックしましょう。

 

以上で、Twitterのタイムラインをサイドバーに埋め込む方法の解説は終わります。

 

ブログにTwitterやタイムラインを埋め込むメリット

f:id:slash1196:20210613192550j:plain

ここでは、ブログにTwitterやタイムラインを埋め込むメリットをお話していきます。

 

ではまずツイートを埋め込むメリットから。

 

記事の文中にTwitterを埋め込むメリット

記事の文中にTwitterを埋め込むメリットは、以下の通り。

 

  • メリット①信頼性のある記事ができる
  • メリット②モチベーションが上がる
  • メリット③ブランディングにもなる

 

では詳しく見ていきましょう。

 

メリット①信頼性のある記事ができる

記事の文中にTwitterを埋め込むメリットの1つ目は、信頼性のある記事ができることです。

 

というのも、インフルエンサーの人のツイートをブログの中に借りることができるからなんですね。

 

例えば同じブログの稼ぎ方でも、3年間の人と10年間の人では影響力が違いますよね。比べるまでもありません。

 

ですから信頼性のある人の言葉を借りると、それ自体が証拠になりますよね。

 

信頼性のある記事ができやすくなります。

 

メリット②モチベーションが上がる

記事の文中にTwitterを埋め込むメリットの2つ目は、モチベーションが上がることです。

 

例えば自分のツイートを使う場合でも、ツイートをしていないといけないですね。

 

するとTwitterを頑張る必要が出てきますよね。

つまりTwitterを続けるモチベーションが上がるわけです。

 

メリット③ブランディングにもなる

記事の文中にTwitterを埋め込むメリットの3つ目は、ブランディングにもなることです。

 

ブログの記事内にツイートを入れておくと、あなたのツイートがブログを見ている人全員にみられることになります。

 

そうなると、「あるある。共感するぅ」と共感してフォロワーになってくれるかもしれません。

 

これがすごい勢いで増えれば影響力も強くなりますから、ブランディングができますよね。

 

Twitterのタイムラインをサイドバーに入れるメリット

Twitterのタイムラインをサイドバーに入れるメリットは、以下の通り。

 

  • メリット①ネタに困らなくなる
  • メリット②読者のユーザビリティが上がる

 

では見ていきましょう。

 

メリット①ネタに困らなくなる

Twitterのタイムラインをサイドバーに入れるメリットは、ネタに困らなくなることです。

 

というのも、サイトの中でタイムラインが見える状態だからですね。

 

すると、ツイートしたことが見えていくのでそれをネタに記事を書くこともできるようになりますよね。

 

そういう面からは、Twitterを埋め込むとネタには困りにくくなりますね。

 

メリット②読者のユーザビリティが上がる

Twitterのタイムラインをサイドバーに入れるメリットの2つ目は、読者のユーザビリティが上がることです。

 

あなたのブログにいると、サイドバーにタイムラインがあるためにあなたのツイートがずっと見える状態になります。

 

すると読者はわざわざTwitterにログインせずとも、あなたのツイートに触れることができるんです。

 

ですから使い勝手がよくなります。

 

まとめ|Twitterを埋めこんで、読者のためになるブログ制作を。

お疲れ様でした。

ここまでブログにTwitterを埋め込む方法をお話してきました。

 

まとめると、以下のようになります。

 

まとめ
  • Twitterを埋め込む方法
    • Twitterを埋め込む方法は二種類あり、以下の通り。
      • 方法①記事の文中にTwitterを埋め込む方法
      • 方法②Twitterのサイドバーにタイムラインを入れる方法
  • ブログにTwitterやタイムラインを埋め込むメリット
    • 記事の文中にTwitterを埋め込むメリットは、以下の通り。
      • メリット①信頼性のある記事ができる
      • メリット②モチベーションが上がる
      • メリット③ブランディングにもなる
  • Twitterのタイムラインをサイドバーに入れるメリットは以下の通り。
    • メリット①ネタに困らなくなる
    • メリット②読者のユーザビリティが上がる

 

こんな感じ。

 

ブログにTwitterを埋め込むと、何かとメリットが多いです。

 

というのも僕自身、Twitterを5月に埋め込んだんですが、当時のアカウントは200人ちょっとから1か月足らずで、50人くらい増えましたね。

 

ぜひやってみてくださいね。

 

ってことで今回はこの辺で。

また次回に。