アフィリエイト等でブログを運営する、となった際にソーシャルボタンを設置するのは記事を読んでくれた人が記事を拡散してくれる際にもあると便利…というのは以前『【WordPress】WP Social Bookmarking Lightを使ってソーシャルボタンを設置する方法』でもお話しました。
上の記事ではプラグインを使って、デフォルトのソーシャルボタンを設置する方法を紹介していますが、設置するならオリジナルデザインのソーシャルボタンを！という人もいると思います。
当サイトの記事ページでも上の画像のように、オリジナルデザインのソーシャルボタンを設置していますが、今回はWordPressでブログを運営している方向けに、
・Twitter
・Facebook
・Google+
・はてなブックマーク
の4つのSNSのオリジナルデザインのソーシャルボタンの設置方法についてご紹介したいと思います！
目次
まずアイコンフォントを用意する
オリジナルのソーシャルボタンを設置するにあたって、まずどのSNSのボタンなのかわかりやすくするためにアイコンフォントを用意すると親切かと思います。
今回は以前も当サイトで紹介した『IcoMoon』さんにて使用するアイコンフォントをダウンロードしておきましょう。
1. Twitterのソーシャルボタンの設置方法
まずTwitterのソーシャルボタンの設置方法について書いていきたいと思います。
とはいっても大げさなことはせず、以下のコードをはソーシャルボタンを設置したいところに貼り付けるだけで設置完了になります(^^)
<a class="twitter" href="http://twitter.com/share?text=<?php the_title(); ?>&url=<?php the_permalink(); ?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;"><i class="icon-twitter"></i></a>
ちなみに上の見本コードの
http://twitter.com/share?text=<?php the_title(); ?>&url=<?php echo $title_encode ?>
にある
<?php the_title(); ?>
が記事タイトルを、
<?php the_permalink(); ?>
が記事URLをツイート時に取得・表示してくれるようになります。
なので、例えば記事タイトルのみ取得・表示したい場合は
http://twitter.com/share?text=<?php the_title(); ?>
と記述してあげれば記事タイトルのみがツイート時には取得・表示され、記事URLのみ取得・表示したい場合には
http://twitter.com/share?url=<?php the_permalink(); ?>
と記述してあげることで記事URLのみが取得・表示されます。
なお、
<i class=”icon-twitter”></i>
がアイコンフォントを表示するための記述になります。
2. Facebookのソーシャルボタンの設置方法
続いてFacebookのソーシャルボタンを設置するには以下のコードを記述しましょう。
<a class="facebook" href="http://www.facebook.com/sharer.php?u=<?php the_permalink(); ?>&t=<?php the_title(); ?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;"><i class="icon-facebook"></i></a>
上の見本コードでいう
<?php the_permalink(); ?>&t=<?php the_title(); ?>
ここで記事リンクと記事タイトルを取得・表示してくれています。
3. Google+のソーシャルボタンの設置方法
Google+のソーシャルボタンを設置するには以下のコードを記述します。
<a class="google" href="https://plus.google.com/share?url=<?php the_permalink(); ?>" target="_blank"><i class="icon-google-plus"></i></a>
Google+の場合は、
https://plus.google.com/share?url=<?php the_permalink(); ?>
このように記事リンクのみで記事タイトルも取得・表示してくれるようになります！
4. はてなブックマークのソーシャルボタンの設置方法
はてなブックマークのソーシャルボタンを設置するには、以下のコードを記述しましょう。
<a class="hatebu" href="http://b.hatena.ne.jp/add?mode=confirm&url=<?php the_permalink(); ?>&title=<?php the_title(); ?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;"><span class="hatebu_icon">B!</span></a>
はてなブックマークの場合は、ロゴが「B!」なので、アイコンフォントを使うよりかは普通に「B!」とテキストで表示させてもよいかもしれません。
また、記事リンクと記事タイトルは上記コードの
<?php the_permalink(); ?>&title=<?php the_title(); ?>
にて取得・表示させています。
HTMLでソースを組んでCSSでデザインする
各ソーシャルボタンの設置方法がわかりましたら、続いて実際にHTMLでソースを組み、CSSでデザインをする工程になります。
見本コードとしては
<ul> <li><a class="twitter" href="http://twitter.com/share?text=<?php the_title(); ?>&url=<?php the_permalink(); ?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;"><i class="icon-twitter"></i></a></li> <li><a class="facebook" href="http://www.facebook.com/sharer.php?u=<?php the_permalink(); ?>&t=<?php the_title(); ?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;"><i class="icon-facebook"></i></a></li> <li><a class="google" href="https://plus.google.com/share?url=<?php the_permalink(); ?>" target="_blank"><i class="icon-google-plus"></i></a></li> <li><a class="hatebu" href="http://b.hatena.ne.jp/add?mode=confirm&url=<?php the_permalink(); ?>&title=<?php the_title(); ?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;"><span class="hatebu_icon">B!</span></a></li> </ul>
このようにHTMLでソースを組んで、その上でご自身の好きなようにボタンのデザインをされるとよいのではないかと思います(^-^*)
まとめ
以上がオリジナルデザインのソーシャルボタンの設置方法になります！
デフォルトのソーシャルボタンもよいのですが、どうせならオリジナルデザインでソーシャルボタンを設置するのも良いかな？と思いますので、是非ともご活用ください！
