WordPress

【5分で実装可能!】WordPressにツイッターのタイムラインを埋め込む方法を解説

2020年10月16日

・自分のブログにtwitterのタイムラインを表示させたいけど方法が分からない

・タイムラインの設置方法も知りたい

 

上記のような悩みにお答えしていきます。

 

SNS運用とブログの同時運用は今や必須となっています。

 

ブログ単体ではどうしてもアクセスを伸ばすのに時間がかかったりますが、twitterなどのSNSも並行して運用すればSNSからの集客が見込め、ブログのアクセスが伸びればSNSのフォロワー増も期待できます。

 

そこで今回は、twitterのタイムラインをWordPressに導入する方法をご紹介します。

 

初心者の方でもたった5分でできちゃうので速攻で導入していきましょう!

 

 

タイムラインを設置する

 

それではまずタイムラインをブログに設置していきましょう。

 

順番に見ていきます。

 

ステップ1:TwitterのタイムラインHTMLコードを取得

 

まずはwordpressに表示させるtwitterのタイムラインHTMLコードを取得しましょう。

 

Twitterパブリッシュサイトにアクセス

 

 

アクセスしたら赤枠内に自分のtwitterアカウントURLを入力しましょう。

 

僕の場合だと『https://twitter.com/Naga0415(@以降のユーザー名)』ですね!

 

ステップ2:『Embedded Timeline』(左側)を選択

 

ステップ3:タイムラインHTMLコードをコピーする

 

ステップ4:コピーしたHTMLコードをウィジェットを設置して貼り付ける

 

「WordPress管理画面」→「外観」→「ウィジェット」

 

上記手順でウィジェット編集画面に移行しましょう。

 

 

HTMLコードは「テキスト」ウィジェットにて設置します。

 

設置する場所は基本的に、「サイドバートップ」「サイドバー 」「フッター(2列目or3列目)」エリアのどこかでいいですよ!

 

どこに設置するか選択して「ウィジェットを追加」ボタンをクリックしましょう!

 

僕はフッターの2列目に設置しました。

 

設置したテキストウィジェットの下矢印のアイコンをクリックしましょう。

 

 

タイトル名を入力し、HTMLコードはテキストベースで貼り付けるので「テキスト」タブをクリックしましょう!

 

 

貼り付けたら「保存」をクリックしておしまいです!

 

 

ちゃんと表示されていたら完了です!

 

次からはちょっとしたカスタマイズの方法についてご紹介します。

 

一つずつ解説していきますね。

 

フォローボタンを追加する

 

ブログ上から気軽にフォローしてもらえるようにタイムライン上に「フォローボタン」を設置しておくと便利ですよ!

こんなやつですね!

 

ステップ1:『Twitter Buttons』(右側)を選択

最初で選択したものとは逆のボタンをクリックしましょう。

 

 

すると、次のような画面になるので「Follow Buttuon」(左側)をクリックしましょう。

 

生成されたHTMLコードを同じようにコピーします。

 

 

先ほどと同じようにウィジェット編集画面に移り、タイムラインのHTMLコードを貼り付けた同じ「テキスト」ウィジェットのテキストコードタブを開き、『タイムラインHTMLコード』の上にフォローボタンのHTMLコードを貼り付けます!

こんな感じで表示されていたら完了です!

 

タイムラインの表示デザインをカスタマイズする

 

タイムラインの表示デザインをカスタマイズできたりもします。

タイムラインのHTMLコードを生成した際に「set customization options」というテキストリンクがあるのでこちらをクリックしてデザインを編集できます。

 

 

・Width(横幅)→ デフォルトでOK

・Light(背景色)→ デフォルトでOK

・Automatic(言語)→ デフォルトでOK

 

結論から言うと、変更するのはHeight(縦の長さ)のみでOKで、長さはだいたい『400』くらいがちょうど良い感じです。

 

Heightはできるだけ指定した方がいいです!

 

なぜなら、Heightを指定しないとタイムラインが『スクロール状態』にならず、ツイートの分だけタイムラインの縦の長さが長く表示されます。

 

その他は編集すると見づらくなるのでデフォルトでOKです。

 

自分のサイト・ウィジェットの位置によって見やすい長さに調整していきましょう。

 

最後に、画面右下の「Update」をクリックして変更して表示されたHTMLコードを同じ手順で貼り付けたらOKです。

 

Twitterタイムライン設置のまとめ

 

今回はTwitterのタイムラインをWordPressに埋め込む方法をご紹介しました。

 

SNSの運用はブログ集客をアップさせるだけでなく、横の繋がりを広げることや仕事の依頼が舞い込んで来るなど実績を伸ばしていけば得られる効果は絶大です!

 

また、「この人はどんな人なんだろう?」という読者への自己紹介にもなるので是非Twitterから始めてSNSを上手に活用していきましょう。

-WordPress
-

© 2023 Money Book