プラグインなし!オリジナルSNSシェアボタンの作り方ガイド

WEB制作・開発実例・コラム
2019.08.31
2019.09.05

コラムやブログページの記事上か下に入ってることの多い、SNSへのシェアボタン。

facebookやtwitterなど、公式のシェアボタンがあったり、Wordpressのサイトであればプラグインがあるので、比較的実装も簡単です。
ただ、サイトに合わせてSNSシェアボタンをデザインする場合や、またクライアント様からデザインを提供されサイトを作成する場合など、圧倒的に「オリジナルのSNSシェアボタン」の方が多いです。

そこで今回は、プラグインを使わなくても実装できるオリジナルのSNSシェアボタンの作り方をPHPコードやCSSでのスタイルと合わせてまとめます。
また、カウント数を追加したり別ウィンドウで開く方法などの一手間もご紹介します!

今回オリジナルで作成するSNSシェアボタンのデモ

今回作るSNSシェアボタンは、Facebook、Twitter、LINE、Pocket、はてなブックマークの5つです。

こんな感じです!実際この記事をシェアできるので、ポチッとお試しください!

SNS別の実装方法

では早速各SNS別にコードと、公式サイトのデザインガイドライン、色等をみていきましょう。

アイコンはWEBfontのfontawesomeを使っています。
はてなブログのアイコンはfontawesomeにないので、公式サイトからダウンロードしています

なお、公式のデザインガイド、色は2019年8月現在のものとなります。

Facebook

<a href="https://www.facebook.com/sharer/sharer.php?u=<?php the_permalink() ?>&t=<?php the_title() ?>" target="blank" rel="nofollow"><i class="fab fa-facebook">シェア</i></a>
デザインガイドライン https://ja.facebookbrand.com/assets/%E3%80%8Cf%E3%80%8D%E3%83%AD%E3%82%B4/

twitter

<a href="http://twitter.com/intent/tweet?text=<?php echo urlencode(the_title("","",0)); ?>&amp;<?php echo urlencode(get_permalink()); ?>&amp;url=<?php echo urlencode(get_permalink()); ?>" target="_blank" rel="nofollow" title="Twitterで共有"><i class="fab fa-twitter-square"ツイート></i></a>
デザインガイドライン https://about.twitter.com/ja/company/brand-resources.html

LINE

<a href="https://social-plugins.line.me/lineit/share?url=<?php echo urlencode(get_permalink()); ?>" target="_blank" rel="nofollow" title="Lineで共有"><i class="fab fa-line">LINE</i></a>
デザインガイドライン https://line.me/ja/logo
#00b900

はてなブログ

<a href="http://b.hatena.ne.jp/add?mode=confirm&amp;url=<?php echo urlencode(get_permalink()); ?>&amp;title=<?php echo urlencode(the_title("","",0)); ?>" target="_blank" rel="nofollow" data-hatena-bookmark-title="<?php the_permalink(); ?>" title="このエントリーをはてなブックマークに追加"><img src="../images/hatenabookmark-logomark.svg" alt="B!">ブックマーク</a>
デザインガイドライン https://hatenacorp.jp/press/resource
#00a4de

pocket

<a href="https://getpocket.com/edit?url=<?php echo urlencode(get_permalink()); ?>&amp;title=<?php echo urlencode(the_title("","",0)); ?>" target="blank" rel="nofollow"><i class="fab fa-get-pocket">Pocket</i></a>
デザインガイドライン https://worldvectorlogo.com/ja/logo/pocket
#ef3f56

コピペOK!全コード

上をまとめるとこのようになります。cssも載せておくので、コピーして使ってください。

PHP

<ul class="sharedbutton-list df">
<!--facebook-->
    <li class="sharedbutton facebook">
        <a href="https://www.facebook.com/sharer/sharer.php?u=<?php the_permalink() ?>&t=<?php the_title() ?>" target="blank" rel="nofollow" class="opensub">
            <i class="fab fa-facebook"><i class="fab fa-facebook-f"></i></i></a>
    </li>
<!--twitter-->
    <li class="sharedbutton twitter">
        <a href="http://twitter.com/intent/tweet?text=<?php echo urlencode(the_title("","",0)); ?>&amp;<?php echo urlencode(get_permalink()); ?>&amp;url=<?php echo urlencode(get_permalink()); ?>" target="_blank" rel="nofollow" title="Twitterで共有" class="opensub">
            <i class="fab fa-twitter"></i></a>
    </li>
<!--LINE-->
    <li class="sharedbutton line">
        <a href="https://social-plugins.line.me/lineit/share?url=<?php echo urlencode(get_permalink()); ?>"
           target="_blank" rel="nofollow" title="Lineで共有" class="opensub"><i class="fab fa-line"></i></a>
    </li>
<!--はてなブックマーク-->
    <li class="sharedbutton hatena">
        <a href="http://b.hatena.ne.jp/add?mode=confirm&amp;url=<?php echo urlencode(get_permalink()); ?>&amp;title=<?php echo urlencode(the_title("","",0)); ?>" target="_blank" rel="nofollow" data-hatena-bookmark-title="<?php the_permalink(); ?>"
           title="このエントリーをはてなブックマークに追加" class="opensub">B!</a>
    </li>
