炭火Blog

プラグインなしで作るSNSのシェアボタン

※このページにはプロモーションが含まれています。

ほとんどのサイトに存在するSNSをシェアするボタンをプラグインを使用しないでブログに実装します。

(2023年9月追記)Twitter社のアドレスが変更になったのか、上手く動かなくなったのでコードを書き換えました。

ご覧のとおり、少ない記述で使えるようになるので、サイトを重くすることもありません。プラグインを使うと設定などが便利なのですが、その分サイトの動作が遅くなってしまうので、できるだけ使わないほうが良いと考えます。

紹介するコードはIcoMoonのアイコンフォントを使用しています。IcoMoonは自作のSVG画像をアイコンフォントにする機能もあるのでとても便利です。

Icon Font & SVG Icon Sets ❍ IcoMoon

シェアボタンにするSNS

今回選んだのはX、Facabook、LINE、はてなブックマーク、Pocketの5つになります。

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とモバイルのレイアウトの変化などをスタイルシートで調整すれば完成になります。

最後までお読みくださり、誠にありがとうございます。

1冊ですべて身につくWordPress入門講座
WordPressオリジナルテーマ制作入門

関連投稿

週間アクセスランキング

管理者 ほんだ

数多くあるブログの中で、このページをお読みくださりありがとうございます。このブログは、炭火で美味しいものを作ることを中心に、日々の趣味についてを文章にすることで、WordPressを使ってのWebページ作成を忘れないようにしています。熱帯魚の世話や野菜の栽培、Linuxについて興味のあることを、つたない文章で綴っています。兵庫県在住です。

Home
Blogging
プラグインなしで作るSNSのシェアボタン