ブログのソーシャルボタンをオリジナル画像にしてみた！

どうも！記事を書くよりブログ整備のほうが楽しい瑞佳(@mizuka123)ですｗ

いったいなんのためのブログなのやら･･･ｗ

そんなことよりソーシャルボタンのオリジナル化ですよ！
ありきたりなソーシャルボタンから変えてみるとブログの印象が変わって見えますよね．

ソーシャルボタン？

まずはソーシャルボタンとはなんぞや？

ソーシャルボタンとは、ブログやニュースサイトなどのウェブサイトからSNSやソーシャルブックマークなどのソーシャルメディアに情報を入出力するために設置される、ボタン型のインターフェースのことである(Wikipedia)

はいそこっ！「うわっ，少ねっ！」とか言わないｗ

ソーシャルメディアを使う人が増え，影響力が増したことから最近のブログやニュースサイトには当然のようについていますね．
このブログは見る人がまだ少ないのでこんなもんです･･･

オリジナル画像？

これまでずっと上記画像のようなものを設置していたのですが，どうもブログにオリジナリティが感じられない･･･と思っていました．
そこでオリジナル画像にすることにしたのです．
外部サーバーの画像を使い，Javascriptでごりごり表示するのもブログが重くなりますしね．
べっ，別に数字が少なすぎるから隠すためではないですよ･･･たぶん･･･

しか～し，自分はこの手の画像を作ることが苦手＼(^o^)／

というわけでリアル知り合いのなおきちくん(@n4okichi)に頼んでみました．

すると10月8日夜に依頼してなんと9日の朝にはメールで送られてきましたｗ

はっ，速い！

そして画像を見てみると･･･

すっ，すげぇ～！

アイコンのサイズ，適当なデザイン(サービスのアイコン左に～とか)，適当なフォント(丸文字で柔らかい感じ)の依頼でこの出来とは･･･
恐るべしなおきちくん･･･．

なにか御礼をしないといけないですねｗ

設置！

画像がそろったので早速設置してみました．

参考にしたのは以下のブログです．

【WordPress】自作ソーシャルボタンを設置する際のポイント | MasterPeace21

ほとんどこれに沿って行えばできるのですが，つまずいた点があったので書いておきます．

リンクとタイトルをエンコードするコード

記事に書いてあるコードをコピペするとうまく動きませんでした．
どうやらコメントが原因らしく「//～」の部分を消すとうまく動作しました．
PHPのコメントについては以下の記事を参照してください．

PHPのコメントアウト: 一週間で覚えるPHP

実際のコード

ソーシャルボタンのコードは以下の通りです．

<div class="sns03">
  <?php $url = get_permalink(); $_url = urlencode($url); $title =
  the_title('','', false); $_title = urlencode($title); ?>
  <ul style="list-style-type: none">
    <li class="twitter">
      <a
        href="http://twitter.com/intent/tweet?url=<?php echo $_url;?>&text=<?php echo $_title;?>"
        target="_blank"
      >
        <img src="Twitterの画像URL" />
      </a>
    </li>
    <li class="hatena">
      <a
        onclick="window.open('http://b.hatena.ne.jp/add?mode=confirm&url=<?php echo $_url;?>&t=<?php echo $_title;?>', '', 'width=500,height=400'); return false"
        href="http://b.hatena.ne.jp/add?mode=confirm&url=<?php echo $_url;?>&t=<?php echo $_title;?>"
        target="_blank"
      >
        <img src="はてブの画像URL" />
      </a>
    </li>
    <li class="facebook">
      <a
        onclick="window.open('http://www.facebook.com/sharer.php?src=bm&u=<?php echo $_url;?>&t=<?php echo $_title;?>', '', 'width=500,height=400'); return false"
        href="http://www.facebook.com/sharer.php?src=bm&u=<?php echo $_url;?>&t=<?php echo $_title;?>"
        target="_blank"
      >
        <img src="Facebookの画像URL" />
      </a>
    </li>
  </ul>
</div>

Twitterのフォローボタンのコードは以下の通りです．

<a href="https://twitter.com/intent/user?screen_name=ユーザーID">
  <img src="Twitterフォローボタンの画像URL" alt="Follow me" />
</a>

Feedlyのフォローボタンについては単純に画像のリンクを変えるだけなので割愛します．
以下のサイトにてコードを生成後，画像のURLを書き換えてください．

feedly. your news. delivered.

まとめ

ソーシャルボタンのコードで多少苦労しましたが，無事ソーシャルボタンをオリジナル画像にすることができました！
世界に1つしかないソーシャルボタン，フォローボタンなのでなんかうれしいですね．

サイトの重さの変化は感覚的にはあまりわかりませんが，ボタンに統一感がでたのですっきりした印象を受けます．
色合い，フォントがほんと最高なんだな，これが．

せっかくのオリジナルボタンを作ってもらったのでこれでクリックする人が増えたらうれしいな！なんてｗ
でもこのボタンを生かすも殺すも自分の記事次第なので，これに負けないような記事を書いていきたいですね．

なおきちくん(@n4okichi)，本当にありがとう！