Twitter,Facebookにも対応!マウスオーバーでかっこ良く情報表示「Hovercard」

Twitter,Facebookにも対応!マウスオーバーでかっこ良く情報表示「Hovercard」サンプル スタイリッシュなツールチップとしても、TwitterやFacebookアカウントの情報表示にも使える便利なプラグインが登場。
Hovercardを利用すれば実に簡単に導入できちゃいます。

使用方法 Hovercardからファイルをダウンロード。
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="jquery.hovercard.min.js"></script>
<script>
$(function() {
//ツールチップの場合
var hoverHTMLDemoBasic = '<p>skaure is me.</p>'; //表示させたい内容
$("#id1").hovercard({
detailsHTML: hoverHTMLDemoBasic,
width: 200, //幅
cardImgSrc: '画像.jpg' //表示させたい画像
});

//Twitterアカウントの場合
$("#id2").hovercard({
showTwitterCard: true,
width: 350 //幅
});

//Facebookアカウントの場合
$("#id3").hovercard({
showFacebookCard: true,
facebookUserName: 'skuare.net', //ユーザーor Facebookページ
width: 350 //幅
});
});
</script>

あとは対応するidを記述すれば完成です。
<p id="id1">skuare</p>
<p id="id2" data-hovercard="twitterアカウント">skuare @twitter</p>
<p id="id3">skuare.net on Facebook</p>

Twitter,Facebookにも対応!マウスオーバーでかっこ良く情報表示「Hovercard」サンプル

sponsors

「Twitter,Facebookにも対応!マウスオーバーでかっこ良く情報表示「Hovercard」」をシェアする

記事作成:
記事URL:

TOP > > Twitter,Facebookにも対応!マウスオーバーでかっこ良く情報表示「Hovercard」