コード・実装

【WordPress / PHP】プラグインなしでSNSシェアボタンを設置する方法(facebook / twitter / LINE)

WordPressを実装しているとプラグインなしで、SNSシェアボタンを設定したいという要望がたまにきます。

その際の実装方法について忘備録的な意味で記載したいと思います。

下記は、facebook / twitter / LINEのボタンの設置方法です。

 

プラグインなしでSNSシェアボタンを設置する方法(facebook / twitter / LINE)

シェアボタンを設置したい部分に下記PHPコードを追加してください

PHP

<?php
$url_encode=urlencode(get_permalink());
$title_encode=urlencode(get_the_title()).'|'.get_bloginfo('name');
?>
<ul>
  <!--Facebookボタン-->
  <li> <a href="//www.facebook.com/sharer.php?src=bm&u=<?php echo $url_encode;?>&t=<?php echo $title_encode;?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;">
<img src="【Facebookアイコンの画像パス】" alt="Facebook">
</a> </li>
  <!--ツイートボタン-->
  <li> <a href="//twitter.com/intent/tweet?url=<?php echo $url_encode ?>&text=<?php echo $title_encode ?>&tw_p=tweetbutton" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;">
<img src="【Twiiterアイコンの画像パス】" alt="Twitter">
</a> </li>
  <!--LINEボタン-->
  <li> <a href="//social-plugins.line.me/lineit/share?url=<?php echo $url_encode;?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=500');return false;">
<img src="【LINEアイコンの画像パス】" alt="LINE">
</a> </li>
</ul>

 

SNSシェアボタンの効果

SNSのシェアボタンは様々なサイトで見ることができます。

SNSボタンは大きく分けて「サイトのURLのシェアを促すもの」と「企業SNSアカウントへのリンク」と「いいねを知らせる」等のボタンがあります。

今回私が共有させていただいたのは「サイトのURLのシェアを促すもの」となります。

 

SNSは基本的に、似たような属性や興味がある方と繋がっていることが多いので、お客様にこのサイトいいなと思ってシェアをSNSでしていただけると、似た嗜好の方の目に留まることになり、より良い循環が期待されます。

勿論、シェアしてくれる人の数は多くないです。

ただ、シェアボタンは集客のためにも設置して決して損はないかなと思います。

ホームページへ集客したい人、サービスや商品を知ってほしい人などはぜひ設定してみてください。

 

WordPressですと、プラグインやテーマで設定できるのですが、今回はプラグインなしでSNSシェアボタンを設置する方法を共有させていただきました。

ぜひ試してみてください。

ABOUT ME
WEBクリ開発者
当ブログでは主にWeb制作・HTML・ CSS・SCSS・JavaScript・jQuery・Vue.js・Wordpress・個人開発情報の情報を発信。 WEBデザイナー・コーダー・プログラマー向けのサイトです。 また、個人開発のサービスやアプリのお知らせもさせていただいています。