ブログの上部にお知らせバナー的なものを設置したいと思っています。
そこで、僕が考えたのが…
①Twitterに専用アカウントを作成
②そのアカウントにてお知らせ内容をつぶやく
③ブログパーツ等でそのアカウントのつぶやきを表示
という方法です。
しかし、まだまだ初心者なのでFlash等によるブログパーツを作成することはできません。
表示させたいものは、一行程度のバナーです。
ブラウザの上部に常に表示されている(FC2ブログの検索バーのようなもの)タイプが理想ですが、ページ上部に普通に表示されるものでも構いません。
何かいい方法は無いでしょうか?
これをするのに適当なブログパーツなどあれば教えてほしいです。
ちなみにFC2ブログを利用しています。
ポイント
・ブログ上部に、Twitterのつぶやきをシンプルに表示したい
・または、一行程度のメッセージを上記のように表示させたい
・Flashの自作は出来ない
・それに使う画像の自作は出来る
最新のつぶやきを1行表示するものをjQueryで書いてみました。
fc2ブログは自由にテンプレートを変更できるので適当な場所(</html>の前とか)に以下のコードをコピペして確認してみてください。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript"> $(function() { $.ajax({ url: 'https://api.twitter.com/1/users/show.json?screen_name=dave_spector&callback=?', dataType: 'json', success: function(json) { var tweet = json.status.text; var img = json.profile_image_url; $('<div style="text-align:center;position:fixed;top:50px;width:100%;background-color:pink;"><img src="'+ img +'" style="width:30px;"><span>'+tweet+'</span></div>').appendTo(document.body) } }) }); </script>
下記のプロフィールウィジェットを使えば、
FLASHではなくJAVAScriptのコードを作ってくれます
http://twitter.com/about/resources/widgets
手順を説明してくれている人のブログ
http://snsjack.blog75.fc2.com/blog-entry-402.html
最新のつぶやきを1行表示するものをjQueryで書いてみました。
fc2ブログは自由にテンプレートを変更できるので適当な場所(</html>の前とか)に以下のコードをコピペして確認してみてください。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript"> $(function() { $.ajax({ url: 'https://api.twitter.com/1/users/show.json?screen_name=dave_spector&callback=?', dataType: 'json', success: function(json) { var tweet = json.status.text; var img = json.profile_image_url; $('<div style="text-align:center;position:fixed;top:50px;width:100%;background-color:pink;"><img src="'+ img +'" style="width:30px;"><span>'+tweet+'</span></div>').appendTo(document.body) } }) }); </script>
とても参考になりました!
このコードをベースに、自分なりに改良してブログに貼りたいと思います!
ありがとうございました!
自分なりに改良を加えた結果、思い通り(というかそれ以上)のモノが出来ました!本当にありがとうございました(^-^)
結果:http://darkofchicken0.blog79.fc2.com/
とても参考になりました!
2012/03/29 23:06:45このコードをベースに、自分なりに改良してブログに貼りたいと思います!
ありがとうございました!
自分なりに改良を加えた結果、思い通り(というかそれ以上)のモノが出来ました!本当にありがとうございました(^-^)
2012/03/30 17:41:08結果:http://darkofchicken0.blog79.fc2.com/