Twitter・Facebook などのカスタムボタンを実装「prettySocial」
当ページのリンクには広告が含まれています。
スポンサーリンク
Twitter・Facebook……などのカスタムボタンを実装するプラグイン「prettySocial」を紹介します。
jQueryプラグイン「prettySocial」
このプラグインを使えば、「Twitter」「 Facebook」「Google Plus」「Pinterest」のカスタムボタンを実装することができます。
デフォルトのボタンではサイトのイメージに合わない！ という方におすすめのプラグインです。
スポンサーリンク
デモページのソーシャルボタンをご覧ください。
ソース（ 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>
スポンサーリンク