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

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

もくじ

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

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

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

スポンサーリンク

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

1-1. 完成イメージ

1-2. 用意するもの

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

3. まとめ

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

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

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

スポンサーリンク

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

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

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

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

• buildアメブロ ヘッダーの作り方 【ameblo デザイン カスタマイズ】
  アメブロカスタマイズの基本となる記事です。
  レベル：易sendGo
• buildアメブロ メニューバーの作り方 【ameblo デザイン カスタマイズ】
  半透明・位置固定のメニューバー作成手順を説明した記事（その1）です。
  レベル：普sendGo
• buildアメブロ メニューバーの作り方 ２ 標準タイプ【ameblo デザイン カスタマイズ】
  メニューバー作成手順を説明した記事（その2）です。
  レベル：普sendGo
• buildアメブロ 背景 画像 を設定する方法【ameblo デザイン カスタマイズ】
  背景画面に任意の画像を入れる方法を紹介した記事です。
  レベル：普sendGo
• buildアメブロ ヘッダー 下部のメニューバーを消す方法【ameblo デザインカスタマイズ】
  ヘッダー下の標準のメニューバーを消す方法を説明した記事です。
  レベル：やや易sendGo
• buildアメブロに twitterタイムライン を表示する【ameblo ツイッター 埋め込み】
  アメブロにTwitterタイムラインの表示する手順を説明した記事です。
  レベル：やや易sendGo
• buildアメブロ Facebook 連携 アメブロにFacebookページを追加する
  アメブロにFacebookページを埋め込む手順を説明した記事です。
  レベル：やや易sendGo
• buildアメブロ プロフィール 画面のカスタマイズ 設定方法 【ameblo デザインカスタマイズ 】
  アメブロでプロフィール画面をカスタマイズする方法を説明した記事です。
  レベル：やや難sendGo
• buildアメブロ 枠 (メッセージボード)を記事内に作る方法
  アメブロ 枠 (メッセージボード)を記事内に作る方法を紹介した記事です。
  レベル：やや易sendGo

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

send松本慶のアメブロ 読者さま募集中！！