アメブロに twitterタイムライン を表示する【ameblo ツイッター 埋め込み】


twitterのタイムラインをアメブロに表示することで、アメブロユーザーからのtwitterフォローや集客アップを図れる可能性があります。
 
アメブロとtwitterアカウントがあれば簡単に設置できますので、今回はアメブロにTwitter のタイムラインを表示する手順を記載します。
 
※2016年7月4日時点の手順になります。

 

もくじ

以下は本記事のもくじです。

  1. 1. twitterタイムライン表示の概要
    1. 1-1. 完成イメージ
    2. 1-2. 用意するもの
  2. 2. twitterタイムラインの設置手順
    1. 2-1. twitterでウィジェットを新規作成する
    2. 2-2. アメブロに貼り付ける
  3. 3. まとめ

 
 
それでは、概要から説明していきます。
 
 

スポンサーリンク



 
 

1. twitterタイムライン表示の概要

1-1. 完成イメージ

amebloでtwitterのタイムラインを埋め込む

 

1-2. 用意するもの

事前に下記が用意されている必要があります。

  • twitterアカウント
  • アメーバアカウント(ブログ)

 

それでは設置手順に入ります。

 

2. twitterタイムラインの設置手順

twitterでウィジェットを新規作成する

まずtwitterにログイン後に、右上のアイコンを選択して「設定」を選択します。

twitterにログイン後に右上アイコン>設定を選択します

 

ウィジェットを選択します。

ウィジェットを選択します

 

「新規作成」ボタンを押下して、プロフィールを選択します。

twitter ウィジェット新規作成

 

 

※注)少し前までは手順と画面が違い、ウィジェットIDが埋め込まれたコードが発行されていました。下記は仕様変更前に作ったウィジェットの編集画面です。
仕様変更前のTwitterライムラインのウィジェット編集画面

 

 

自身のURLを入力してエンターボタンを押下します。

URLを入力する

 

ウィジェットの表示方式を選択します。今回はタイムライン形式なので「Embedded Timeline」を選択します。

ウィジェットの表示形式を選択します。

 

これでウィジェット用のコードが作成されました。真ん中のコードがタイムライン埋め込みのコードです。ただ、この段階では高さや幅が指定されていないため、引き続き大きさを指定します。「set customization options」を選択します。

ウィジェットのカスタマイズ設定

 

ここでは高さ(Height(px))を600に、幅 (Width(px))を300に設定します。下のプレビューを確認後に「Update」ボタンを押下します。

twitter ウィジェットのカスタマイズ設定 高さと幅を指定

 

埋め込み用のコードが作成されますので「Copy Code」を押下します。

twitter ウィジェットコードをコピー

高さと幅が指定されていることが確認できます。コピーして控えておきます。

twitter ウィジェットコードをコピーします

続けてこのコードをアメブロのサイドバーに貼り付けていきます。

 

 

2-2. アメブロに貼り付ける

アメブロに管理者としてログイン後に、右上の設定ボタンよりプラグインの追加を選択します。

サイドバー>プラグインの追加を選択

 

Twitterのタイムライン埋め込みコードを設定後に保存します。

Twitterのタイムライン埋め込みコードを設定する

 

設定が保存されます。続けて「フリープラグイン」を「使用する機能」に追加していきます。(すでに実施済みの場合は不要です)。

アメブロでプラグイン設定完了

右上の設定ボタンより配置設定を選択します。

サイドバー>配置設定を選択

 

サイドバーの配置設定で、ドラッグ&ドロップでフリープラグインを使用する機能に移動して保存します。

フリープラグインを使用する機能に設定する

 

最後に、アメブロのトップページにtwitterタイムラインが表示されていることを確認して完了です。

amebloでtwitterのタイムラインを埋め込む

 

3. まとめ

今回は、twitterでウィジェットを作成してアメブロにコードを貼り付けることで、twitterのタイムラインを表示する方法を紹介しました。

 
twitterのタイムラインをアメブロに表示することで、アメブロユーザーからのtwitterフォローや集客アップを図れる可能性があります。
 

今回は以上になります。最後までご覧いただきありがとうございました。
 
 
 

スポンサーリンク



 
 

参考)アメブロ カスタマイズ関連記事

 

アメブロ カスタマイズ関連の記事です。難易度は雰囲気で設定しました!!

参考)アメブロ カスタマイズ関連記事

 

アメブロ カスタマイズ関連の記事です。難易度は雰囲気で設定しました!!

 
 

アメブロやってます!読者登録歓迎です(^^)

 

 

こちらの記事もおすすめです


mail無料メルマガ

メルマガを受け取る女性

読者限定の情報やイベント情報を先行配信

読者限定のお得なモニター価格情報やHP作成・運用や独立・副業を考えている人向けにイベントの先行配信しています!登録・解除は自由です!ぜひご登録ください!