WordPress 自作のSNSのシェアボタンを設置する方法
WordPressで自作のSNSのシェアボタンを設置する方法です。
当サイトではこれまで「AddToAny」というSNSシェアボタンを自動で設置してくれるプラグインを使っていました。
特に不便もなく使っていたのですが、パフォーマンス向上のためにプラグインを停止して自作で設置しようと思いました。
思ったより簡単に設置できたので、備忘録としてまとめておきます。
ここでは WordPressで自作のSNSのシェアボタンを設置する方法 を紹介します。
Sponsored Links
目次
アイコンを準備する
最初にSNSシェアボタンのアイコンを準備します。
当サイトではインラインSVGを使っていますので、SVGタグをコピペして利用する方法となります。
X（旧Twitter）
X（旧Twitter）のアイコンは下記リンク先で作成できます。
SVGをコピーして利用しましょう。カラーコードは「黒（#000000） 白（#FFFFFF）」です。当サイトでは、色の変更なしで、そのまま利用しています。
Facebookのアイコンは下記リンク先で作成できます。
SVGをコピーして利用しましょう。カラーコードは「#1877f2／rgb(24, 119, 242)」です。CSSで色指定しましょう。
はてなブックマーク
はてなブックマークのアイコンは下記リンク先で作成できます。
Hatena Bookmark Vector SVG Icon - SVG Repo
ダウンロードしたファイルをテキストエディタで開いてSVGタグをコピーして利用しましょう。カラーコードは「#01A5DF／rgb(1, 165, 223)」です。CSSで色指定しましょう。
LINE
LINEのアイコンは下記リンク先で作成できます。
SVGをコピーして利用しましょう。カラーコードは「#00b900／rgb(0, 185, 0)」です。CSSで色指定しましょう。
Pocketのアイコンは下記リンク先で作成できます。
Get Pocket Icon | Font AwesomeSVGをコピーして利用しましょう。カラーコードは「#ef3e56／rgb(239, 62, 86)」です。CSSで色指定しましょう。
SNSシェアボタンを自作する
SNSシェアボタンを自作する方法について解説します。
WordPressのテーマの編集について知識がある前提で進めます。
X（旧Twitter）
X（旧Twitter）のSNSシェアボタンを作ります。下記のコードをWordPressテーマのsingle.phpやsingle-{post_type}.phpへコピペしてください。
<a href="https://x.com/share?url=<?php echo get_permalink(); ?>" title="X(旧Twitter)でシェア" rel="noopener noreferrer nofollow" target="_blank">X(旧Twitter)</a>
FacebookのSNSシェアボタンを作ります。下記のコードをWordPressテーマのsingle.phpやsingle-{post_type}.phpへコピペしてください。
<a href="http://www.facebook.com/share.php?u=<?php echo get_permalink(); ?>" title="facebookでシェア" rel="noopener noreferrer nofollow" target="_blank">Facebook</a>
はてなブックマーク
はてなブックマークのSNSシェアボタンを作ります。下記のコードをWordPressテーマのsingle.phpやsingle-{post_type}.phpへコピペしてください。
<a href="http://b.hatena.ne.jp/add?mode=confirm&url=<?php echo get_permalink(); ?>&title=<?php echo get_the_title(); ?>" title="はてなブックマーク" rel="noopener noreferrer nofollow" target="_blank">はてなブックマーク</a>
LINE
LINEのSNSシェアボタンを作ります。下記のコードをWordPressテーマのsingle.phpやsingle-{post_type}.phpへコピペしてください。
<a href="http://line.me/R/msg/text/?<?php echo get_permalink(); ?>%0a<?php echo get_the_title(); ?>" title="LINEで送る" target="_blank" rel="noopener noreferrer nofollow">LINE</a>
PocketのSNSシェアボタンを作ります。下記のコードをWordPressテーマのsingle.phpやsingle-{post_type}.phpへコピペしてください。
<a href="http://getpocket.com/edit?url=<?php echo get_permalink(); ?>&title=<?php echo get_the_title(); ?>" title="Pocketに保存" rel="noopener noreferrer nofollow" target="_blank">Pocket</a>
WordPressテーマへの設置が終わったら、テキスト部分をインラインSVGへ切り替えたら完成です。
まとめ
WordPressで自作のSNSのシェアボタンを設置する方法を紹介しました。
プラグインなしでも割と簡単に設置できてよかったよかった。ちなみに、プラグインを停止しようと思った理由は「PageSpeed Insights」のパフォーマンスに影響していると判断したため。余計なCSSなどを読み込むと速度に影響でるからね。
当サイトは、今後もできるだけプラグインは使わないで運用していこうと思っています。
追記
svgタグにwidth="100%"を入れないとSafariでSVGが表示されないことがわかりました。詳しくは「iPhone SafariでSVGが表示されない場合の対処方法」に書いておきました。
おつかれさまでした。