*/ -->

コメント欄

[2011/10/01] 新しい記事を書きました。

リンク先の記事タイトルを自動挿入するjQueryプラグイン "bLinker"

Bloggerに複数の記事をポストしていくと、日本の場合「次の投稿」と「前の投稿」、英語の場合「Older Posts」と「Newer Posts」というページャリンクが表示されるようになります。他のブログエンジンでは、この部分に記事のタイトルを表示できるのですが、"<data:newerPostTitle/>"のようなデータタグは用意されていないようです。

そこで、この部分を再現するjQueryコードを書きました。以下にそのコードを示します。

コード

$(function(){
var element = $(".blog-pager-newer-link").attr("data-element");
var newerLink = $(".blog-pager-newer-link").attr("href");
$.ajax({
  type : "GET",
  url : newerLink,
  success : function(html){
    var title = $(html).find(element).text();
    $(".blog-pager-newer-link").text(title);
  }
});
});

このコードは、"blog-pager-newer-link"クラスを持つ"a要素"から"data-element"属性と"href"属性の値を取得して利用しています。"deta-element"属性には、記事のタイトルを含む要素を指定してください。このブログで利用している設定を以下に示します。

<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:title='data:newerPageTitle' data-element='.post-title-wrapper a'><data:newerPageTitle/></a>

このブログでは"post-title-wrapper"クラスを持つラッパーの中に"a"要素がありその中にタイトル文字列が格納されているため、"data-element"属性には".post-title-wrapper a"を指定しています。この部分はテンプレートによって異なるので利用する際は適宜修正してください。

この"a"要素を使って非同期通信を行い、取得したHTMLからタイトルを取得し、"a"要素の内容に結果を出力しています。

この方法は、このスクリプトが実行されたブログから自身のブログに対してのみ有効です。たとえば、このスクリプトが実行されるブログ"aaa.blogspot.com"からその他のブログ"bbb.blogspot.com"に対してタイトルを取得しようとしても失敗します。特にローカルテストを行う際にはこの点に注意が必要です。

そのうちjQueryプラグインにして再度記事にするかもしれません。

関連性がある記事

Disqusでコメント