Web、モバイル(スマホ・格安SIM)、ソーシャルメディア活用術、フリーランスの働き方などを綴ります!

jQueryでアメブロのRSSを読み込み、ホームページに表示(zRSSFeed)

38,239 view
更新日:2014年11月03日 投稿日 : 2012年04月17日
  • はてなブックマーク
  • facebook
  • twitter

当方では、ホームページとアメーバブログを連携させたサービスを提供しております。
そのお仕事の中で、アメブロの記事のリストをホームページのトップページに表示させるのですが、当方が利用している術を紹介致します。
色々と導入方法はあるのですが、一番使いやすいツールとして、zRSSFeedというjQueryのプラグインを紹介します。

スポンサーリンク

導入方法

必要ファイルをzRSSFeedのサイトよりダウンロードして、ホームページ内HTMLのhead要素の範囲内に設置して下さい。
RSS Feeds Reader Plugin for jQuery

<script type="text/javascript" src="js/jquery.js"></script> <script src="js/jquery.zrssfeed.min.js" type="text/javascript"></script>

続けて以下のように記述します。

<script type="text/javascript"> $(document).ready(function () {   $('.ameblo').rssfeed('任意のRSS URL', {     limit: 6   }); }); </script>

「limit: 6」が表示する記事数なので、数字を任意に変更して下さい。

<script type="text/javascript"> $(document).ready(function () {   $('.ameblo').rssfeed('任意のRSS URL', {     limit: 6,     header: false,     titletag: 'span',     content: false  }); }); </script>

上記は、タイトルと日付のみが表示されます。

オプションについて詳しくはRSS Feeds Reader Plugin for jQueryページを確認してください。
CSSは下記になります(任意で変更して下さい)。

.ameblo {
clear:both;
margin: 0;
padding: 0;
width: 226px;
overflow:hidden;
}
.rssBody ul {
margin: 0px;
padding: 0px;
}
.rssBody ul li{
margin: 0 0 8px 0;
padding: 0 4px 8px 4px;
border-bottom: dotted 1px #CCCCCC;
list-style:none;
width:218px;
overflow:hidden;
}
.rssRow { padding: 0px; }
.rssRow div {
float:left;
width:226px;
}

勿論、アメブロ以外にも他のブログサービスやホームページのRSSを読み込めますのでお試しください。
♪ 合わせて読む
アメブロのRSSのPRを消す方法!

もう1記事、読んでみませんか?

当記事がお役に立ちましたらシェアして頂ければ嬉しいです。

  • はてなブックマーク
  • facebook
  • twitter
38,239 view 2012年04月17日

webdesignerwork 著者

フリーランスWebデザイナーとして活動をはじめて18年。全国の私を必要としてくれる方々からWordPressでのWeb制作のご依頼を頂いております。

各地のコワーキングスペースやWordPressの勉強会(WordBench/WordCamp)などに顔を出し、様々な人達とご縁をいただき刺激を受け、学んだこと感じたことを、日々のお仕事や自社メディアへの開発・配信にと繋げております。妻、子、プードル2匹と里山暮らし。

当ブログで公開されているテキスト、画像、イラストなどに関する権利は、当方に帰属します。
著作者の許諾を得ることなく複製、改変、転載、販売、出版など著作権法そのほか法律に触れる行為は禁止されております。

運営者情報

© 2004 webdesignwork ALL COPYRIGHTS RESERVED.