Stinger上で、シェアボタンをオリジナルのものに変更したかったので、自作画像を使用したボタンを作成する方法を備忘録として記録しておきます。
※現在当ブログでは自作シェアボタンは採用していません。
自作シェアボタンの作り方
早速ですが、結論を先に。
各SNSごとのコードは、以下のようにすればOKです。
なお、自作したシェアボタンの画像は、STINGERプラグインのimagesフォルダ内に入れておくことを前提としています。具体的には、WordPressのデータをアップしているサーバー内にFTPソフトなどでアクセスし、wp-content＞themes＞stinger*ver2014****>imagesフォルダ内に画像を保存していることを指しています。アスタリスクの部分はテーマ名やバージョン名が入ります。
Twitterのシェアボタン
まずはTwitterのボタンから。
; ?>/images/【ここはファイル名を指定します】)
【ここはファイル名を指定します】の部分を自作画像ファイル名に置き換えてあげてください。たとえば、自作ファイルが「a.gif」ならば、「【ここはファイル名を指定します】」を「a.gif」と置き換えてあげればOKです。以下、他のSNSボタンも同様にカスタマイズしてください。
Facebookのシェアボタン
はてなブックマークのシェアボタン
Google+のシェアボタン
; ?>/images/【ここはファイル名を指定します】.gif)
以上です。
自作したシェアボタンの並びやレイアウトが気に入らなければ、CSSファイルを修正すればよろしいかと思います。
SNSシェアボタンを自作する理由とは？
私の場合、シェアボタンを自作したくなった理由はふたつあります（正確には「ありました」です）。
- ブログの表示が重たくなるから
- シェア数が少ないのでみっともないから
ブログの表示を少しでも軽くしたい
SNSシェアボタンは、ほとんどのブログサイトで当たり前のように設置されています。けれど、シェア数をリロードするのはブログの表示を重たくなってしまいます。ただ、余程のことが無い限り、ここは無視しても良いのかと思います。
シェアされている数がゼロなのは恥ずかしい
人気ブロガーでも何でもない筆者にとって、シェアボタンにカウント数が表示されるのはちょっと恥ずかしいことでした。シェアボタンのカウント表示に「０」ばかりが並んでいるならば、何の得にもならない…気がします。何も、誰にも見られていないブログであることを声を大にして表明することはありません。
それに、ブログを始めたばかりの時はシェアされる数は少ないはずです。ある程度、シェアされる数がたまってから、カウントしてくれるシェアボタンを表示しても良いのかなと思いました。
WordPressの人気テーマとして知られているSTINGERの作者でもある@ENJIさんは次のようにツイートしています。
記事一覧で記事毎にソーシャル拡散数を取得表示してるブログあるけどああいうのは沢山拡散されてこそ見せる意味があるのであって、ほとんどゼロなどの場合は表示するのはマイナスしかないと思うなぁ。遅くなるし。
— ENJI (@ENJILOG) 2014, 5月 11
シェアボタンを自作して設置する手順
SNSのシェアボタンをオリジナル画像にして、なおかつカウント数を非表示にする方法は上記のとおりですが、もう少し具体的にその方法を書いておきます。
シェアボタン画像を制作する
何はともかく、シェアボタンのオリジナル画像がないと始まりません。オリジナルとはいえ、TwitterやFacebookのロゴは使っておきたい気がします。こうした要望に答えてくれるのがフリー素材サイトです。制作方法の詳細は割愛しますが、たとえば下記サイトが役に立つはずです。
シェアボタン制作に役立つサイト
Freepik
iconfinder
iconhoihoi
フリーフォントで簡単ロゴ作成 | キーボード画像作成 | アイコン・はんこ画像作成
これらのサイトには、たとえばTwitterと検索するとTwitter関連のロゴマークが無料ダウンロードできます。こういうフリー素材は汎用性が高いので重宝します。
作成した画像をサーバー上に追加保存する
自作画像を用意したら、しかるべきところに保存します。保存するのはどこでも良いと思いますが、STINGER 3の関連画像が保存されているフォルダに追加保存するのがわかりやすいはずです。
当然のことですがテーマの画像データが収納されている場所に自作ファイルを保存するには、FTPでディレクトリファイル（WordPressを保存している場所）を確認する必要があります。なので、FTPでディレクトリファイルを見に行きます。
wp-contentフォルダ、themesフォルダと辿って行くと、stingerフォルダがあるはずです。私の場合、「stinger*ver2014****」フォルダをたどることになります。ちなみにStingerシリーズのテーマやバージョンによっては末尾の数字が違っているはずです。
このフォルダをクリックすると、imagesというフォルダがあるはずです。Stingerで使用している画像は、この中に保存されています。わかりやすいようにこの場所へ自作ファイルを保存しておきました。
SNSボタンのテーマ編集を行う
WordPressの管理画面から外観→sns.phpを選択。ここのソースを、先述したコードに置換変更します。
万一に備えるためにも、作業する前には必ずバックアップをとってから作業を行ってくださいね。
まとめ
デフォルトで設定してあるシェアボタンのコードを解読したところ、うまく動作しました。
ちなみに、上記シェアボタンでは、シェアされた数が非表示になるため、ボタン上からはシェアされた数を確認することができなくなります。そのため、iphoneのfeedbackというソフトで数を確認することにしています。
なお、ここで紹介した自作シェアボタンは、当ブログでは表示させていません。
photo credit: Shopping Diva via photopin cc
コメント