スタッフブログ INFORMATION

スタッフブログ USEFUL INFORMATION

Twitterの自分のつぶやきをWebサイトやブログに貼り付ける方法

最近流行りのソーシャル・メディア、mixi・Twitter・Facebook・Myspaceなど…
皆さんはうまく使いこなしているでしょうか？？

今回は、そんな今流行のソーシャル・メディアの中でも、お手軽でユーザの多いTwitterの自分のつぶやきをWebサイトやブログに貼り付ける方法のご紹介です。

なお、一部のブログではJavascriptに対応しておらず、Twitterを貼り付けられないケースもございます。自分のブログで使えるかどうかは、ブログサービスのヘルプを見るか、ブログサービス側に直接お問い合わせくださいね。

  1. Twitterにアクセス

Twitterと自分のWebサイトやブログを連携させるための素材は、Twitterがまとめて提供してくれています。Twitterサイトのフッターにある「素材」というリンクにアクセスしてみましょう。見つからない場合、以下のURLから直接アクセスできます。
http://twitter.com/about/resources

  1. 自分のつぶやきを表示するタグを取得

今回は、自分のつぶやきをWebサイトやブログ上に貼り付けるのが目的のため、色んな素材の中でも「ウィジェット」というものを選択します。

そして、サブメニューから「自分のサイト」→「プロフィールウィジェット」と選択してください。

ここで、表示したいTwitter名・サイズ・デザイン・取得件数などの設定が行え、表示を確認しつつ、OKになったら下にある「完了＆コード取得」ボタンをクリックし、以下のようなコードを取得します。

<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 4,
interval: 6000,
width: 250,
height: 300,
theme: {
shell: {
background: '#333333',
color: '#ffffff'
},
tweets: {
background: '#000000',
color: '#ffffff',
links: '#4aed05'
}
},
features: {
scrollbar: false,
loop: false,
live: false,
hashtags: true,
timestamp: true,
avatars: false,
behavior: 'all'
}
}).render().setUser('twitter').start();
</script>

・Twitterのつぶやき表示をWebページに貼り付ける場合
ブログではなく、Webページに貼り付ける場合、
さきほど取得したコードを表示したい場所のHTML上に、そのまま貼りつけて更新すれば掲載完了です。（手順は通常のホームページの更新手順と同じです）

  1. Twitterのつぶやき表示をブログに貼り付ける場合

ブログに貼り付ける場合、少々手順が複雑になります。そのままでは、Javascriptコードの貼りつけに対応していないサービスが多いため、ヘルプを読みながら「ブログパーツ」「スクリプト」「Javascript」が貼りつけ可能な場所を探し、そこに貼りつけてみてください＾＾

 

いかがでしたでしょうか？？

今回はつぶやきを表示させる方法だけでしたが、他にもページを見た人がTwitterでつぶやけるようにするボタンも簡単に設置することが出来ます。
機会があれば、後ほどその方法についてもお伝えしたいと思います。

page top