ブログにTwitter、Facebook、はてぶなどの複数のボタンを追加できるAdd thisの使い方

WEBサービス サイト制作 2011 年 12 月 9 日 google+0 はてなブックマーク3 Evernote

Twitter、Facebook、はてなブックマークなどの複数のボタンを追加できるサービス、Add this。
Add this

ボタンをカスタマイズ出来たりと、色々カスタマイズもできて便利。

使い方
1.簡単な設置
2.カスタマイズ
3.もっとカスタマイズ

1.簡単な設置

Add this に行き「Get the Code」をクリック。

登録するとアクセス解析機能も使えるけど、登録しなくても使えます。(その場合×で閉じる)

後はコードをそのままコピーし、表示させたい場所に貼り付けるだけ。
どのようなボタン表示されるかは、右のPreviewに表示されます。

2.カスタマイズ

表示されるボタンを変更したい場合。
先ほどの画面のCustomizeをクリック。

Style から選んでもいいけど、more options...をクリックすると更に色々選べます。

いいね!、Twitter、Googleなども表示できます。

3.もっとカスタマイズ

表示されるボタンをもっと自由に変更したい場合。
AddThis Toolboxを参照。
基本的な事が簡単にまとめられています。

デフォルトのコードを持ってきて、太字の部分を書き換えます。

<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_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" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4ee074bf473ba60e"></script>
<!-- AddThis Button END -->

例)
32pixの大きいアイコンに変更。

<div class="addthis_toolbox addthis_default_style ">

<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>

<a class="addthis_button_hatena"></a>
<a class="addthis_button_twitter"></a>
<a class="addthis_button_evernote"></a>
<a class="addthis_button_facebook"></a>
<span class="addthis_separator">|</span>
<a class="addthis_button_tweet"></a>
<a class="addthis_button_compact"></a>

表示したいボタンのコードは、以下参照。
Service Codes

<span class="addthis_separator">|</span>
は、|の表示。

ボタンを足したり、区切りを付けたり、ボタンのデザインを変更したりもできます。

参考サイト:
ソーシャルブックマーク、お気に入り、印刷など簡単に追加できるシェア系ボタン『Add this』
シェアツールカスタマイズ3本勝負:AddThis編(1) | pico.mint blog.

企業や通販サイトでもよく設置されているAdd this。

最近重くてはずしていた、AddClips(AddClipsではてなブックマークが使えない? - サツぽろ、ニッキ。)の代わりなるな、とは思っていたのだけど。

こうやって付けてみると、カスタマイズ性もあるのでかなり便利。
今はサイドメニューに追加しているけど、ボタン数を調整できるし、後から別な場所に移そうかな。

Add thisのサイトを見れば、他にも色々カスタマイズできますヨ。

【ご連絡】WordPress、サイト制作関係の新しい記事は、こちらのサイトに書いてます

広告

CPI 激安ドメイン ロリポップ!レンタルサーバー @Next Style お名前.com お名前.com


人気ブログランキング にほんブログ村 blogram

関連記事

    コメントフォーム
    メールアドレスは必須ですが公開はされません

    トラックバックURL
    広告
    ブックマーク
    はてぶ人気記事
    過去ログ