Twitterのタイムラインをブログに設置する方法

programming

みなさんこんにちは!

ブログのPV流入のツールとして、SNSを利用されている方も多いのではないでしょうか?

その中でもよく使われているのは、やっぱりTwitterだと思います。

たみお
たみお

検索流入が少ないうちは、Twitterでの流入が心の支えです!

今回はそんな大事な位置を占める、自分のTwitterタイムラインをワードプレスのブログに表示する方法について解説していこうと思います。

スポンサーリンク

Twitterタイムラインのリンクを取得する方法

まずはTwitterタイムラインのリンクを取得するため、Twitter Publishにアクセスします。

アクセスするとこのページに移りますので、この赤色の部分に、自分のTwitterのプロフィールのURLを貼り付けて、Enterを押してください。

すると自動で下へスクロールします。

次に何を作るかを選びます。

このサイトではタイムライン、フォローボタンの埋め込み両方とも作ることができます。

今回はタイムラインの埋め込みを作るので、左側を選択して下さい。

選択するとさらに下へスクロールし、この部分に載ってあるURLをコピーしてブログへペーストすれば、タイムラインをブログへ埋め込むことができます。

ちなみにデフォルト状態でのサイズを、ここから下へスクロールすると確認できます。

デフォルト状態のタイムライン

この状態だと結構大きいですね(・・;)本文に埋め込むならいいかもですがw

ということで、次にサイズなどの変更方法について書いていきます。

スポンサーリンク

タイムラインの詳細設定

ではタイムラインの編集をしてみましょう。

編集は、赤ワクで囲ってある「set customization options」で行えます。

クリックすると上記のものを編集できます。

●Height(px):タイムラインの高さ

●Width(px):タイムラインの幅

●How would you like this to look?:テーマ色の変更。LightかDarkかを選べます。右側はリンクにポインタを置いた時の色を選べます。

light
dark

●what language would you like to display this in?:ヘッダーなどの表示言語を変更できます。デフォルトは英語になっています。

これらを編集して、反映させる場合は最後に右下の「update」を押します。

ちなみに当ブログではサイドバーにタイムラインを貼り付けているので、heightを400、widthを300に変更しました。

これで編集は完了となります。編集した後は先ほどのURLが変更されているので、再度コピーして下さいね。

スポンサーリンク

ブログへの埋め込み方法

ではここからブログへ埋め込んでいきます。

基本的にHTMLへコピペすれば完了するのでとても簡単です。

今回はサイドバーへ埋め込もうと思います。

まずダッシュボード上の右端メニューから、「外観」→「カスタマイズ」をクリック。

 

 

編集メニュー内の「ウィジェット」→「サイドバー」をクリック。

 

 

するとサイドバー内のカテゴリが表示されるので、赤ワク部分の「ウィジェットを追加」をクリックし、「カスタムHTML」をクリック。

するとこういった画面が現れます。タイトルは任意のものに変更して、内容部分に先ほど作ったタイムラインのURLをペーストします。その後に下の完了を押して下さい。

最後に上の「公開」をクリックするのをお忘れなく。

これでサイトに表示できたと思います。

こんな感じですね。いい感じに出来上がったと思います!

スポンサーリンク

最後に

Twitterタイムラインをブログへ埋め込む方法でした。

一度作業を覚えてしまえば割と簡単にできるので、まだの方は設置してみてはどうかと思います^^

それでは!