指定したリンク先のURLやタイトル
、description、ページ内で使用し
ている画像を取得するjQueryのプラ
グイン・Link Scrapper TextBoxの
ご紹介です。Facabook等でも使わ
れていますね。
Facebookのように、テキストボックスにURLを入れると、そのURL先のタイトルやdescription、画像を取得する、というスクリプトです。jQueryに依存しています。
Link Scrapper TextBox
上記のようにタイトルやdescriptionなどを取得、表示しています。何かと使えそうですねー。
以下公式の動作サンプルです。
コード
<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> |
マークアップは空のボックスを用意するだけ。
なかなかべんりっぽいです。
