ブログやサイトでtwitterのつぶやきを表示させる方法
どもでしヽ(ﾟ◇ﾟ )ﾉ
今日は、仕事で作っているサイトに
twitterのつぶやきを表示させてみようと、調べてみたら
意外と簡単にできたので、その方法のご紹介ですﾍ(ﾟ∀ﾟ*)ﾉ
ちなみに、このブログにもつけてみましたｗ
右サイドにぴよりボードを設置してみましたﾍ(ﾟ∀ﾟ*)ﾉ
記事中では、挿入できないので、
実際の感じは右のサイドを見ていただければと思います。
こんなボードを作って、
スタイルで背景に指定しましたよ
で、以下が、twitterを表示する方法です。
【1.】<body>～</body>内に、次のJavaScriptを記述します。
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/ここにtwitterのアカウント名を入れる.json?callback=twitterCallback2&count=ここに表示したいつぶやきの数を入れる"></script>
例として、わたしの場合はこのような記述になります↓
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/akki_web.json?callback=twitterCallback2&count=8"></script>
【2.】Twitterを表示させたいところに、次のタグを記述します。
<ul id="twitter_update_list"></ul>
なんと、これだけでOKですﾍ(ﾟ∀ﾟ*)ﾉ
あとは、これにスタイルを指定して、自由にカスタマイズしますっ。
参考までに、わたしが設定した内容を書いておきますね。
このブログ、アメブロでの設定方法になります。
理屈がわかれば、普通のサイトにも
他のブログサービス（スタイルを編集できるブログに限ります）でも、
応用はききますよ。
まず、「サイドバーの基本設定」の「フリープラグイン」に次のタグを記述します↓
<div id="twitter">
<div class="bord"> <ul id="twitter_update_list"></ul>
<noscript>ここを正しく表示させるためにはお使いのブラウザのJavaScriptを有効にしてください。<br />
<a href="http://twitter.com/akki_web">あっきーのつぶやきTwitter</a></noscript>
</div>
<p>もっと見るには<br /> <a href="http://twitter.com/akki_web">ここをクリック</a>してね。</p>
</div>
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script><script type="text/javascript" src="http://twitter.com/statuses/user_timeline/ここに自分のtwitterのアカウント名.json?callback=twitterCallback2&count=ここに表示させたい数"></script>
以上。
それで、次に
「デザインの変更」の「スキンCSSの編集」を開いて、
表示されたスキンCSSの一番下（記述する場所はどこでも良いのですが、わかりやすい所ということで）に、以下のスタイルを記述します。
.bord {
overflow: auto;
height: 150px;
width: 142px;
padding-top: 5px;
padding-bottom: 5px;
margin-bottom: 7px;
}
#twitter {
background-image: url(http://stat.ameba.jp/user_images/20100521/01/akki-akiaki/78/75/j/t01700248_0170024810551256088.jpg);
background-repeat: no-repeat;
width: 142px;
margin-top: 10px;
padding-top: 50px;
padding-bottom: 0px;
font-size: 10px;
padding-right: 15px;
padding-left: 13px;
height: 198px;
text-align: left;
display: block;
}
#twitter_update_list {
margin:0px;
padding:0px;
}
#twitter_update_list li {
border-top-width: 1px;
border-top-style: dotted;
border-top-color: #328BB3;
padding-top: 7px;
padding-bottom: 7px;
list-style-image: none;
}
以上。
赤太字の部分は、自分で作った画像を、アメブロにアップロードして
その画像のURLを記述してください(^人^)
このスタイルにはまる画像のサイズは、170ｘ248pixになります。
全部、まるまるこのままブログに設定すると、
わたしの、ぴより画像でわたしのつぶやきが表示されることになりますので（笑）
必要な部分、twitterのアカウント名は、必ず自分のアカウントに修正しましょうっ。
twitterのブログパーツは、いまたくさん出回っていますが
ここいらで、オリジナルのつぶやき板を作ってみてはいかがでしょうか？
(・∀・)ﾁｮｯﾄﾊﾏﾙｶﾓ
わたしの2010年の目標はこちら
はじめましての方はこちら
テーマ別の目次
⇒三日坊主ブログ応援お願いします☆
⇒ブログランキング★転職
（おかげさまで転職カテゴリで上位にランクイン中です☆）
Ｗｅｂやモバイル系クリエーターの転職『マイコミエージェント×ＩＴ』
今日は、仕事で作っているサイトに
twitterのつぶやきを表示させてみようと、調べてみたら
意外と簡単にできたので、その方法のご紹介ですﾍ(ﾟ∀ﾟ*)ﾉ
ちなみに、このブログにもつけてみましたｗ
右サイドにぴよりボードを設置してみましたﾍ(ﾟ∀ﾟ*)ﾉ
記事中では、挿入できないので、
実際の感じは右のサイドを見ていただければと思います。
こんなボードを作って、
スタイルで背景に指定しましたよ
で、以下が、twitterを表示する方法です。
【1.】<body>～</body>内に、次のJavaScriptを記述します。
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/ここにtwitterのアカウント名を入れる.json?callback=twitterCallback2&count=ここに表示したいつぶやきの数を入れる"></script>
例として、わたしの場合はこのような記述になります↓
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/akki_web.json?callback=twitterCallback2&count=8"></script>
【2.】Twitterを表示させたいところに、次のタグを記述します。
<ul id="twitter_update_list"></ul>
なんと、これだけでOKですﾍ(ﾟ∀ﾟ*)ﾉ
あとは、これにスタイルを指定して、自由にカスタマイズしますっ。
参考までに、わたしが設定した内容を書いておきますね。
このブログ、アメブロでの設定方法になります。
理屈がわかれば、普通のサイトにも
他のブログサービス（スタイルを編集できるブログに限ります）でも、
応用はききますよ。
まず、「サイドバーの基本設定」の「フリープラグイン」に次のタグを記述します↓
<div id="twitter">
<div class="bord"> <ul id="twitter_update_list"></ul>
<noscript>ここを正しく表示させるためにはお使いのブラウザのJavaScriptを有効にしてください。<br />
<a href="http://twitter.com/akki_web">あっきーのつぶやきTwitter</a></noscript>
</div>
<p>もっと見るには<br /> <a href="http://twitter.com/akki_web">ここをクリック</a>してね。</p>
</div>
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script><script type="text/javascript" src="http://twitter.com/statuses/user_timeline/ここに自分のtwitterのアカウント名.json?callback=twitterCallback2&count=ここに表示させたい数"></script>
以上。
それで、次に
「デザインの変更」の「スキンCSSの編集」を開いて、
表示されたスキンCSSの一番下（記述する場所はどこでも良いのですが、わかりやすい所ということで）に、以下のスタイルを記述します。
.bord {
overflow: auto;
height: 150px;
width: 142px;
padding-top: 5px;
padding-bottom: 5px;
margin-bottom: 7px;
}
#twitter {
background-image: url(http://stat.ameba.jp/user_images/20100521/01/akki-akiaki/78/75/j/t01700248_0170024810551256088.jpg);
background-repeat: no-repeat;
width: 142px;
margin-top: 10px;
padding-top: 50px;
padding-bottom: 0px;
font-size: 10px;
padding-right: 15px;
padding-left: 13px;
height: 198px;
text-align: left;
display: block;
}
#twitter_update_list {
margin:0px;
padding:0px;
}
#twitter_update_list li {
border-top-width: 1px;
border-top-style: dotted;
border-top-color: #328BB3;
padding-top: 7px;
padding-bottom: 7px;
list-style-image: none;
}
以上。
赤太字の部分は、自分で作った画像を、アメブロにアップロードして
その画像のURLを記述してください(^人^)
このスタイルにはまる画像のサイズは、170ｘ248pixになります。
全部、まるまるこのままブログに設定すると、
わたしの、ぴより画像でわたしのつぶやきが表示されることになりますので（笑）
必要な部分、twitterのアカウント名は、必ず自分のアカウントに修正しましょうっ。
twitterのブログパーツは、いまたくさん出回っていますが
ここいらで、オリジナルのつぶやき板を作ってみてはいかがでしょうか？
(・∀・)ﾁｮｯﾄﾊﾏﾙｶﾓ
わたしの2010年の目標はこちら
はじめましての方はこちらテーマ別の目次
⇒三日坊主ブログ応援お願いします☆
⇒ブログランキング★転職
（おかげさまで転職カテゴリで上位にランクイン中です☆）
Ｗｅｂやモバイル系クリエーターの転職『マイコミエージェント×ＩＴ』