ロリポブログにもトラックバックにサムネイル画像

スポンサーリンク
エントリー内リンクはアフィリエイト広告を含みます。
エントリー内リンクはアフィリエイト広告を含みます。

 なんか2つのブログでこの数記事、ずっとブログカスタマイズ書いてるね。ま、FC2とLOLIPOP!ではちょっと違うのもあるので良いとしてくださいな。

 そんな訳で、FC2ブログの方で使い始めたTB部分の画像のサムネイル表示。(それについての記事はこちら)これをロリポップでも使ってみようと思った。

 利用するのはSimpleAPIで、これを利用するとこういう事が出来ます。私のブログの例↓

こんな感じに繋げる。
http://img.simpleapi.net/small/http://blog.planting-field.com/
   ↓こうなる

 全くFC2で適用した物と同じようにここのロリポブログでもやってみようと思ったところ、ロリポブログにはFC2の様にTBをしたサイトのURLだけを取得する独自タグがないのだ。ロリポブログや同型のJUGEMブログ、さらにはほぼ互換のSerene BachとかのTBした先のURLが書かれているはずの独自タグは{trackback_title}なのですが、この中身は
<a href="(URL)" target="_blank">(トラックバック記事の題名)</a>
なのです。要するに、{trackback_title}に、ブログのURL、トラックバックの題名、リンクタグ全てが1パッケージにまとめられてしまっているのです。これだとFC2のブログで行った方法は使えません、さて、困ったと思い、色々検索したらたどり着きました。stroll::blogさんのブログで「指定したaタグorURLの画像を表示するスクリプトβ」と、言う記事で、このロリポやJUGEMで使われている{trackback_title}からURL部分を抜き出し、SimpleAPIを利用し、サムネイル画像を作る!っていうやつです。これをJavaScriptを使って可能にされていました。

 で、この「指定したaタグorURLの画像を表示するスクリプトβ」に書かれている方法を使わせていただきさっそくチャレンジ!

いつものように<head></head>内にJavaScriptを挿入と指示されていますが、ロリポブログのHTML部分の制限数に引っかからないために外部ファイルとしてServerにJavaScriptを保存し<head></head>内にリンクさせます。

 次にサムネイル画像を表示させたい部分に

2.画像を表示したい場所に以下のスクリプトを追加してください。
(↓はJUGEMでトラックバック元のblogの画像を表示する場合。)

と書かれている部分の下に記載されているJavaScriptを突っ込みます。するとバッチリ!下に記載した写真のようになります。

参考リンク
stroll::blogさんのブログで「指定したaタグorURLの画像を表示するスクリプトβ
私のFC2ブログ「トラックバックにサムネイル画像装着!

追記
 現在このサムネイル化するJavaScriptを外部ファイルとしてリンク記述しているのですが、この方法をとっているためWindowsのInternetExplorerではTBのサムネイル画像が表示されません。html内に直接記述すると表示されるのですが、JavaScriptは外部ファイルにしておきたいので対応予定はありません。サムネイルをご覧になりたい方はFirefoxで閲覧してみてください。Macの場合はsafari、Firefox共に見ることが出来ます。

現在このblogはロリポブログではありません。Serene Bachを利用しています。しかし、独自タグなどがほとんど同じですので上記に書いた方法でSerene BachでもTBのサムネイル化が出来ます。でも、plug-in「コメント、トラックバックタグ拡張」を利用すれば上記の方法を使うよりも簡単にできますので、そちらでやってください。
紹介記事はこちら:Serene BachでTBとかのthumbnailとFaviconを表示

コメント

  1. トラックバックにサムネイル画像装着!
     またまた、カスタマイズな記事です。ブームに乗り遅れること約一ヶ月。以前から気になっていたトラックバックしてくださったブログさんの画像をサムネイル方式で表示するという物で

  2. ムーバブルタイプでトラックバック送信元のサイトサムネイルを自動で表示する方法
    実際ブログを見に来てくれてる方々にも、トラックバックって必要なの?なんて思ってしまう今日この頃。。
    先日、サイトのサムネイル作ってくれるSimpleAPIの記事でご紹介しました、このツールを使えばトラックバック送信元のサイトのサムネイルを自動的に表示することができますねん。

  3. Movable Typeはロリポップ!から始める!
    ロリポップ!でMovable Typeをインストールして使う初心者の挑戦記です。ご参考までに。

タイトルとURLをコピーしました