• かちびと.net

    テキストボックスに指定したURLのタイトルやdescription、使用されている画像等を取得するjQueryプラグイン・Link Scrapper TextBoxのご紹介です。

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

テキストボックスに指定したURLのタイトルやdescription、使用されている画像等を取得するjQueryプラグイン・Link Scrapper TextBox

スポンサーリンク

指定したリンク先の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

URL :
TRB :

Comments & Trackbacks (2)

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services