最新コラム
-
-
-
Webサイト制作
【2023年版】国内・海外のおすすめVPS10選
-
Webサイト制作
初心者でも5分で分かる!SSL/TLSとは何か?
-
SEO外部対策SEO対策
Googleが推奨するnofollowの正しい使い方とは?
コラムやブログページの記事上か下に入ってることの多い、SNSへのシェアボタン。
facebookやtwitterなど、公式のシェアボタンがあったり、Wordpressのサイトであればプラグインがあるので、比較的実装も簡単です。 ただ、サイトに合わせてSNSシェアボタンをデザインする場合や、またクライアント様からデザインを提供されサイトを作成する場合など、圧倒的に「オリジナルのSNSシェアボタン」の方が多いです。
そこで今回は、プラグインを使わなくても実装できるオリジナルのSNSシェアボタンの作り方をPHPコードやCSSでのスタイルと合わせてまとめます。
また、カウント数を追加したり別ウィンドウで開く方法などの一手間もご紹介します!
目次
今回作るSNSシェアボタンは、Facebook、Twitter、LINE、Pocket、はてなブックマークの5つです。
こんな感じです!実際この記事をシェアできるので、ポチッとお試しください!
では早速各SNS別にコードと、公式サイトのデザインガイドライン、色等をみていきましょう。
アイコンはWEBfontのfontawesomeを使っています。
はてなブログのアイコンはfontawesomeにないので、公式サイトからダウンロードしています
なお、公式のデザインガイド、色は2019年8月現在のものとなります。
<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/ |
---|---|
色 | #1578f2 |
<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 |
---|---|
色 | #1DA1F2 |
<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 |
<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 |
上をまとめるとこのようになります。cssも載せておくので、コピーして使ってください。
<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>
.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シェアボタン、何気に実装する機会も多いと思います。プラグインを使わなくても十分実装できるので、プラグイン頼りの人はぜひ一度試してみてくださいね。