Blog

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

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

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

デモはこちら。

demo

 

js

scrapper_total_width

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

 

scrapper_image_width

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

 

scrapper_image_height

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

 

scrapperLinkURL
scrapperLinkTitle
var scrapperLinkDescription
scrapperLinkImageURL
scrapperText

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

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

 

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

prepend()

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

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

 

html

 

#linkScrapperにはURL入力用のテキストエリアが入り

#displayAreaには決定ボタンを押した時の結果が表示される。

 

各要素の見た目は

linkScrapper.min.js

の中にベタ書きなので、書き換えればどんなデザインにも変更できそうなのがありがたい。

URL入力後結果がでるのが少し遅いのが玉に瑕だが

要望などでそうなので、何かあった時にはつかえそうだ。

Author Profile

hoshino

ECのことを中心に書きたいと思います。
ネタが無いときはプログラムやデザインのことも書きます。

» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