プラグインなしで作るSNSのシェアボタン
※このページにはプロモーションが含まれています。
Table of Contents
ほとんどのサイトに存在するSNSをシェアするボタンをプラグインを使用しないでブログに実装します。
（2023年9月追記）Twitter社のアドレスが変更になったのか、上手く動かなくなったのでコードを書き換えました。
ご覧のとおり、少ない記述で使えるようになるので、サイトを重くすることもありません。プラグインを使うと設定などが便利なのですが、その分サイトの動作が遅くなってしまうので、できるだけ使わないほうが良いと考えます。
紹介するコードはIcoMoonのアイコンフォントを使用しています。IcoMoonは自作のSVG画像をアイコンフォントにする機能もあるのでとても便利です。
Icon Font & SVG Icon Sets ❍ IcoMoon
シェアボタンにするSNS
今回選んだのはX、Facabook、LINE、はてなブックマーク、Pocketの5つになります。
- X
- LINE
- はてなブックマーク
Amazon セールとイベント
冬の味覚ポイント高還元カニ特集 【期間限定】ダブルポイント祭り表示する箇所にコードを貼る
下のコードをSNSシェアボタンを表示する箇所に貼り付けます。
<?php
$url_encode = urlencode(get_permalink());
$title_encode = urlencode(get_the_title()).'|'.get_bloginfo('name');
?>
<div>
<a href="https://twitter.com/share?url=<?php echo $url_encode ;?>&text=<?php echo $title_encode ;?>" target="_blank" rel="nofollow noopener" title="Xでシェアする"><span class="icon-x"></span>X</a>
</div>
<div>
<a href="//b.hatena.ne.jp/entry/<?php echo $url_encode ;?>" target="_blank" rel="nofollow noopener" title="この記事をはてなブックマークに追加"><span class="icon-hatenabookmark"></span>はてぶ</a>
</div>
<div>
<a href="//getpocket.com/edit?url=<?php echo $url_encode ;?>" target="_blank" rel="nofollow noopener" title="Pocketであとで読む"><span class="icon-pocket"></span>Pocket</a>
</div>
<div>
<a href="https://social-plugins.line.me/lineit/share?url=<?php echo $url_encode ;?>" target="_blank" rel="nofollow noopener" title="LINEでシェアする"><span class="icon-line"></span>LINE</a>
</div>
<div>
<a href="https://www.facebook.com/share.php?u=<?php echo $url_encode ;?>" target="_blank" rel="nofollow noopener" title="Facebookでシェアする"><span class="icon-facebook"></span>Facebook</a>
</div>アイコンやテキストの有無、PCとモバイルのレイアウトの変化などをスタイルシートで調整すれば完成になります。
最後までお読みくださり、誠にありがとうございます。
週間アクセスランキング
このブログを書いている人
ほんだ
数多くあるブログの中で、このページをお読みくださりありがとうございます。このブログは、炭火で美味しいものを作ることを中心に、日々の趣味についてを文章にすることで、WordPressを使ってのWebページ作成を忘れないようにしています。熱帯魚の世話や野菜の栽培、Linuxについて興味のあることを、つたない文章で綴っています。兵庫県在住です。