タグ別アーカイブ: HTML, CSS

Twitter のプロフィールウィジェットを設置する

Twitter のウィジェットを利用すると、ツイートを自分のウェブサイトやSNSサイトのページに表示できるようになります。プロフィールウィジェット・検索ウィジェット・お気に入りウィジェット・リストウィジェット がありますが、今回はプロフィールウィジェットの設置についての解説です。
 
 
1. Twitterの素材

ログイン後、ウィンドウの右下にTwitter社やヘルプ、利用規約などの掲載欄から、素材をクリックします。
 

 
2. 素材

フォローボタン、ツイートボタン、ウィジェット、Twitterロゴとアイコン からウィジェットを選択します。
 

 
3. ウィジェットの選択

ウィジェットは自分のサイトFacebookにそれぞれ設定することができます。今回は自分のサイトを選択します。
 

 
4. ウィジェットの選択

プロフィールウィジェット・検索ウィジェット・お気に入りウィジェット・リストウィジェット があります。今回はプロフィールウィジェットを選択します。
 

 
5. プロフィールウィジェットのカスタマイズ[設定]

ユーザー名を入力すると、そのアカウントのツイートがプレビューされます。
 

 
6. プロフィールウィジェットのカスタマイズ[カスタマイズ]

データの取得、スクロールバー表示、ツイートの表示方法、表示するツイート数 などについて設定します。
 

 
7. プロフィールウィジェットのカスタマイズ[デザイン]

プロフィールウィジェットのカラーを変更します。
 

 
8. プロフィールウィジェットのカスタマイズ[サイズ]

プロフィールウィジェットのサイズを設定します。
 

 
9. プロフィールウィジェットの書き出し

書き出されたコードを任意のWEBページに張り付けると、プロフィールウィジェットが表示されます。
 

 
追記. プロフィールウィジェットが表示されない場合
Twitterで公式に公開されているツイートボタンやフォローボタンで使用されている widget.js はUTF-8で読み込まないとエラーになるため、
widget.js を指定しているscriptタグに charset=”utf-8″ を追加します。

<script type="text/javascript" src="http://platform.twitter.com/widgets.js" charset="utf-8"></script>

また、表示に時間がかかる場合もあるので、しばらく時間をおいて様子を見ることもおすすめします。それでもダメな場合は、再起動やブラウザキャッシュのクリア後、リトライしてみましょう。
 
 

このエントリーをはてなブックマークに追加
LINEで送る