jQuery 강좌 | Plugins > FeedEk - RSS/ATOM Feed 출력 플러그인

FeedEk는 RSS/ATOM Feed를 불러와서 출력해주는 jQuery Plugin입니다.

같은 도메인이 아닌 외부 도메인의 RSS Feed도 가져올 수 있습니다.

http://jquery-plugins.net/FeedEk/FeedEk.html

사용법

다음의 링크에서 FeedEk를 다운로드 받습니다.

https://github.com/enginkizil/FeedEk/releases

FeedEk.css와 FeedEk.js를 서버에 업로드하고, HTML 문서에서 연결시킵니다. (moment-with-langs.min.js는 날짜 형식 지정을 위해 필요합니다.)

<link rel="stylesheet" href="FeedEk.css">
<script src="//code.jquery.com/jquery-1.11.0.js"></script>
<script src="http://momentjs.com/downloads/moment-with-langs.min.js"></script>
<script src="FeedEk.js"></script>

출력할 요소를 선택하고 RSS Feed 주소를 입력합니다.

$('#divRss').FeedEk({
  FeedUrl: 'rss-url',
});

출력하려는 위치에 div 요소를 넣습니다.

<div id="divRss"></div>

옵션

FeedEk는 다음과 같은 옵션이 있습니다.

  • FeedUrl : The Feed URL
  • MaxCount : Feed Item Count (Default - 5)
  • ShowDesc : Option to show Feed Item Description (Default - True)
  • ShowPubDate : Option to show Feed Item Publish Date (Default - True)
  • DescCharacterLimit : Feed Description Characters Limit Count (Default - No Limit)
  • TitleLinkTarget : Option for Feed Title Link Target (Default - _blank)
  • DateFormat : Date Format for Feed Publish Date (Default - None)
  • DateFormatLang : Date Format Language for Feed Publish Date (Default - en)

FeedUrl만 필수이고 나머지는 선택입니다.

예제

http://book.cmsfactory.net/jQuery/V01/Plugins/FeedEk/FeedEk-01.html

jQuery 블로그의 RSS Feed를 출력하는 예제입니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>jQuery Plugin | FeedEk</title>
    <link rel="stylesheet" href="FeedEk.css">
    <script src="//code.jquery.com/jquery-1.11.0.js"></script>
    <script src="http://momentjs.com/downloads/moment-with-langs.min.js"></script>
    <script src="FeedEk.js"></script>
    <script>
      $( document ).ready( function() {
        $('#divRss').FeedEk({
          FeedUrl: 'http://feeds.feedburner.com/jquery/',
          MaxCount: 3
        });
      } );
    </script>
  </head>
  <body>
    <h1>jQuery Blog</h1>
    <div id="divRss"></div>
  </body>
</html>

Category

Created on 2014-04-04 00:34 | Updated on 2015-07-17 00:47

이 글을 공유하기

Kakao

Book navigation