広告 ブログの始め方

ブログのサイドバーにTwitterを埋め込む方法

2023年3月23日

※アフィリエイト広告を利用しています。

ブログのサイドバーに
Twitterを埋め込むにはどうしたらいいの？

意外と簡単にできましたよ〜
サクッと設定しましょう！

ありんこ（私）

ブログのサイドバーに一度埋め込んでしまえば、自動的に更新されます。
↓完成系はこんな感じです。

サイドバーにTwitter追加

Twitterを埋め込む方法

簡単な流れ

  • 自分のTwitterのURLをコピー
  • Twitter Publishにアクセス
  • サイドバーウィジェットに追加

ステップ①：自分のTwitterのURLをコピー

自分のTwitterのURLをコピーします。
>>Twitterにログインする

https://twitter.com/○○　←このURLをすべてコピー

ステップ②：Twitter Publishにアクセス

下記をクリックしてアクセスします。
>>Twitter Publishにアクセスする

Twitter Publishのtop画面

このように表示されるので、先ほどコピーした自分のURLを入力します。

入力後、表示方法を選択する画面が出ます。
タイムラインが表示される左を選びましょう。

表示選択


表示方法の詳細設定をするために、「set customization options」をクリックします。

set customization optionsをクリック


設定項目はこちら。

詳細設定
  • ①ディスプレイの高さ：480（お好みでOK）
  • ②デザイン：LightかDark
  • ③言語：Japanese
  • ④設定ができたら「Update」をクリック


ブログ貼付用のURLが発行されるのでコピーします。

リンクコピー

ステップ③：Twitterをサイドバーウィジェットに追加

サイドバーに埋め込む場合は、「外観」→「ウィジェット」から設定できます。
「カスタムHTML」をクリック。

「サイドバートップ」か「サイドバーウィジェット」を選び、
「ウィジェットを追加」を押します。

HTML追加

カスタムHTMLを設定します。

入力箇所

  1. タイトル：Twitter
  2. 内容：先ほどのリンクを貼り付け
  3. 「保存」をクリック

>>うまくいかなかった場合はこちら

Twitterフォローボタンを表示する方法

流れはTwitterの表示方法と同じです。
少し違うところもあるので手順に沿って進めましょう。

ステップ①：自分のTwitterのURLをコピー

自分のTwitterのURLをコピーします。
>>Twitterにログインする

https://twitter.com/○○　←このURLをすべてコピー

ステップ②：Twitter Publishにアクセス

下記をクリックしてアクセスします。
>>Twitter Publishにアクセスする

Twitter Publishのtop画面

このように表示されるので、先ほどコピーした自分のURLを入力します。

入力後、表示方法を選択する画面が出ます。
タイムラインが表示される右を選びましょう。

表示選択2


下記が表示されるので、左を選択します。

フォローボタン作成


ブログ貼付用のURLが発行されるのでコピーします。

Twitterフォローのリンクコピー

ステップ③：フォローボタンをサイドバーウィジェットに追加

サイドバーに埋め込む方法は、先ほどと同じです。

「外観」→「ウィジェット」から設定できます。
「カスタムHTML」をクリック。

「サイドバートップ」か「サイドバーウィジェット」を選び、
「ウィジェットを追加」を押します。

HTML追加

カスタムHTMLを設定します。

入力箇所

  1. タイトル：空白（なにも入力しなくてOK）
  2. 内容：先ほどのリンクを貼り付け
  3. 「保存」をクリック

うまくいかなかった場合・・・

カスタムHTMLの保存を押しても、保存中のマークが回り続けて保存できなきないという現象が起こりました。

保存できない

原因・解決策

【原因】ConoHaのWAF（セキュリティー）が原因です。

【解決策】WAFの設定を一旦「無効」にします。


私が使用しているConoHaには、セキュリティー対策でWAFという機能があります。
不正アクセスによる、サイトの改ざんや情報漏洩を防ぐのに有効です。

ConoHaの画面


これが原因で保存できませんでした。

WAFの設定を一旦「無効」にし、Twitterをサイドバーに埋め込みましょう。

※ConoHaとアフィンガーを使用しているので、他を使用している方は参考程度にしてください。

ステップ①：サイドバーウィジェットのHTMLを停止する

保存できなかったHTMLを削除します。

HTMLの削除

ステップ②：WAFを一旦OFFにする

ConoHaにログインします。

「サイト管理」→WAFを一旦「OFF」にします。
ConoHa管理画面の下に「成功しました。」と表示されればOKです。

WAFをOFFにする

ステップ③：ブログ画面に戻りHTMLをサイドバーに追加

ブログ画面に戻り、「カスタムHTML」をサイドバーウィジェットに追加します。

>>「Twitterをサイドバーウィジェットに追加」に戻る

ステップ④：WAFをONに戻す

「サイト管理」→WAFを「ON」に戻します。
ConoHa管理画面の下に「成功しました。」と表示されればOKです。

WAFをONに戻す

まとめ

Twitterのイメージ

一度ブログのサイドバーに一度埋め込んでしまえば、自動的に更新されます。
必ず最後にConoHaのWAFを「ON」にしましょう。

お疲れ様でした！
この記事がお役に立てれば嬉しいです♪

-ブログの始め方