コピペで出来る!WordPressで自作のSNSボタンを設置する方法

 

ぷにく(@punikusetuyaku)です。

先日、当サイトに自作のSNSボタンを設置してみました。※現在は別のボタンになっています

今まではプラグインを使ってSNSボタンを表示させていましたが、ツイッターのシェア数が出なくなって不格好になってしまった…と言うのが自作SNSボタン設置のきっかけでした。

「PHPとか細かい事はわからん!」という人の為に、コピペで出来る自作SNSボタンのご紹介をします。

ちなみに完成イメージはこんな感じです。

sns-top-b

表示部分の(single.phpなど)設定

いきなり丸投げしてしまいますが、まずは下記の記事通りにSNSボタンを作ってみて下さい。
icon-arrow-circle-right コピペで利用!WordPressに自作のソーシャルバルーンボタンを設置するためのスタイル設定方法

この通りに手順を踏んでいくと、バルーン型シェアボタンが完成します。

このソースコードを元にもっとスリムなSNSボタンを作っていきます。

上記の記事に沿って、表示部分の設定はできましたか?
申し訳ないですが、表示部分のコードを削除して以下のコードをコピペして下さい。

私の場合はsingle.phpの上の方にコードを貼っています。
私の様に記事上にSNSボタンを設置したい場合、single.phpにコピペでOKだと思います。

 

出来ましたか?
まだ続きますよ。

スタイルの設定

次にstyle.cssに以下のコードを追加しましょう。

※コピペする場所はstyle.cssのどこでも大丈夫です。
私はstyle.cssの一番下に記載しました。

 

スタイルを適応すると、以下のようになります。
sns-top2

シェア数の取得方法など

上で紹介したコードには、シェア数の取得やリンク動作について記載していませんので、ここから更に設定する必要があります。

Twitterシェア数取得

以下の記事に詳しい説明が書いてあります。

icon-arrow-circle-right これで安心!取得が出来なくなったTwitterボタンのシェア数をちゃんと表示させる方法

シェア数の取得方法には色々あるようですが、私は『count.jsoon』とSNS Count Cacheを使ってシェア数を取得する事に成功しました(他の方法は上手くいきませんでした)。

ちなみにシェア数は即時反映はされないようで、当サイトの場合は半日くらいで反映されています。
記事数が多いサイトの場合はもっと時間がかかるかもしれません。

 

他SNSカウントの取得

以下の記事がとても参考になります。

icon-arrow-circle-right Twitter、Facebook、Google+、はてブのソーシャルカウント数をWordPressで直接取得する関数まとめ

icon-arrow-circle-right WordPressで色鮮やかなオリジナルSNSシェアボタンを実装してみました!

リンク動作について

クリックした後に「いいね!」や「シェアをする」動作部分については以下の記事を参考にしました。

icon-arrow-circle-right WordPressで8種ソーシャルサービスに通常リンクからシェアアクションする方法まとめ

 

まとめ

というわけで、自作のSNSボタン設置方法の紹介でした。
私の場合は記事上にスリムなSNSボタンを設置し、記事下にはバルーン型のSNSボタンを設置しています。
サイトのスピード自体に変化は感じられませんが、シェア数などの表示は一瞬で出るので、ユーザーフレンドリーにはなったかなと思います(シェアボタンが重いのって記事を見る分には影響ないでしょうけど、なんだか不格好ですものね)。

おしまい


関連記事一覧