WordPressでソーシャルボタンをバイラルメディアっぽく設置

バイラルメディアやキュレーションメディアと呼ばれるサイトで最近よく使われるようになった大きめのソーシャルボタン。せっかく設置するのであれば、かっこいいソーシャルボタンの設置がしたいので作りました。

ここではWordPressでそのかっこいいソーシャルボタンをバイラルメディア風に設置する方法を解説をしていきます。今回は「WordPressを利用して」という前提です。

1.出来上がりの設置イメージ

まずは出来上がりがどんなイメージになるのか。もちろん、PCだけでなくスマートフォンにも対応していく必要がありますね。

PC・タブレットの場合の出来上がりイメージ

まずはPC・タブレット端末の場合です。PCとiPadなどのタブレットはブラウザの横幅が広くなりますので、後術する「is_mobile（）」でスマホ以外の場合という条件分岐にします。

ソーシャルボタンは

など、たくさんありますが、バイラルメディアっぽく設置という意味ではPC・タブレット端末の場合は「facebook」と「twitter」の2つがシンプルなので上図のように2つにします。

スマホの場合の出来上がりイメージ

スマホの場合は「facebook」「twitter」に加えて「Line」も追加をします。というのも、メディア系の記事を自分のLineのホーム（タイムラン）に流している人とかよくみかけるし、スマホでは常にLineをしている人が多いと思いますので、スマホの場合はLineも入れます。

2.WordPressのタグ「is_mobile()」をfunction.phpに作成

WordPressにもともと用意されている「wp_is_mobile()」という関数があるのですが、実はこれがタブレットもスマホとして扱われてしまいます。iPadのような大きさだとPCと同じ扱いにしたいのですが、それができないのでスマホ用のタグを作成します。

※WordPressテーマでStinger5を利用している場合はもともと「is_mobile()」が用意されていますので、ここはとばしてください。

作成すると言っても以下のコードをコピペするだけで結構です。

テーマの「function.php」に追加するスクリプト

//------------------------------
// スマホ向け判定ロジック
//------------------------------

function is_mobile(){
    $useragents = array(
        'iPhone', // iPhone
        'iPod', // iPod touch
        'Android', // 1.5+ Android
		'Windows.*Phone', // *** Windows Phone
        'dream', // Pre 1.5 Android
        'CUPCAKE', // 1.5+ Android
        'blackberry9500', // Storm
        'blackberry9530', // Storm
        'blackberry9520', // Storm v2
        'blackberry9550', // Storm v2
        'blackberry9800', // Torch
        'webOS', // Palm Pre Experimental
        'incognito', // Other iPhone browser
        'webmate' // Other iPhone browser
    );
    $pattern = '/'.implode('|', $useragents).'/i';
    return preg_match($pattern, $_SERVER['HTTP_USER_AGENT']);
}

上記のコードをfunction.phpに追加してください。

3.各ソーシャルボタンのアイコン画像をテーマの「images」にアップロード

FTPソフトのFFFTPなどでテーマの「images」フォルダに「facebook（btn_f.png）」「twitter（btn_t.png）」「Line（btn_l.png）」のアイコン画像をアップロードしてください。

この3つのソーシャルアイコン画像は以下からzipファイルを以下のリンクダウンロードして解凍してご利用ください。
ソーシャルボタン用アイコン画像のダウンロードはこちら

4.記事投稿用のsingle.phpの記事コンテンツの下にHTML用コードを追加

<?php if (is_mobile()) : ?>
<div class="share-mobile">
<a id="share_fb" 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="<?php bloginfo('template_url'); ?>/images/btn_f.png" width="24%" /><br />Share</a><a id="share_tw" href="https://twitter.com/share?url=<?php the_permalink(); ?>&text=<?php the_title(); ?>&via=rengaakai" target="blank"><img src="<?php bloginfo('template_url'); ?>/images/btn_t.png" width="24%" /><br />Twitter</a><a id="share_line" href="http://line.naver.jp/R/msg/text/?LINE%E3%81%A7%E9%80%81%E3%82%8B%0D%0A<?php the_permalink(); ?>"><img src="<?php bloginfo('template_url'); ?>/images/btn_l.png" width="24%" /><br />Line</a>
</div>
<?php else : ?>
<div class="share-pc">
<a id="share_fb" 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="<?php bloginfo('template_url'); ?>/images/btn_f.png" width="12%" />Share On Facebook</a>
<a id="share_tw" href="https://twitter.com/share?url=<?php the_permalink(); ?>&text=<?php the_title(); ?>&via=rengaakai" target="blank"><img src="<?php bloginfo('template_url'); ?>/images/btn_t.png" width="12%" />Share On Twitter</a>
</div>
<?php endif; ?>

