ブログでの social sharing(AddThis の紹介と はてブの追加)

このブログで左端に浮いているソーシャル系のボタン。

social_sharing_button

これはプラグインではなく、AddThis というサービスでコードを作成したものをテーマの PHP ファイルに貼り付けています。

やり方は簡単。
AddThis のホームページに行き、まずアカウントを作ります。
そうじゃないとコードを作れない。

addthis_toppage

右上の “Sign In or Create Account” から。

アカウント作成の画面が表示されるので、適宜選択。
自分の場合は Facebook のアカウントでログインしてちょいちょいしておしまい。

addthis_create_account

アカウントができたらコードを作ります。
トップメニューから “Get The Code” のタブを選択。

addthis_get_code

左に見えている設定ボタンをポチポチすると、右にプレビューとコードが出てきます。
このブログの場合は、”Get sharing buttons for” は “A Website”、”select style” は左下のホバリングバーティカルカウンター?を選んでいます。
その下に “Options” で “Track when users share by copying your URL” とあるのは、AddThis で統計情報をトラッキングするコードを追加するか?ってことみたい。

できたコードをコピーして(”Grab It” しても OK)、貼り付けるファイルを開きます。
このブログの場合は、wp-content/themes/(自分のテーマ名)/single.php です。

	<!--?php if ($theme_post_headline_type == "latest_twitter_headline") { ?-->
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js">// <![CDATA[

// ]]></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/<?php echo $theme_admin_twitter; ?>.json?callback=twitterCallback2&count=1">// <![CDATA[

// ]]></script>
 <!--?php } ?-->

<!--?php get_footer(); ?-->

一番下に

<!--?php get_footer(); ?-->


の行があったので、その直前に貼り付けました。

その結果が今ご覧いただいている画面左でホバーしているやつです。

そして、ここからが問題です。

はてなブックマークの共有ボタンを入れたいのですが、思うようにいかないんです!

AddThis では、はてブもサポートしているのですが、自分が入れたいのは違うボタンなんです。
AddThis のマニュアルに従い、さっき入れたコードに追加して、こんな感じのを入れてみる。

<a class="addthis_button_hatena"></a>

social_sharing_button_w_hatena

なんなんだ、この情けないボタンはっ!

ならばと、はてなブックマークのページで公式ボタンを作ってみる。

hatena_make_button

この “バーティカル” を入れたいのよ!

<a class="hatena-bookmark-button" title="このエントリーをはてなブックマークに追加" href="http://b.hatena.ne.jp/entry/http://insideofpapaya.com" data-hatena-bookmark-title="はてなブックマーク" data-hatena-bookmark-layout="vertical-balloon"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script charset="utf-8" type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" async="async"></script>

できたコードを貼ってみる。

social_sharing_button_w_hatena_official

あれ、うまくいった!?ネ申!?

よくわからないけど、うまくいっちゃいました。

めでたしめでたし♪
(ちょっと見栄え悪いな…)

※あとで見たら出なくなっちゃってました。なんで (>_<)

※ん~、出たり出なかったり。なんだこりゃ…。

<< 追加 >>
 ちなみに、同じ AddThis が提供している Welcome Bar っていうのも実装しています。
 SNS からこのブログに飛んできた人向けに、画面の一番上にこんな↓バーが出るらしい。

addthis_welcomebar

 やり方はここのページ見てください。
 共有ボタンとあまり変わんないっす。


Leave your comment

papaya

This is blog what is the inside of Papaya. Hum... nobody wants that, neither do I, maybe. I think with or without my empty brain and sometimes write down here.