FacebookのようにURLを打ち込むとサイトの情報がでてくるjQueryプラグイン

表示までのスピードはやや気になるが、

何かあった時に使えそうなプラグインを見つけたのでメモ。

デモはこちら。

demo


var scrapper_total_width = 403;
var scrapper_image_width = 100;
var scrapper_image_height = 100;

var scrapperLinkURL;
var scrapperLinkTitle;
var scrapperLinkDescription;
var scrapperLinkImageURL;
var scrapperText;

function displayScrapperData()
{
	$('#displayArea').prepend('<hr/><br/><div style="margin:0px auto; text-align:center;"><img src="'+scrapperLinkImageURL+'"/></div>'+'<br/><b>Text: </b>'+scrapperText+'<br/><b>URL: </b>'+scrapperLinkURL+'<br/><b>Title: </b>'+scrapperLinkTitle+'<br/><b>Description: </b>'+scrapperLinkDescription+'<br/><b>Image Source: </b>'+scrapperLinkImageURL+'<br/><br/>');
}

var scrapper_total_width = 403;

var scrapper_image_width = 100;

var scrapper_image_height = 100;

var scrapperLinkURL;

var scrapperLinkTitle;

var scrapperLinkDescription;

var scrapperLinkImageURL;

var scrapperText;

function displayScrapperData()

{

$('#displayArea').prepend('<hr/><br/><div style="margin:0px auto; text-align:center;"><img src="'+scrapperLinkImageURL+'"/></div>'+'<br/><b>Text: </b>'+scrapperText+'<br/><b>URL: </b>'+scrapperLinkURL+'<br/><b>Title: </b>'+scrapperLinkTitle+'<br/><b>Description: </b>'+scrapperLinkDescription+'<br/><b>Image Source: </b>'+scrapperLinkImageURL+'<br/><br/>');

}

scrapper_total_width

これは自動生成されるテキストエリアの横幅。

scrapper_image_width

URL入力後に出てくるサムネイルの横幅。

scrapper_image_height

URL入力後に出てくるサムネイルの高さ。

scrapperLinkURL
scrapperLinkTitle
var scrapperLinkDescription
scrapperLinkImageURL
scrapperText

それぞれ取得したサイトの情報が格納されるが、

変数名が固定のようなので、変更しない方が良い。

上記に格納されたそれぞれの要素を

prepend()

の引数にHTMLの文字列として代入すると出力される。

このHTMLを変更してCSS調整すればオリジナルにもなるのがとてありがたい。

html


<div id="container">
    <div id="box">
        <h1>FacebookのようにURLを打ち込むとサイトの情報がでてくるjQueryプラグイン</h1>
        URLを入れてちょっと待ってね<br/>
        <div id="linkScrapper"></div>
    </div>
    <div id="displayArea"></div>
</div>