WordPressにSNSシェアボタンを実装しました [メタ]

    >


今まで僕は、SNSシェアボタンって表示してなかったんですけど、要望があったというかなんというか。
ブログ始めたての頃なんかは、シェアボタン表示するプラグイン5個位インストールしてどれか一番かっこいいかなーなんて選んだりしたもんですが、
今は直接PHP弄ったほうが早いっていう。

この記事をあなたが見ている現在、今回実装したこれがまだ生きているかわかりませんので、GIFをどうぞ。

https://yuis.xsrv.jp/data/GIF_lruFIfyyJ1NRW9V6S9532DMLY9zmA6il.gif

ということで、軽く書きましたので、コードをご紹介。

フォントサイズとかmarginとか、特にレスポンシブの部分なんかはテーマ依存の部分だと思うので、適当に書き換えてください。



機能

  • PC大画面とPC中画面~スマホの2種類にレスポンシブ対応
  • さりげなく記事タイトルをシェアタイトルにする配慮
  • WordPress以外のプレーンPHPやHTMLにも応用できるシンプルなコード
  • かっこいい。クール。ミニマリスト。
  • nofollow … WordPressプラグインでシェアボタン実装すると、nofollowがついてなくて困ったりするんですよね。以前のSEOにはやたら詳しいのにプログラミングはさっぱりな僕は頑張ってプラグイン探したけど結局見つからなくてそれでシェアボタン付けないようになった記憶がある。
  • [未実装]はてなブックマーク … fontawesomeがなかったっていうのが一番の理由です。ほんとははてブほしかったんだけどはてブの民ってウェブ詳しい人多そうだからブックマークレットとか使ってるでしょ。たぶん。
  • [未実装]JavaScript … もっと派手にすることもできますが面倒なので最低限な感じで。
  • [未実装]URLのエンコード … 忘れました。タイトル文字列に変な文字が含まれているとURLがバグるかも知れません。今の所なっていませんが。もし頻発するようであれば追記します。
  • [未実装]メタキーワードをハッシュタグにする … 実装したかったけどあと一歩のところで出来ませんでした。

参考

Icons | Font Awesome
はてなブックマークボタンの作成・設置について – はてなブックマーク
Simple HTML/CSS Social Media Buttons
Top 17 Free HTML5 & CSS3 Social Sharing Buttons Templates 2018 – Colorlib

コード

最近githubをはじめました。積極的にgistとか使っていきたいと思ってます。

github gist: https://gist.github.com/56319ba381d53ea0545513018cd32ddd#file-header-php





お困りですか?この記事で紹介していることをマンツーマンで指導、解説、代行します。まずはお気軽にお問い合わせください。


Close Menu