オリジナル画像のソーシャルボタンを設置する方法

今日はソーシャルボタンをオリジナル画像で作成して設置する方法を紹介します。

ソーシャルボタン（SNSボタン）というのは以下のようなものをいいます（下記は私が作成したソーシャルボタン）。

オリジナル画像ソーシャルボタン作成

では、ソーシャルボタンを生成するためのコードを紹介していきます。コピペして、自作のオリジナル画像URLを指定して活用してください。

WordPressでのソーシャルボタン設置を前提条件としていますので、紹介するコードを他のツールで活用する際は合わせてコード編集をしてください。

Twitterボタン

<a href="http://twitter.com/share?count=horizontal&original_referer=<?php the_permalink();?>&text=<?php the_title();?>&url=<?php the_permalink();?>" onclick="window.open(this.href, 'tweetwindow', 'width=550, height=450,personalbar=0,toolbar=0,scrollbars=1,resizable=1'); return false;"><img src="画像URLを入力" alt="Twitter" width="1" height="1" /></a>

はてなブックマークボタン

<a href="http://b.hatena.ne.jp/entry/<?php the_permalink();?>" class="hatena-bookmark-button" data-hatena-bookmark-layout="simple" title="このエントリーをはてなブックマークに追加"><img src="画像URLを入力" alt="はてなブックマーク" width="1" height="1" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>

Facebookボタン

<a href="http://www.facebook.com/share.php?u=<?php the_permalink();?>" onclick="window.open(this.href, 'FBwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;">
<img src="画像URLを入力" alt="Facebook" width="1" height="1" /></a>

Google＋ボタン

<a href="https://plus.google.com/share?url=<?php the_permalink();?>" onclick="window.open(this.href, 'Gwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;"><img src="画像URLを入力" alt="Google＋" width="1" height="1" /></a>

Pocketボタン

<a href="http://getpocket.com/edit?url=<?php the_permalink();?>&title=<?php the_title();?>" onclick="window.open(this.href, 'PCwindow', 'width=550, height=350, menubar=no, toolbar=no, scrollbars=yes'); return false;"><img src="画像URLを入力" alt="Pocket" width="1" height="1" /></a>

まとめ

オリジナル画像のソーシャルボタンは、カラフルで目につきやすいので、サイトの彩りのスパイスになります。無料画像素材を活用したり、有名サイトが設置しているソーシャルボタンを参考に魅力的なオリジナルソーシャルボタン画像を作成してみましょう。