Home > スポンサー広告 > FC2ブログの個別記事ページに、同じタグがついている関連記事を表示したい FC2 Blog Tips > FC2ブログの個別記事ページに、同じタグがついている関連記事を表示したい

[ スポンサー広告 ] はてなブックマーク - スポンサーサイト
スポンサーサイト

  • -------- :
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

[ FC2 Blog Tips ] はてなブックマーク - FC2ブログの個別記事ページに、同じタグがついている関連記事を表示したい
FC2ブログの個別記事ページに、同じタグがついている関連記事を表示したい

Google Feed APIを使用してFC2ブログのタグのRSSを読み込んで表示します。
FC2ブログのタグのRSSのURLは <ブログURL>?xml&utag=<タグ名> です。
3ステップで簡単に表示できます。
まず、 googleのapiキーを取得します。とっても簡単です。apiキーを取得するにはgoogleのアカウントと表示したいブログのURLが必要です。

Google アカウントを持っていない方は、アカウントを作成します。
 Google アカウント
 https://www.google.com/accounts/Login?hl=ja

Google Feed APIに行きます。
 Google Feed API
 http://code.google.com/intl/ja/apis/feed/

右のほうにある
How do I start?の
Sign up for a API key をクリック

My web site URL:にブログのURLを入力して
Generate API Keyをクリック

googleにログインしていない場合はここでログイン画面がでるので
アカウントを入力してログイン。

API Keyが発行されます。
Your key is: に表示されているのがキーです。


次に、下記のコードの「取得したAPIキー」の部分にあなたのAPIキーをはりつけます。
そしてテンプレートの</head>の上にまるごとコピー&ペーストします。

<!--********** related entries start **********-->
<!--permanent_area-->
<script src="http://www.google.com/jsapi?key=取得したAPIキー" type="text/javascript"></script>
<script type="text/javascript">

google.load("feeds", "1");

function OnLoad() {

  var feedControl = new google.feeds.FeedControl();
  
  <!--topentry--><!--tag_list-->
  feedControl.addFeed("<%url>?xml&utag=<%topentry_tag_list_parsename>", "<%topentry_tag_list_name>");
  <!--/tag_list--><!--topentry-->
  
  feedControl.setNumEntries(5);
  feedControl.setLinkTarget(google.feeds.LINK_TARGET_SELF);
  feedControl.draw(  document.getElementById("outcontent"),
                     { drawMode : google.feeds.FeedControl.DRAW_MODE_LINER }
                  );
}
google.setOnLoadCallback(OnLoad);

</script>
<!--/permanent_area-->
<!--********** related entries end   **********-->



最後に、テンプレート関連記事を表示させたい部分に下記のコードを貼りつけます。個別記事の下あたりなんかがいいと思います。

<div id="outcontent">Loading...</div>


以上です。簡単にできますのでお試しください。表示のカスタマイズをしたい場合は補足をご覧ください。



補足1:

リンク先を新しいウィンドウで開きたい場合は

feedControl.setLinkTarget(google.feeds.LINK_TARGET_SELF); を
feedControl.setLinkTarget(google.feeds.LINK_TARGET_BLANK ); にします。

表示される関連記事の数を変更したい場合は

feedControl.setNumEntries(5); の数字部分を
feedControl.setNumEntries(10); などの好きな数字に変更します。

関連記事をタブ表示にしたい場合は

{ drawMode : google.feeds.FeedControl.DRAW_MODE_LINER }を
{ drawMode : google.feeds.FeedControl.DRAW_MODE_TABBED }に変更します。

縦のスペースをあまりとりたくない場合にはタブ表示にすると便利です。


補足2:

必要に応じてCSSで見た目を整えることができます。
表示形式によってちょっと変わります。

リスト表示{ drawMode : google.feeds.FeedControl.DRAW_MODE_LINER }にした場合のセレクタ

<div class="gfc-control">
  <div class="gfc-resultsbox-visible">
    <div class="gfc-resultsRoot">

      <div class="gfc-resultsHeader">
        <div class="gfc-title">タグ名</div>
      </div>

      <div class="gfc-results">
        <div class="gfc-result">
          <div class="gf-result">
            <div class="gf-title"><a href="記事へのリンク" class="gf-title" target="_self">記事タイトル</a></div>
            <div class="gf-author">by 著者</div>
            <div class="gf-spacer">-</div>
            <div class="gf-relativePublishedDate">xxxx年xx月xx日</div>
            <div class="gf-snippet">記事の概要</div>
          </div>
        </div>
      </div>
      
    </div>
  </div>
</div>


タブ表示{ drawMode : google.feeds.FeedControl.DRAW_MODE_TABBED }にした場合のセレクタ

<div class="gfc-control">

  <div class="gfc-tabsArea">
    <div class=" gfc-tabHeader gfc-tabhActive">タグ名</div>
  </div>

  <div class="gfc-resultsbox-visible">
    <div class="gfc-resultsRoot gfc-tabData gfc-tabdActive">

      <div class="gfc-resultsHeader">
        <div class="gfc-title">タグ名</div>
      </div> 

      <div class="gfc-results">
        <div class="gfc-result">
          <div class="gf-result">
            <div class="gf-title"><a href="記事へのリンク" class="gf-title" target="_self">記事タイトル</a></div>
            <div class="gf-author">by 著者</div>
            <div class="gf-spacer">-</div>
            <div class="gf-relativePublishedDate">xxxx年xx月xx日</div>
            <div class="gf-snippet">記事の概要</div>
          </div>
        </div>
      </div>
      
    </div>    
  </div>
  
</div>



参考:

Google AJAX Feed API入門 複数フィードの取得

google code Code Playground Feed Control

JavaScript Reference - Google Feed API

google ajax feed api Class Reference

こちらの記事も合わせてご覧ください



この記事と同じカテゴリの記事 - カテゴリ「 FC2 Blog Tips

コメントの投稿

非公開コメント

サイト内検索

カテゴリ
最新記事
RSS
最新トラックバック
最新コメント
月別アーカイブ
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。