<!--pocket-->
    <li class="sharedbutton pocket">
        <a href="https://getpocket.com/edit?url=<?php echo urlencode(get_permalink()); ?>&amp;title=<?php echo urlencode(the_title("","",0)); ?>" target="blank" rel="nofollow" class="opensub"><i class="fab fa-get-pocket"></i></a>
    </li>
</ul>

css

.sharedbutton-list{
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    justify-content: space-between;
    -webkit-justify-content: space-between;
}
.sharedbutton-list li{
    width: 20%;
    text-align: center;
}
.sharedbutton-list li a{
    display:block;
    position: relative;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    color: #fff;
    padding: 10px;
}
/*facebook*/
.facebook a{
    background: #1578f2;
    box-shadow: 0 3px 0 #1b63bc;
}
.facebook:hover {
    background-color: #1b63bc;
    opacity: 1;
}
.facebook:active {
    top: 1px;
    box-shadow: 0 2px 0 #1b63bc;
}
/*twitter*/
.twitter a{
    background: #1da1f2;
    box-shadow: 0 3px 0 #1282c7;
}
.twitter:hover {
    background-color: #1282c7;
    opacity: 1;
}
.twitter:active {
    top: 1px;
    box-shadow: 0 2px 0 #1282c7;
}
/*line*/
.line a{
    background: #00b900;
    box-shadow: 0 3px 0 #179117;
}
.line:hover {
    background-color: #179117;
    opacity: 1;
}
.line:active {
    top: 1px;
    box-shadow: 0 2px 0 #179117;
}
/*pocket*/
.pocket a{
    background: #ce3b4e;
    box-shadow: 0 3px 0 #a82738;
}
.pocket:hover {
    background-color: #a82738;
    opacity: 1;
}
.pocket:active {
    top: 1px;
    box-shadow: 0 2px 0 #a82738;
}
/*はてな*/
.hatena a{
    background: #00a4de;
    box-shadow: 0 3px 0 #0d89b5;
}
.hatena:hover {
    background-color: #0d89b5;
    opacity: 1;
}
.hatena:active {
    top: 1px;
    box-shadow: 0 2px 0 #0d89b5;
}

もう一手間!

シェア画面を別ウィンドウで出す

シェア画面を別のウィンドウで出すようにするjqueryです。

jQuery(document).ready(function(){
    $(".opensub").click(function(){
        window.open(this.href,"WindowName","width=520,height=520,resizable=yes,scrollbars=yes");
        return false;
    });
});

カウント数をつけたい!

facebookやtwitter公式のシェアボタンや、wordpressであるプラグンのようにそれぐらいシェアされているかをカウント数として表示したい時もあるかと思います。
タイトルで「プラグインなし!」と言っておきながら申し訳ないのですが、wordpressのSNS Count Cacheというプラグインを使うと実装できます!
今回のSNS Count Cache設定方法などは割愛させてもらい、シェア数を表示させるWordPressタグだけ記述します

<!--facebook-->
<?php if(function_exists('scc_get_share_facebook')) echo (scc_get_share_facebook()==0)?'':scc_get_share_facebook(); ?>
<!--twitter-->
<?php if(function_exists('scc_get_share_twitter')) echo (scc_get_share_twitter()==0)?'':scc_get_share_twitter(); ?>
<!--はてなブックマーク-->
<?php if(function_exists('scc_get_share_hatebu')) echo (scc_get_share_hatebu()==0)?'':scc_get_share_hatebu(); ?>
<!--poket-->
<?php if(function_exists('scc_get_share_pocket')) echo (scc_get_share_pocket()==0)?'':scc_get_share_pocket(); ?>

テンプレート化してインクルード!

SNSシェアボタンだけのファイルを作成し、必要なページのphpにインクルードしましょう!

やり方は簡単です。

先ほどのphpコードだけで例えばshared-button.phpというファイルを作成し、
SNSシェアボタンを入れたい箇所のphpファイルに下記を記述するだけです。

<?php include( STYLESHEETPATH . '/shared-button.php' ); ?>

ブログやコラムページであれば、だいたいsingle.phpファイルなので、で本文を取得し表示するタグの前後に配置することが多いかと思います。

まとめ

以上、公式の各SNSシェアボタンや、wordpressのプラグインを使わず、SNSボタンを実装する為のガイドでした!

オリジナルのシェアボタンはデザインをサイトに合わせて作成できるという点もメリットですし、なにより公式のシェアボタンを使うよりもサイト表示高速化につながります!最近はサイトの表示が遅いのがとてもストレスです。。(特に作成したサイトが遅いのはきっとユーザー以上にストレスです…)その為、プラグインの使用やサイトの表示が遅くなることはできるだけ排除していくようにしています。

SNSシェアボタン、何気に実装する機会も多いと思います。プラグインを使わなくても十分実装できるので、プラグイン頼りの人はぜひ一度試してみてくださいね。

SEOやWEB制作に関する情報を検索

コラム

ピックアップコラム

最新コラム

人気コラム

過去の記事

ご質問やご相談などお気軽にお問い合わせください。

お電話でのお問い合わせはこちら

03-5829-9912

受付時間:平日10:00~19:00(土・日・祝日を除く)