Google APIのサイト内検索機能を使い関連記事を表示

Google APIのサイト内検索機能を使い関連記事を表示

Google APIでブログの関連記事を表示することは出来ないかと思い探していたらWebparkさんの記事にGoogle AJAX Search APIで関連記事を表示(FC2ブログなど)と言う記事がありました。その記事を勉強させていただいた上で少しアレンジを加えたので紹介したいと思います。

Google APIのサイト内検索機能を使い関連記事を表示するための準備

関連記事はGoogle APIのサイト内検索機能を使って表示させるようにしています。サイト内検索なので通常は検索窓にキーワードを入力して検索するんですが、このキーワードを記事別に自動で入力させてやることによって関連記事が表示されるような感じになります。

検索窓にキーワードを自動入力

ではどのような感じでキーワードを自動入力させているかをアメブロを元に説明します。

キーワードを自動入力できる仕組み

ブログ記事には必ずテーマ、カテゴリーなどがあります(使用ブログによって名称が異なると思います。)アメブロではテーマで記事を分けるような感じになっています。

アメブロのテーマ

それではこのテーマのコードを見てみます。アメブロだと.articleTheme aを使った要素の中にテーマのキーワードが入っているのが分かると思います。

テーマのコード

.articleTheme aの中に入っているテーマのキーワード「ホームページの基本」と言うテキストのみをJQueryで引き抜き又それを検索窓に自動で反映出来るような仕組みにしてあります。JQueryでテキストのみを引き抜くのに使われている要素が必要になりますので、テーマ(アメブロでの名称)、カテゴリー(他のブログでの名称)などので使われている要素を調べておいてください。

それではGoogle APIのサイト内検索機能を使い関連記事を検索窓付き、検索窓なし、CSSによってカスタマイズの順に紹介してきます。

固定ページ: 1 2 3 4

最終更新日: 2013年3月13日

  • このエントリーをはてなブックマークに追加
  • にほんブログ村 IT技術ブログ WordPressへ
  • ameba
  • addthis
  • Clip to Evernote

Google APIのサイト内検索機能を使い関連記事を表示の関連記事

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


*