ようやくできた！ソーシャルボタンをオリジナル（PHP）で作成

2015年5月5日 / Tech

photo credit: theanthonyryan arsp_050 via photopin (license)

この記事について：以前からやりたかったオリジナルのソーシャルボタンの作成。なんとか出来上がりましたので備忘録兼ねてメモに残します。

はじめに

1年以上このブログをほったらかしにしていましたが、CSSフレームワークのバージョンアップに伴う修正作業の必要もあって久しぶりにWordPressを触りました。その中で以前からやりたかったオリジナルのソーシャルボタンの作成。なんとか出来上がりましたので備忘録兼ねてメモに残します。

以前から工夫していたけどやっぱり気になっていた

ソーシャルボタンは読み込みに時間がかかる

ソーシャルボタンはどうしても読み込みに時間がかかりました。なので、ソーシャルボタンの設置する数を減らしたり、非同期読み込みをさせたりと出来る限りの工夫をしてきました。しかし、ページを表示させた時、記事をスクロールさせている最中にどうしても引っかかる感じは残っていました。

デザインに制約がある

デザインうんぬんを語るほどの腕なんぞまったくないのですが一応気を遣うところでした。ソーシャルボタンは形が決められています。だから、ソーシャルボタンを自分のブログにどうやって馴染ませるかみたいなところは工夫していましたが、正直無理やりな感じはありました。

数が増えれば書くコードも増える

当たり前と言えば当たり前ですが、設置するソーシャルボタンの数が多ければそれだけ必要なコードが増えます。ページ表示時間短縮のためにbodyタグの直前にjavascriptのコードを書いていましたが、ソーシャルボタンの数が多ければそれだけソースが長くなる訳でして。とりあえず放り込むように書いていたコードは気になっていました。

いくつかの記事を参考にさせて頂きました

さて、オリジナルで作成しようと思い早速調べてみました。すると、とても参考になる記事がありました。今回はこちらの記事を参考に作成に取り掛かりました。

SNSボタンをオリジナルデザインに！設置方法＆シェア数の取得方法まとめ | Design Color

なんとか書いてみたPHPのコード

記事を参考にしながらオリジナルボタンの作成に取り掛かり完成したPHPのコードがこちらです。WordPressで使われるsingle.phpに書いています。最終的にはaタグ（リンク）を新しいウインドウを開く形で出力させており、見た目（HTMLやCSS）などは別途個別に設定しています。

2017/11/19追記

シェア数、ブックマーク数の表示をやめたため、コードを修正しました。

Facebook

<?php
//リンクURLを作成
$url = get_permalink();
$href = "https://www.facebook.com/sharer/sharer.php?u=" . rawurlencode($url);
//HTMLを出力
echo '<a href="' . $href . '" target="_blank">Facebook</a>';
?>

<?php

//リンクURLを作成

$url = get_permalink();

$href = "https://www.facebook.com/sharer/sharer.php?u=" . rawurlencode($url);

//HTMLを出力

echo '<a href="' . $href . '" target="_blank">Facebook</a>';

Twitter

<?php
//リンクURLを作成
$url = get_permalink();
$title = get_the_title();
$href = "https://twitter.com/share?url=" . rawurlencode($url) . "&text=" . rawurlencode($title);
//HTMLを出力
echo '<a href="' . $href . '" target="_blank">Twitter</a>';
?>

<?php

//リンクURLを作成

$url = get_permalink();

$title = get_the_title();

$href = "https://twitter.com/share?url=" . rawurlencode($url) . "&text=" . rawurlencode($title);

//HTMLを出力

echo '<a href="' . $href . '" target="_blank">Twitter</a>';

はてなブックマーク

<?php
//リンクURLを作成
$url = get_permalink();
$href = "http://b.hatena.ne.jp/entry/" . substr($url, 7);
//HTMLを出力
echo '<a href="' . $href . '" target="_blank">はてブ</a>' ;
?>

<?php

//リンクURLを作成

$url = get_permalink();

$href = "http://b.hatena.ne.jp/entry/" . substr($url, 7);

//HTMLを出力

echo '<a href="' . $href . '" target="_blank">はてブ</a>' ;

Google+

<?php
//リンクURLを作成
$url = get_permalink();
$href = "https://plus.google.com/share?url=" . rawurlencode(substr($url,7));
//HTMLを出力
echo '<a href="' . $href . '" target="_blank">Google+</a>' ;
?>

<?php

//リンクURLを作成

$url = get_permalink();

$href = "https://plus.google.com/share?url=" . rawurlencode(substr($url,7));

//HTMLを出力

echo '<a href="' . $href . '" target="_blank">Google+</a>' ;

Pocket

<?php
//リンクURLを作成
$url = get_permalink();
$href = "http://getpocket.com/edit?url=" . rawurlencode($url);
//HTMLを出力
echo '<a href="' . $href . '" target="_blank">Pocket</a>' ;
?>

<?php

//リンクURLを作成

$url = get_permalink();

$href = "http://getpocket.com/edit?url=" . rawurlencode($url);

//HTMLを出力

echo '<a href="' . $href . '" target="_blank">Pocket</a>' ;