この度、ブログ記事の上部に

小さなソーシャルシェアボタンを設置しました。



左から
・Twitterツイートボタン
・Facebookシェアボタン
・mixiチェックボタン
まぁ…見ての通りなんですけどね。。


実は、既に記事下部にはカウント付きのソーシャルボタン



忍者おまとめボタンが付いてるんですけどね。。

基本的にこちらは
記事を読んだ訪問者さんに押してもらう【いいね】ボタンとして。。


記事上部のはひいろん自身が記事ＵＰの際
お知らせに使う【シェア】ボタンとして使い分けがしたかったんで
新たに設置する事にしました。
（もちろん訪問者さんにシェアしていただいても一向に構いませんが…爆）


【いいね】と【シェア】の違いについては…
またの機会にお話しするとして。。
（機会がなければスルーするかもですけど…ｵｲｵｲ）


今回は、カスタマイズしたソーシャルボタンの設置方法について
記載したいと思います。 オリジナルボタン画像の使い方ですが…
下記サイトさんを参考に設置しました。

SNS投稿ボタンをオリジナル画像にするためのカスタマイズ。 ｜ WebScripter.jp

っつ〜事で…
こんな感じで。。

【Facebookシェアボタン】
<a href="http://www.facebook.com/share.php?u=【{entry_permalink}】" onclick="window.open(this.href, 'FBwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;">【画像】</a>
　※ページのＵＲＬに{entry_permalink}の独自タグを使用しています。
　　　（Serene Bach用）

【mixiチェック】
<a href="javascript:void(0);" onclick="window.open('http://mixi.jp/share.pl?u=【{entry_permalink}】&k=【識別キー】','share',['width=632','height=456','location=yes','resizable=yes','toolbar=no','menubar=no','scrollbars=no','status=no'].join(','));">【画像】</a>
　※ページのＵＲＬに{entry_permalink}の独自タグを使用しています。
　　　（Serene Bach用）

mixiチェックの識別キーについては
【mixi developer center】へ登録して発行されたモノを記入します。

実はmixiチェックボタンの設置に際しては
サムネイルの画像が表示されないトラブルが発生して…
かなり苦労しましたが。。
その辺の話しはまたの機会に…(^^;
（ここで述べると長くなるんで…爆汗）

公式のボタンでないオリジナルの画像については
検索すると色々出てきます。。

ひいろんは下記サイトさんのモノを使わせていただきました。

ミニ・ソーシャル・アイコン -Blog //ヴォルフロッシュ

小さくてかわいいアイコンに惚れました(^▽^


本来なら、ツイートボタンも同じスタイルのアイコンを使いたかったんですけど…

オリジナル画像を使用するにあたり色々と問題が。。

文字エンコードの関係で…



タイトルが反映されません…
(当ブログはECU-JP。。)


公式のツイートボタンの場合



自動でタイトルを拾ってくれるんですけどね。。



横長なんで統一感が(^^;
（他のアイコンサイズは20×20です。。）


どうしたもんか？？



と思ってたんですが…


こちらのサイトさんを参考に。。

SNSボタンの設置方法まとめ | Tips Note

スタイルシートを使って
ツイートボタンの幅を縮めてみたところ、良い感じになりました。

ちなみに…

こんな感じですね。。

iframe.twitter-count-horizontal {
width: 20px !important;
}

こんな裏ワザ(?)があるなんて知りませんでした(^^


そんなこんなで…
当初思ってたよりも苦戦しちゃいましたが。。




個人的にかなり満足な形になりました♪