今日の人気記事

  1. select要素の複数選択フォームを実装「Multiple Select」
  2. 指定した要素を更新(変更)する「Refreshing an element at a set time interval」
  3. Tableの行がドラッグアンドドロップできる「Table Drag and Drop」
  4. シンプルなドロップダウンリストを実装できる「Simple Dropdown List」
  5. スクロールしてもついてくるナビゲーション・メニュー「Tocible」

Twitter・Facebook などのカスタムボタンを実装「prettySocial」

スポンサーリンク

Twitter・Facebook……などのカスタムボタンを実装するプラグイン「prettySocial」を紹介します。

jQueryプラグイン「prettySocial」

このプラグインを使えば、「Twitter」「 Facebook」「Google Plus」「Pinterest」のカスタムボタンを実装することができます。

デフォルトのボタンではサイトのイメージに合わない! という方におすすめのプラグインです。

スポンサーリンク

デモページのソーシャルボタンをご覧ください。

「prettySocial」のデモ

ソース( HTML + jQuery )

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="prettySocial のデモでーす。">
<title>prettySocial - jQueryプラグイン</title>
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="jquery.prettySocial.min.js"></script>
<style>
.social-container {
  padding: 30px;
}
.social-container .links a {
  margin: 0 20px;
  color: #ccc;
  text-decoration: none;
  font-size: 34px;
  font-weight: bold;
}
.social-container .links a:hover {
  color: #ED452A;
}
</style>
</head>
<body>
<h1>prettySocial のデモでーす。</h1>
<div class="social-container">
  <div class="links">
    <a href="#" data-type="twitter" data-url="https://webkaru.net/jquery-plugin/" data-description="prettySocial のデモ" data-via="webkaru_jquery" class="prettySocial fa fa-twitter"></a>
    <a href="#" data-type="facebook" data-url="https://webkaru.net/jquery-plugin/" data-title="prettySocial のデモ" data-description="prettySocial のデモ" class="prettySocial fa fa-facebook"></a>
    <a href="#" data-type="googleplus" data-url="https://webkaru.net/jquery-plugin/" data-description="prettySocial のデモ" class="prettySocial fa fa-google-plus"></a>
    <a href="#" data-type="pinterest" data-url="https://webkaru.net/jquery-plugin/" data-description="prettySocial のデモ" data-media="http://sonnyt.com/assets/imgs/prettySocial.png" class="prettySocial fa fa-pinterest"></a>
  </div>
</div>

<script>
  $('.prettySocial').prettySocial();
</script>
</body>
</html>
スポンサーリンク

関連記事(一部広告含む)