SNSの共有（シェア）ボタンを自作してみた

TwitterやFacebookなどSNSで記事を共有してもらいたい時にページにつけておくと便利な「シェア」ボタンの話です。各サービス上で公式のボタンリンクなどが提供されていますが、サイズなども決められてしまいます。チョッとだけHTMLの知識があればオリジナルのボタンが作成できるようになります。

毎回記事を書く毎にソースを貼り付けるのは面倒なので、テンプレート上にボタンを付けます。このためにはある程度HTMLがカスタマイズできるブログサービスである必要があります。以降、このサイト［WordPress］を例にして話を進めていきます。

まずは、土台作り。

WordPressの場合、ボタンやイメージなどのスタイルを変更するスタイルシートと、各ページのテンプレートは、PHPファイルで構成されています。

管理ページの［外観｜テーマの編集］でファイルを編集することができます。

各SNSのリファレンスを参考にしてシェア用のリンクを作ります。

Twitter

<a class="tw-share" href="http://twitter.com/intent/tweet?text=<?php echo urlencode(the_title("","",0)); ?>&url=<?php echo urlencode(get_permalink()); ?>" target="_blank" title="Twitterで共有">Twitter</a>

Facebook

<a class="fb-share" href="http://www.facebook.com/sharer.php?t=<?php echo urlencode(the_title("","",0))&u=<?php echo urlencode(get_permalink()); ?>" target="_blank" title="facebookで共有">facebook</a>

Google+

<a class="gp-share" href="https://plus.google.com/share?url=<?php echo urlencode(get_permalink()); ?>" target="_blank" title="Google+で共有">Google+</a>

このリンクをテンプレートに追加します。付ける位置は、どこでも良いのですが、共有したくなる気持ちは「タイトル」見た後か、記事を最後まで見た後だと思うので、その辺りが良いと思います。

今回はタイトルの下に配置しました。

content.php

<header class="entry-header">
<?php
if ( is_single() ) :
the_title('
<h1 class="entry-title">', '</h1>

');
else :
the_title( sprintf('
<h2 class="entry-title"><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></h2>

');
endif;
?>
<a class="gp-share" href="https://plus.google.com/share?url=<?php echo urlencode(get_permalink()); ?>" target="_blank" title="Google+で共有">Google+</a>
<a class="fb-share" href="http://www.facebook.com/sharer.php?t=<?php echo urlencode(the_title("","",0)); ?>&u=<?php echo urlencode(get_permalink()); ?>" target="_blank" title="facebookで共有">facebook</a>
<a class="tw-share" href="http://twitter.com/intent/tweet?text=<?php echo urlencode(the_title("","",0)); ?>&url=<?php echo urlencode(get_permalink()); ?>" target="_blank" title="Twitterで共有">Twitter</a>

<div style="clear:both;"></div>

</header>

<!-- .entry-header -->

.entry-header部分を目安にコードを挿入します。
ここまでの手順で投稿内にリンクが追加され、それぞれのSNSに共有投稿ができるようになります。

スタイル変更

最終的には各SNSのロゴマークを表示するので、各サービスのロゴマークを探します。公式ページなどにブランドという区分で各社からファイルがダウンロードできます。

ダウンロードしたら、スタイルシートのリンクするために［メディア］にアップロードしておきます。

スタイルシートを編集して、リンクのスタイルを変更します。

style.css
Twitter

a.tw-share {
background-color:#1da1f2;
background-image: url(../Images/Twitter_Logo_White_On_Blue.png);
background-repeat: no-repeat;
background-position: center;
background-size:24px 24px;
text-indent: 100%;
display:block;
overflow: hidden;
width:24px;
height:24px;
border-radius: 3px;
float:left;
margin: 0px 2px 0px 2px
}

Facebook

a.fb-share {
background-color:#3b579d;
background-image: url(../Images/FB-f-Logo__blue_29.png);
background-repeat: no-repeat;
background-position: center;
background-size:24px 24px;
text-indent: 100%;
display: block;
overflow: hidden;
width: 24px;
height: 24px;
border-radius: 3px;
float: left;
margin: 0px 2px 0px 2px
}

Google+

a.gp-share {
background-color:#da483c;
background-image: url(../Images/gplus-32.png);
background-repeat: no-repeat;
background-position: center;
background-size:24px 24px;
text-indent: 100%;
display:block;
overflow: hidden;
width:24px;
height:24px;
border-radius: 3px;
float:left;
margin: 0px 2px 0px 2px
}

text-indentとoverflowはリンクに設定された文字を見えないようにしています。
最後に、投稿を表示してシェアボタンのスタイルが変更されているか確認します。