WEMOブログ向けWordPressテーマ「SWELL」をリリースしました!コピペで終わらない、本質的な理解を目指した知識整理のメモをお届け。2019.08.15SNSシェアボタンをプラグインなしで実装した時の備忘録です。(このブログのシェアボタンはこの記事の方法で実装しています。javascriptで実装するパターンの二種類をメモしていきます。アナリティクスとの連携もわかる範囲で合わせてメモ。今回対応していくのは、FacebookTwitterGoogle+はてなポケットLINEの6種類のSNSボタンです。*シェア数の「表示」に関しては、プラグインを頼った実装になります。操作だけで実装できます。Twitterの場合https://twitter.com/intent/tweetが基本的なツイート画面のURLになっており、試しにこのURLにアクセスすると以下のような画面に遷移します。本当に単純なツイート画面なので、記事のシェアも何もありません。プロパティをセットしてあげることで、シェアするページ(url)と、その時にツイートするテキスト(text)を指定できます。?をつけてプロパティを記述できます。例:「あああ」という文章で当サイトのトップページをシェアする場合、以下のようになります。https://twitter.com/intent/tweet?url=http://wemo.tech&text=あああプロパティの順序はどちらが先でも構いません。これらのURLをアンカータグに指定しておくことで、クリックされると次のような画面に遷移します。このままツイートしてみると...無事、このようにツイートできました。head内のmeta属性などであらかじめ設定しておかなければなりません。SEOというプラグインなどを使えば簡単に設定できますので、各自でググってみてください。超素朴なTwitterシェアボタン無駄な機能の一切ない、純粋にシェアしてもらうだけのボタンの例です。Twiiterでシェアする</a>Twiiterでシェアするもちろん、これだけでは物足りないと思うので、後ほどクオリティを上げていきます。Facebookの場合Facebookの場合も軽く触れておきます。ベースとなるのは、下記のURLになります。https://www.facebook.com/sharerこれでシェア画面にアクセスできます。&t="本文テキスト"」とすれば、ツイッターの時のようにツイートする本文とシェアするURLが指定できます。例:当サイトのトップページをシェアするためのURLhttps://www.facebook.com/sharer.php?src=bm&u=http://wemo.tech&t=備忘録ブログですPHPのみで実装【WordPress】さて、基本的な記事のシェア方法が理解できましたら、実際に表示中の記事をシェアするボタンを実装していきましょう。Javascriptのwindow.open()を使って、ボタンがクリックされたらシェア用URLにて小窓を展開します。アイコン画像やボタンのデザインは各自でどうぞ。シンプルな実装(シェア数表示なし)まず先にコードから。WordPressでの例です。</a></li></ul>シェアしてほしい記事のURLやタイトルをWordPressの関数で取得しておき、onclick属性でシェア画面を小窓表示する処理を加えています。window.open()の第2引数'_blank'は空文字''でも大丈夫っぽいです。一応urlencode()でURL用にエンコードをかけています。*追記:urlencode()を使うと、Pocketでの保存時にタイトルが認識されずにURLで保存されてしまうことが判明しましたので、コードから削除いたしました。pocketやLINEは小窓表示させずに単純にtarget="blank_"にするだけでも大丈夫です。(好みでどうぞ)また、スマホの場合も小窓表示は必要ないですので、wp_is_mobile()などで条件分岐させて記述を分けても良いかもです。Cacheというプラグインが便利だそうです。このプラグインを使用した場合の実装コードをメモしておきます。申し訳ございません、私は実際ににはまだこのコード確認できてないです。一応参考として載せておきます。アイコンの横など、表示させたい場所にそれぞれ以下のコードを記述。?>JavaScript側で関数を作っておく場合aタグに全部詰め込むとぐちゃぐちゃで気持ち悪い!って人は以下のようにjavascript側で関数を作っておくといいかもしれません。false;}あとは、aタグの中身をそれぞれ下のように。はてな</a>結構スッキリします!小窓のwindowサイズはそれぞれのSNSに適したサイズに合わせていますが、全て一緒のサイズでいいやって人は、引数はthis(aタグ自身)だけにもできます。Googleアナリティクスに連携させる方法です。</li></ul>href属性の中身は空文字""でも動作します。続いて、肝心のjavascript側の処理です。シェアの説明文(タイトル)」を持つ、新しい関数を用意し、以下のようにします。('share'はGoogleアナリティクス上の表示文字。false;}Googleアナリティクスへイベントを送信するため、ga()という関数を使ってます。プラグイン」という特殊な項目でSNSのシェア状況を計測できるようになります。各引数やアナリティクスのイベント送信については、この記事とか読むとすごくわかりやすいと思います。個人的に整理して記事にしてみようと思います。シェア数の確認アナリティクスの管理画面から「集客」->「ソーシャル」->「プラグイン」で確認できます。Undefinedエラーを出します。Googleアナリティクスのトラッキングコードをgtag.jsへ乗り換えた人もたぶん上記のイベントは動かないのではないかと思いますので注意してください。(確認できしだい記事更新します。)おわりにSNSシェアボタンをプラグインなしで実装するのはすごくややこしそうなイメージを持っていたのですが、以外と単純な仕組みでした。長いメモになりましたが、根本的な仕組みはただaタグで飛ばす先のurlを操作するだけでした。プラグインに頼りたくない派の方々の参考になれば幸いです。