Cntlog > スキルアップ・ノウハウ > コーディング > WordPressじゃなくても、コピペでいけるソーシャルボタンの設置方法

WordPressじゃなくても、コピペでいけるソーシャルボタンの設置方法

各種ソーシャルボタンってWordPressなら簡単に設置できるけど、自分で普通に設置しようと思うと初めてだとどうやって設置していいかわからないですよね。
そんな人向けに、よく見るデザインを簡単にSNSボタンの設置方法をご紹介します。

はじめに

各種ソーシャルボタンをまとめて簡単に設置できてしまう便利なjQueryプラグインがあるのでそれを使います。
jquery.socialbutton

対応しているソーシャルボタン

  • はてなブックマーク
  • Twitterつぶやくボタン
  • facebookいいねボタン
  • facebook Shareボタン
  • Google+1 ボタン
  • Evernote サイトメモリー
  • Pinterest ボタン
  • mixiイイネ!ボタン
  • mixiチェックボタン
  • GREE いいねボタン

使い方

まずはjQueryPluginを読み込みます。

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="js/jquery.socialbutton-x.x.x.js" type="text/javascript"></script>

※jquery.socialbuttonは「jquery.socialbutton」からダウンロードしてお使いください。

使いたいソーシャルボタンを選択します。
※今回はよく使われている、はてなブックマーク、Twitter、facebookで解説します。

HTML

<ul class="sns-btn-list">
<li class="hatena"></li>
<li class="tweet"></li>
<li class="facebook_like"></li>
</ul>

CSS

.sns-btn-list {
overflow: hidden;
}
.sns-btn-list li{
float: left;
margin-top: 0.5rem;
margin-right: 1rem;
list-style: none;
}

javascript

javascriptで下記のような記述をします。(オプションの指定あり。)
ここでは、上記で作ったclassの空のタグの中にどのボタンを入れるかを指定しています。
例)class=”tweet”の中にtwitterのソーシャルボタンを入れる。
※.hatena.tweet.facebook_likeは任意のセレクタでOKです。

<script>
$(function () {
$('.hatena').socialbutton('hatena'); 
$('.tweet').socialbutton('twitter', {button: 'horizontal'});
$('.facebook_like').socialbutton('facebook_like', {button: 'button_count'}); 
});
</script>

ねっ、簡単でしょ(*ゝω・*)

See the Pen jQuery.socialbutton by conti (@contiki9) on CodePen.0

WordPressの場合

WordPressでは、色々pluginが出ていますが、私は「WP Social Bookmarking Light」をよく使います。
理由は対応しているソーシャルボタンが豊富なのと、管理画面で順番や出す位置も指定できるところです。
テーマ側に埋め込んで管理するのも簡単なのでオススメです。
詳細は下記からご確認ください。
WP Social Bookmarking Lightをもっと便利に使う方法

関連記事

Bootstapのグリッドでcolumn崩れが起きるときの対処法... Bootstrap3でグリッドを使っているとしばしば、カラム落ちしてレイアウト崩れをおこしている状態を見かけます。 今回はその対処方を紹介します。 対処方法 Flexboxを使う gridの.rowにFlexboxを当てれば解決します。 CSS ....
Sassの人気に嫉妬!でもLESSにだっていいとこあるんだよ... 最近「Web制作者のためのSassの教科書 これからのWebデザインの現場で必須のCSSメタ言語 」という本が出版されてSassがさらに注目されていますね。 個人的にはいよいよSass一択になってLESSが淘汰されていっちゃうのかなと心配しています。 そもそもLESSって何?って方もいるでし...
Photoshopとかにある描画モードはCSS3で出来るよ【サンプル有り】... CSS3になって角丸はグラデーション、ドロップシャドウなどデザインツールを駆使して行っていたデザインがいとも簡単にできるようになりましたね。 実はCSS3ではphotoshopやFireworksにあるような、描画モード的な表示もできるようになっています。 ...
【サンプル有】日本語WebFont 一歩前進! Google Fonts 日本語早期アクセスのページ... Googleが提供しているWeb FontでとうとうGoogle Fontsの日本語早期アクセスのページが公開されましたね。 これまで日本語WebFontといえばNotoFontが有名でしたが今回の8つのフォントが追加されました。 簡単にですが公開されたフォントを紹介します。 ...
コーディングが苦手な初心者Webデザイナーに上達するCSSの勉強法... Webデザイナーになろうとして、まず最初につまずくのがコーディングです。 CSSは慣れてくると簡単なのですが初めて触るとなると、何から手を付けてよいかわからない、何が正解がわからないなどの理由で挫折する人を多く見かけます。 本記事ではCSSが全然わからない方がCSSのコーディングに慣れるため...
【2017年】よく使うmetaタグとかをまとめてみた... Web制作を長いことやっていても、中々勉強する機会のないmetaタグやlinkタグでよく使うものを整理しました。 これまで必要な度にコピペしていた人、これからWebを勉強する人の参考になれば幸いです。 使いやすいようにスプレッドシートにもまとめています。 記事を読むのが煩わしいかた...