Twitterのウィジェットを埋め込み、ブログに設置する方法

Twitterのウィジェットを自分のブログに設置する方法がわかるよ。

うちやま
うちやま

すごく簡単だよ。

スポンサーリンク

Twitterのウィジェットを埋め込み、設置する方法

1、https://publish.twitter.com/に移動する

https://publish.twitter.com/

https://publish.twitter.com/

2、検索窓に自分のTwitterのURLを記入

自分のTwitterのURLを記入

僕の場合は「https://twitter.com/udy_t」と記入しました。

記入したら「→(矢印)」をクリック。

3、埋め込みたいタイムラインまたはTwitterボタンを選択

埋め込み仕様の選択画面

今回は「埋め込みタイムライン」を埋め込む体で進めます。

4、埋め込みのURLをコピー

Copy Code

コードをコピー(Copy Code)」をクリック。

コピー完了

コピーが完了しました。

ブラウザがChromeで自動翻訳を使っている場合、日本語訳だとコピー機能がエラーになりやすいです。(画面が真っ白になる)そんなときは翻訳を原文の「英語」にしてやり直すと上手くいきます。

5、ワードプレスに埋め込む

カスタムHTMLのウィジェット

ダッシュボードより 外観>ウィジェット をクリック。

「利用できるウィジェット」のエリアから「カスタムHTML」(もしくは「テキスト」でも可)をサイドバーに設けます。

カスタムHTMLに埋め込みする画像

「4、埋め込みのURLをコピー」でコピーしたURLを埋め込み、タイトルを設定(今回は「タイムライン」にしました。)「保存」をクリック。

サイドバーの見え方

こんな感じになります。

埋め込まれた画像例

実際のサイトで見るとこんな感じ。

初期設定のままだと「はみ出る」ので注意!

Twitterのウィジェットがはみ出ている画像

はみ出しちゃった。汗

デフォルトの設定ってめちゃくちゃ長いです。汗

よって、自分のサイトにマッチした長さに変更しましょう。

Twitterのウィジェットをカスタマイズする手順

set customization options

set customization options」をクリック。

Twitterのウィジェットをカスタマイズする画面

こちらの表示切り替わったらカスタマイズが可能になります。

What size would you like your timeline to be?」の箇所

Height(px)タイムラインの高さ
Width(px)タイムラインの幅

How would you like this to look?

How would you like this to look?」の箇所

タイムラインのテーマ色が指定できます。

Light明るいデザイン
Dark暗めのシックなデザイン

What language would you like to display this in?

What language would you like to display this in?」の箇所

言語指定が出来ます。

僕は縦幅を300pxにしてそれ以外はデフォルトにしました。

うちやま
うちやま

好みやご自身のブログに合わせてサイズを調整してください。

設定したら「更新」をクリック。

Copy Code

コードをコピー(Copy Code)」をクリック。

コピー完了

コピーされました。

カスタムHTMLにカスタマイズしたタグを埋め込む画像

「5、ワードプレスに埋め込む」のやり方通り、ダッシュボードより 外観>ウィジェット をクリックして「カスタムHTML」(もしくは「テキスト」でも可)にコピーしたタグを埋め込んで「保存」をクリック。

カスタマイズしたウィジェットが埋め込まれた画像

カスタマイズしたウィジェットが埋め込まれ、

ウィジェットがはみ出てない画像

はみ出さずに調整できました。

以上で設定完了です。

【補足】表示されない時は

上手く表示されないときは設定後に少し時間をおいてください。それだけで解消することがあります。

また、作成したばかりのTwitterアカウントや名前などを変えたアカウントだとすぐにウィジェットに表示されないこともあります。

Twitterのウィジェットは重いです

重さを表現する画像
多少重くとも気にしないぞ

ここでいう「重い」というのはサイトの読み込み速度のことです。読み込み速度が遅いと「重い」などと言われます。

読み込みが遅いよりも早い方がユーザビリティ的には良いので、気になる方は無理にTwitterのウィジェットを埋め込む必要はありません。

どうしても早くしたい場合はサイトの読み込み速度を速める対策を行いましょう。

【次回予告】サイトの読み込みを早める方法

運用方針次第です

また、最終的には重さを加味した上でもウィジェットを埋め込むべきか?というご自身のサイト運用の方向性の問題になります。

弊社のブログは僕自身の人となり(キャラクター)が少しでもわかってくれたらいいなぁ、と思って運用しているので意図的にウィジェットを埋め込んでいます。

うちやま
うちやま

読み込み速度が多少落ちても、それ以上に「自分を知ってもらう」を優先している、ということです。

埋め込んだ方が良い・悪い、は運用方針次第なので、ご自身の目的に合わせてご判断ください。

うちやま
うちやま

以上、簡単に出来るので試してみてね。

この機体の開発者
スミ入れがんばる
うちやま

株式会社BuildingBlockの代表。第08MS小隊のガンプラはけっこう作った。アレルギー性鼻炎もち。天パー。Web制作や集客対策とかもやってる。猫先生に仕事のデスクが取られた。

うちやまをフォローする

お役立ち資料ダウンロード

びるぶろでは、ブログ運用に役立つ資料をご用意しています。

無料でダウンロードいただけますので、ぜひご活用ください。

>>お役立ち資料を見てみる

資料ダウンロードバナー

|д゚) ココノソンザイニキヅイチャッタ??
ブログ運営でかゆいところに手が届くびるぶろのメルマガ

SEOと猫とガンプラが好きな人が書いてるメールマガジン。以下に反応しちゃう人が読むと面白いと思うよ。

  • 月に10万PVぐらいはやってみたい
  • 上位表示できるキーワード選定を知りたい
  • クリック数を改善したい
  • CVRやCTRを上げたい
  • 私も猫が好きだよって方も是非!
Twitter
スポンサーリンク
\ 別部隊の仲間たちにも伝える /
びるぶろ