WordPressにSNSシェアボタンをjavascriptで設置する

WordPress
SNSシェアボタンをWordPressのPostやPageに設置する際、WordPressのプラグインを使うと、位置の微調整やコントロールの面で何かと不便ですね。

そこでjavascriptで設置するボタンのご紹介です。
Twitter, Facebook, Google+, Evernote, はてブ, Pocket, LineのSNSシェアボタンが設置できます。
現在の記事のタイトルやパーマリンクを自動で挿入するためにWordPressテンプレートタグを使っています。

まずjavascriptを設置

CSS

Lineボタンはスマホで閲覧した際にのみ表示されるよう@media screenで切り替えています。

WordPress記事テンプレートの任意の位置に設置するコード

設置イメージ(サンプル画像です。クリックできません)
シェアボタンの例

javascriptのSNSシェアボタンは、ググるといろいろ出てきますが、WordPressテンプレートにそのまま貼り付けできるものがあまり見合たらなかったのと、Evernoteも入れてみたかったので載せておきます。

なおEvernoteについては、次のサイトを参考にさせて頂きました。
WordPressテーマにEvernoteのクリップボタンを取り付けるカスタマイズ方法
特に「本文をIDで囲う」の箇所は、各サイトごとに確認したほうが良いと思います。

西山
西山 寛之(にしやま ひろゆき)
1975年生まれ O型 | 愛媛大学法文学部卒業
レコードショップ運営~大利木材取締役[ ウェブ制作・運用/営業/CTO ]を経て、
2015年4月 パソラボ設立。
投稿日 カテゴリー Blog タグ , , .

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です