【３分で出来る】AddThisを使って超簡単にソーシャルボタンを設置する 3

 

どもども、php勉強中の私です

進行状況といたしましては”Hellow World!!”と表示させることが出来るようになりました。

随分スケールの大きなメッセージが書けるようになったもんです。

 

まだまだ自作テーマへの道のりは遠いようです…

 

話は変わりまして、先日関連記事の表示をZenbackからYARPPに変更したという記事を書きました。

 

関連記事表示をYet Another Related Posts Pluginに変えてみた

 

暫く気が付かなかったのですが、このブログのソーシャルボタンをZenbackで賄っていた為、Zenbackを外す=ソーシャルボタンを外すってことな訳で…

何日も気が付かなかったなんて阿呆です。大阿呆野郎です。

 

なので早速追加してみました。

 

サイドバー

 

記事の下にも

 

なかなかいい感じに設置できたと思います。

色々方法はあるみたいなのですが、これが一番簡単で且つすぐにできる設置方法だったのでご紹介します。

 

 

使うのはAddThisというソーシャルボタンをまとめて設置できるサービス。

世界中の、ありとあらゆるソーシャルボタンを設置出来ます。

あの”はてな”までカバーしているんだから相当だと思います。

 

このサービスのいい所は、自分がメインで設置したボタンの他に[+]ボタンを付けておくと、そこに様々なソーシャルサービスを詰めておけるので、スタイリッシュな見た目は維持したまま幅広いソーシャルサービスに対応できるというなんとも素晴らしいいシステムです。

 

 

 

 

 

それでは導入方法です。

 

 

まず、AddThisへ行き、会員登録をしてください。

サイトの右上に「Create Account」という文字があるのでクリック

 

 

AddThisにはWordPress用のプラグインがあるのですが、もしそれを使いたい場合は必ずメールアドレスで登録してください。

プラグインの設定でメールアドレスとパスワードの入力を求められます。

登録すると自動でコードが生成されるので、それでいい場合はソーシャルタイプの登録でも大丈夫です。

 

これで登録は完了です。

ここからはプラグインを使う場合とAddThisで作ったコードを使う場合の二種類のやり方がありますので順にご紹介します。

 

 

 

◇プラグインを使う場合

まずはプラグインをインストールします。

ここからダウンロードするか、「addthis.3.0」と検索して一番目に出てきたのをインストールしてください

 

参考　：　WordPressプラグインをインストールする3つの方法

 

設定 → AddThis Shere と進みます。

「Top Sharing Tool」と「Bottom Sharing Tool」の二種類のボックスがあるので、表示させたいものにチェックを入れます。

Top Sharing Toolは記事の上、Bottom Sharing Toolは記事の下に表示されます。

チェックを入れると、ボタンの種類が選べるので、好きなボタンを選択します。

 

自分で表示するソーシャルボタンの種類や配置を決めたい場合は一番下のCustom buttonを選んでコードを入力します。

コードは後程紹介するのでそちらを参考にしてください。

 

次にプロフィールIDとアカウントを登録します。

右上にプロフィールIDを入れる箇所があるので、そこに自分のプロフィールIDを入力してください。

 

プロフィールIDが分からない方は

AddThisにログインして、右上の人のマークを選択、「Settings」をクリックします。

 

「Profiles」をクリック

 

プロフィールページが表示され、プロフィールIDが分かります。

 

「ra-」の後の英数字をコピーして先程のプロフィールID欄に入力してください。

最後に登録したメールアドレスとパスワードを入力したら保存してください。

 

 

両方緑色でチェックが着けばOK

 

これで基本のソーシャルボタンの設置は完了です。

 

 

◇コードを取得して設置する場合

こちらはプラグインを使用しない人と、プラグインは使うけどカスタムコードが使いたいって人向きです。

 

まずはコードの取得から。

 

AddThisのメニューバーから「Get The Code」を選択します。

コードが書かれたページが表示されるので、コピーします。

 

 

あとはウェジットなり記事内なり好きな場所へそのまま貼り付けて使えます。

 

プラグインに使う場合は

<script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>
<script type="text/javascript" src="http://s7.addthis.com/js/300/addthis_widget.js#pubid=ra-50a0951d0579b559"></script>

この二行を削除して貼り付けてください。

 

 

◇ボタンを変えたり追加したい場合

 

コードを書き換えることで好きなボタンを設置することが出来ます。

最初のコード↓

(AddThisの２番目の正方形のボタンタイプを選択した時のコードで説明してします)

<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style addthis_32x32_style">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
<script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>
<script type="text/javascript" src="http://s7.addthis.com/js/300/addthis_widget.js#pubid=あなたのプロフィールID"></script>
<!-- AddThis Button END -->

 

この部分がボタンのコードです。

<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>

 

1~4と数字が書いてあるのがデフォルトで設定されているソーシャルボタン

<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>

 

これは[+]ボタン

<a class="addthis_button_compact"></a>

 

これがシェアされた数を表示する吹き出しです

<a class="addthis_counter addthis_bubble_style"></a>

 

レイアウトはそのままに、ボタンの種類だけ追加・変更をしたい場合は1~4の部分を変えます。

例えばFaceBookなら

<a class="addthis_button_preferred_facebook"></a>

となります。

数字の部分が”facebook”に変わりました。

 

Twitterなら”twitter”に変わります。

 

そのまんまです(笑)

 

詳しくはAddThisのService Directory – Service Codesに一覧がありますので確認してみてください。

本当ビックリするくらい沢山のSNSがあるので、眺めてるだけでも面白いですよー

 

参考までに私の記事下に設置しているコードを晒しておきます。

これね↓

一応日本の基本的なソーシャルボタンは網羅したつもりです。

 

<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style addthis_32x32_style">
<a class="addthis_button_facebook"></a>
<a class="addthis_button_twitter"></a>
<a class="addthis_button_google_plusone_share"></a>
<a class="addthis_button_hatena"></a>
<a class="addthis_button_evernote"></a>
<a class="addthis_button_favorites"></a>
<a class="addthis_button_gmail"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
<script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>
<script type="text/javascript" src="http://s7.addthis.com/js/300/addthis_widget.js#pubid=ra-あなたのプロフィールID"></script>
<!-- AddThis Button END -->

 

もしデザイン変更の方法やもっと深く潜ったカスタム(AddThisにないボタンを追加するなど)をしたい方は

AddThisボタンを表示する – DoboWiki

が日本語で詳しくコードを解説されていてとても参考になるのでおすすめです。

 

 

これにしてから何が楽しいって、吹き出しに数字が着くことが何よりも嬉しくって！！

１日せいぜい３０人前後しか訪問者のいないネットの海の端の端の端のブログだけど、数字が付くたび、

「ああ、読んでくれただけじゃなく、何かしらの方法で保存までしてくれた人がいる」

ってすごーく幸せな気持ちになるんですね。

俄然更新するぜ！ってやる気が湧くわけです。

 

(なぜかphpが出来ないと嘆いた記事が一番シェアされてるのが不思議ですが…)

 

 

今まで沢山のブログやサイトの知識に助けられてネットを楽しんできたので、私もこれからネットを始める沢山の人のお役にたてる記事が書ければ幸いです。

 

貼り付けるだけの超簡単・充実ソーシャルボタン、おすすめです。