SEO対策なら株式会社ペコプラ > Webサイト制作 > Webデザイン > プラグインなし！オリジナルSNSシェアボタンの作り方ガイド

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

Webサイト制作

Webデザイン

2019.08.31

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

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

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

1 今回オリジナルで作成するSNSシェアボタンのデモ
2 SNS別の実装方法
3 コピペOK!全コード
- 3.1 PHP
- 3.2 css
4 もう一手間！
5 まとめ

今回オリジナルで作成する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() ?>&amp;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/
色	#1578f2

twitter

<a href="http://twitter.com/intent/tweet?text=<?php echo urlencode(the_title("","",0)); ?>&amp;amp;<?php echo urlencode(get_permalink()); ?>&amp;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
色	#1DA1F2

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;amp;url=<?php echo urlencode(get_permalink()); ?>&amp;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;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() ?>&amp;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;amp;<?php echo urlencode(get_permalink()); ?>&amp;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;amp;url=<?php echo urlencode(get_permalink()); ?>&amp;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;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シェアボタン、何気に実装する機会も多いと思います。プラグインを使わなくても十分実装できるので、プラグイン頼りの人はぜひ一度試してみてくださいね。

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

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

SNS別の実装方法

Facebook

twitter

LINE

はてなブログ

pocket

コピペOK!全コード

PHP

css

もう一手間！

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

カウント数をつけたい！

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

まとめ

関連

コラム

最新コラム

【WordPress】パーマリンクの設定方法とテンプレートファイルとの関係

articleとsectionの違いと使い分け【HTML】

インパクトを与えたいならパララックスデザインを使え！

カスタマージャーニーマップとは？作成する目的や作り方を紹介します

検索エリアを意図的に変更し、検索結果をチェックする方法とは

アクティブユーザーとは何？効率の良い増やし方や調べ方も解説

人気コラム

レスポンシブも対応！綺麗で見やすい表のデザイン11個[HTML&CSS]

新世代検索エンジン「ダックダックゴー（DuckDuckGo）」とは？Googleとの違いは？

CSSだけ！レスポンシブなサイトの作り方と鬼ほど使うプロパティ

【CSS】結局レスポンシブでのフォントサイズはどう書くべき？

Googleの検索履歴を残さない方法や削除・非表示にする方法を解説

【検証】スマートフォンで読み易いfont-sizeとは？

カテゴリー検索

過去の記事

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

専用フォームからのお問い合わせはこちら

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

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

SNS別の実装方法

Facebook

twitter

LINE

はてなブログ

pocket

コピペOK!全コード

PHP

css

もう一手間！

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

カウント数をつけたい！

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

まとめ

この記事を共有する

関連

コラム

最新コラム

人気コラム

カテゴリー検索

過去の記事

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

専用フォームからのお問い合わせはこちら