指定したリンク先のURLやタイトル
、description、ページ内で使用し
ている画像を取得するjQueryのプラ
グイン・Link Scrapper TextBoxの
ご紹介です。Facabook等でも使わ
れていますね。

Facebookのように、テキストボックスにURLを入れると、そのURL先のタイトルやdescription、画像を取得する、というスクリプトです。jQueryに依存しています。

Link Scrapper TextBox

上記のようにタイトルやdescriptionなどを取得、表示しています。何かと使えそうですねー。

以下公式の動作サンプルです。

Sample

コード

	<script src="http://code.jquery.com/jquery-latest.js"></script>
	<script src="linkScrapper.min.js"></script>

本体とプラグインを読み込みます。

後はセッティング。

var scrapper_total_width = 400;//全体のボックスの長さ
var scrapper_image_width = 100;//サムネの幅
var scrapper_image_height = 100;//サムネの高さ

//各出力変数
var scrapperLinkURL; 
var scrapperLinkTitle; 
var scrapperLinkDescription;
var scrapperLinkImageURL; 
var scrapperText; 
 
function displayScrapperData() {  
 各項目を表示するDOMを生成
 $('#foo').prepend('<hr/><div style="margin:0px auto; text-align:center;"><img src="'+scrapperLinkImageURL+'"/></div>'+'<b>Text: </b>'+scrapperText+'<b>URL: </b>'+scrapperLinkURL+'<b>Title: </b>'+scrapperLinkTitle+'<b>Description: </b>'+scrapperLinkDescription+'<b>Image Source: </b>'+scrapperLinkImageURL+'');
}

ボックス内のレイアウトはセッティングにて作ります。

<div id="linkScrapper"></div>
<div id="foo"><hr/></div>

マークアップは空のボックスを用意するだけ。

なかなかべんりっぽいです。

Link Scrapper TextBox