記事本文を出力する「the_content()」の後に上記のコードを追加します。

twitterアカウント名の部分は変更

href="https://twitter.com/share?url=<?php the_permalink(); ?>&text=<?php the_title(); ?>&via=rengaakai"

の「via=rengaakai」のところは「@ユーザー名」のメンションの部分になります。好きなtwitterアカウントにしてください。

アイコン画像のURLのパスとwidthは自由に数字を設定

アイコンの大きさはCSSではなくHTMLの方で「width=”24%”」などとimgタグの属性で指定をしています。大きさが適当ではないと思えば自由に変えてください。

また、アイコンが画像のパス（URL）はWPのインストールしているディレクトリ名や画像を入れているディレクトリ名によって変わりますので、表示されるように調整してください。

5.CSSの記述を追加

/*---------------------------
ソーシャルボタン
-----------------------------*/

/*clearfix*/
.share-mobile,
.share-pc{ /zoom : 1; }
.share-mobile:after,
.share-pc:after{ content : ''; display : block; clear : both; height:0; }

/*共通*/
.share-mobile,
.share-pc {
	width: 100%;
	padding-top:20px;
}
.share-mobile a img,
.share-pc a img {
	display:inline;
	vertical-align:middle;
}
.share-mobile a:hover,
.share-pc a:hover {
	opacity:0.9;
}
.share-mobile a#share_fb,
.share-pc a#share_fb {
	background-color: #3B5998;
	border-bottom: 1px solid #3C5A98;
}

/*スマホ*/
.share-mobile a {
	width: 33%;
	display: block;
	float: left;
	text-align: center;
	text-decoration:none;
	font-size:14px;
	color:#FFFFFF;
	font-weight:bold;
	padding-top:5px;
	padding-bottom:5px;
	 border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius:3px;
}
.share-mobile a#share_line {
	background-color: #00C300;
	border-bottom: 1px solid #21AA10;
}
.share-mobile a#share_tw {
	background-color: #00ACEE;
	border-bottom: 1px solid #0193CB;
	margin:0 1px;
}

/*pc*/
.share-pc a {
	width: 50%;
	display: block;
	float: left;
	text-align: center;
	text-decoration:none;
	font-size:14px;
	color:#FFFFFF;
	font-weight:bold;
	padding-top:5px;
	padding-bottom:5px;
}
.share-pc a#share_tw {
	background-color: #00ACEE;
	border-bottom: 1px solid #0193CB;
}

上記のコードをWPテーマの該当するCSSファイルに追加します。
作業は以上で終わりです。微調整などはご自由にしてください。

6.Lineのボタンは個別にシェアすることも可能

Lineのボタンをクリックした場合どうなるか、テストサイトで確認します。

LineのボタンをクリックするとLineが起動します。そして、「ホームに投稿」というボタンを押せばそのまま自分のホームにタイムランとしてシェアされます。

「友達」から送信先を選択すれば上図のように個別にシェアしたい記事URLが出現しますので、好きなように言葉を変えて相手に送ることができます。

まとめ

シェアするソーシャルボタンが小さいよりは、よく使われるボタンは大きな方がユーザーにとっても利便性が高くなります。

特にスマホは今回のようなデザインだと縦幅もとりませんし、ちょうどいい大きさとして設置できます。今後は検索エンジン経由だけでなく、ソーシャル経由からも集客を見込んでいきたいことが多いと思いますので、是非一度は試してみるといいでしょう。