WordPressのおすすめシェアボタンプラグイン、高速表示&好きなデザインに変更できます

Game Users Share Buttons

ブログをやっているなら絶対に設置しておきたいSNSのシェアボタン。公式が提供するボタンから、WordPressのプラグインで表示できるものまで様々なものがありますが、今回、ご紹介するのは、公式のものと比較すると表示速度は10倍!選べるテーマは無限大!世界中の素材サイトからアイコンをダウンロードしてシェアボタンの画像として利用できる画期的なプラグインです。絵を描いたりデザインが行える方なら、他にない世界でひとつのシェアボタンを作成することもできる、まさに夢のプラグインです!!

 

こんなシェアボタンが使えます

画像を見てください。これは世界中で提供されているSNSのアイコンを利用させてもらって作ったオリジナルのシェアボタンです。今回、紹介する「Game Users Share Buttons」を利用すると、誰でもこんなオシャレなシェアボタンをブログで使うことができるようになります。

これまではデザインに統一性のない公式のシェアボタンを並べて使うか、プラグインとして提供されている決まったデザインのシェアボタンを使うかで、見た目を変更する選択肢がほとんどなく、おしゃれなデザインのシェアボタンを設置しようとすれば、HTML・CSS・Javascript など Web 制作の知識が必要になったり、自分で画像を作る場合はデザインセンスが求められたり、誰でも簡単にできるというものではありませんでした。

しかし Game Users Share Buttons ならそれが可能です。誰にでも簡単にです!この記事ではインストール方法、使い方について詳しく解説していきますので、ぜひ一度、使って試してみてください。

対応テーマ


Twenty Seventeen Twenty Sixteen Twenty Fifteen
Simplicity2 STINGER PLUS+2 STINGER8
Xeory Extension Xeory Base

上記は表示に問題がないか確認済みのテーマです。基本的にはどんなテーマでも利用できます。

 

正常に表示されないテーマ

  • STINGER5

他にも表示に問題のあるテーマが見つかりましたら、ぜひ教えてください。

インストール方法


WordPress のダッシュボード > プラグイン > 新規追加ページで Game Users Share Buttons を検索してください。

1. ダッシュボードを表示する

ログインしている場合は、画像のように上部メニューからダッシュボードを選択してください。ログインしていない場合はログインすると自動的にダッシュボードに移動します。

 

2. メニューから プラグイン > 新規追加 を選択

ダッシュボードのメニューからプラグインを選び、次に新規追加を選んでください。

 

3. プラグインを検索する

ページ右上のフォームに Game Users Share Buttons と入力すると、黒ネコのアイコンのプラグインが出てきますので、そこに表示されている今すぐインストールボタンを押してください。

 

4. プラグインをインストールして有効化する

プラグインのインストールが終わると、有効化と書かれたボタンが表示されますので、押してください。

 

5. インストール完了

プラグインを有効化しました。と表示されると、インストールは完了です。次に使い方について解説しますので、記事を読み進めてください。

Game Users Share Buttons の使い方

1. 設定ページに移動する

ダッシュボードのメニューから 設定 > Game Users Share Buttons を選んでください。

 

2. テーマタブを選択する

Game Users Share Buttons の設定ページに移動しますので、そこでテーマタブを選んでください。

 

3. ブログで使いたいシェアボタンを選択する

シェアボタンがいくつか表示されます。これはシェアボタンのテーマになっており、好きなデザインを利用することができます。とりあえずどれか気に入ったものを選んで、編集タブに移動ボタンを押してみてください。

 

4. 編集タブに移動する

さきほど選んだテーマを利用するために、編集タブに移動します。上部メニューから編集を選んでください。

 

5. シェアボタンをブログに表示してみる

編集タブをスクロールしていくと、さきほど選んだシェアボタンのテーマが表示されています。そこの Top ボタンを押してみましょう。これはブログの記事の上にシェアボタンを表示するというボタンです。Bottom を押すと、記事の下にも表示されます。

 

6. ブログで表示を確認してみましょう!

ブログを確認してシェアボタンがどのように表示されているか、確認してみましょう。Top ボタンを押した場合、画像のように記事のすぐ上にシェアボタンが表示されているはずです。ただこのままだと、記事との間隔が狭すぎるので、もうちょっとスペースを空けたいところです。

 

7. 記事とシェアボタンの間隔を調整する

さきほどの編集タブ内で、Top 設定と書かれている部分を探してください。見つけたらその部分を押しましょう。

 

8. 余白を設定する

余白・個別投稿ページという欄に、と書かれたフォームがありますので、そこで余白を設定します。記事とシェアボタンの間隔を半角の数字で入力してください。使っている WordPress のテーマやデザインによって必要な間隔は変わりますので、いろいろ試しながら適切な値を見つけてください。

値を入力したら 保存ボタンを押しましょう。

 

9. 編集結果を確認、完成!

余白を設定したので、記事とシェアボタンの間にちょうどいいスペースができました。余白はよく設定する項目なので覚えておいてください。

その他にも設定できる項目はたくさんありますので、気になる部分が見つかったら、編集タブで設定を試してみてください。

最後に


自作自演で紹介記事を書いてみました。半年以上かけて頑張って作ったものなので、できるだけたくさんの人に使ってもらいたい!

使ってもらえばいいものだと感じてもらえると思うので、ぜひ一度試してみてください。もしわからないことがあれば、この記事のコメント欄で質問してもらえればいつでも答えるので、なんでも聞いてください。

リンク


WordPress のプラグイン版が完成しました

WordPress 公式プラグインページ

Game Users Share Buttons

ようやく完成しました!ちょっと前からプラグイン版は公開されていたのですが、プラグインをアップデートするとテーマが消えるというやっかいな問題が発生し、その対応が終わるまで記事にしないでおきました。

何度も修正を重ねたので、バージョンはすでに1.0.9になっています。WordPress 独特の仕様と、プラグインをアップデートした際にファイルがどう扱われるのかについての情報がネットに全然なかったので、その点で苦労しました。

どうもアップデートするとプラグインのディレクトリを内部のファイルごと入れ替えるようなのです。そのせいで内部に作成したテーマファイルも一緒に消えてしまうという、ややこしい仕様です。一時的に削除されない場所にディレクトリを作成し、アップデート後にそこからテーマファイルをコピーするという処理で解決したのですが、これはマナー的にどうなのかという思いもあります。

後日、そのことについて詳しく情報を残すつもりなので、詳しい方が見てくれて情報を提供してくれることに期待!

いろいろ苦戦したのでまだテーマがひとつしかないのですが、WordPress でブログをやっている方はぜひ使ってみてください!サクサク動いてなかなかいい感じだと思います。素材サイトからアイコンをダウンロードするとオリジナルのシェアボタンを作成することも可能です。

WordPress のダッシュボード > プラグイン > 新規追加ページで「Game Users Share Buttons」を検索してください。黒猫のアイコンのプラグインです。

Game Users Share Buttons アイコン

頑張って作ったのでみんなに使ってもらいたい!

リポジトリ公開 & IEで動きました!

GitHub リポジトリトップ画像

https://github.com/gameusers/share-buttons

GitHub のリポジトリを作成し、シェアボタンのコードを公開しました。いずれ他のソーシャルサイトのシェア方法・シェア数の取得方法を知っているプログラマーの方が現れて、爽やかにコードを提供してくれたらいいのになと夢見ております。

このシェアボタンの使用者が増えて知名度が上がれば、そういう方も出てくるかもしれないので、頑張ってテーマや機能を充実させていこうと思います。

前の記事で言っていた IE でシェアボタンの作成ページが動かない問題ですが、なんと Promise の Polyfill を用意するだけで動きました。最初は babel-polyfill で旧ブラウザ環境に対応しようと思ったのですが、スクリプトのサイズが無駄に大きくなってしまうので、babel-polyfill の使用は諦めたのです。

シェアボタンはシェアボタンを作成するページのスクリプトと、シェアボタンを表示するスクリプトに分かれているのですが、babel-polyfill を充てるとシェアボタンを表示するためのスクリプトが非常に重くなってしまいました。圧縮前は60KB(圧縮後は30KB)程度なのですが、それが330KBに。さすがにこの膨れ上がり方はやばい。

というわけで必要なものだけ Polyfill を充てるという方針になったのですが、その場合は IE での動作は諦めるしかないと思っていたのです。Fetch や Async など、いろいろ IE と相性の悪そうな新機能を使っていましたし。しかし、それらについてはすでに Polyfill が充てられていたので、 後は Promise だけという状況になっていたようです。

業務で IE への対応に四苦八苦している方がいる中、自分は本当に運が良かったと思います。制作中、一度も IE での動作チェックをしなかったのに、この結果はラッキーとしか言いようがない。

本日、WordPress の公式ディレクトリへ登録してもらうため、プラグイン申請を行いました。承認してもらえると WordPress のプラグインページから検索してインストールすることができるようになります。

…が、もし拒否られたら…と思うと心配でなりません。長い時間をかけてプラグインを作成して GitHub のリポジトリまで用意したのに、なにか根本的な問題が見つかって掲載不可になったら…。

大丈夫だろうか?

様々な問題が発覚

ブログにプラグイン版をインストールしてシェアボタンを表示してみました。我ながらなかなかいい感じです。

ブログトップ

完成が近いと思っていたのですが、機能をチェックしていると様々な問題が発覚しました。IEとMicrosoft Edgeでシェアボタンが正常に表示されないという致命的な問題が見つかり、今日はそれを修正していました。とりあえずシェアボタン自体は表示されるようになったのですが、シェアボタンを作成するページがIEではどうやっても動かず…。

IEのシェアは年々下がっており、20パーセント程度になっているようなので、もうほっておくことにしました。シェアボタン自体は動くので作る時は、新しいブラウザでやってくださいということにします。

※ 追記:後日、動きました!

その他、認識している問題は2つあります。

・モバイル機器で見るとテーマのボタン画像がぼやける
・モバイル機器で見るとシェア数の文字が1ピクセルずれる

Retinaディスプレイで画像を表示するときは、予め大きめの画像を用意して縮小して表示しなければならないという情報は知っていたのですが、そんな気になるほどボケないだろうと、いい加減な姿勢でテーマ画像を作ったところ、モバイル機器でチェックすると文字が読めないくらいぼやけていました。

Androidのタブレットとスマホしか持っていないのですが、Androidでもぼやけるんですね。Android機器でもRetinaディスプレイと同じ表示方法が取られているんでしょうか?

まぁこの問題自体は画像を大きく作れば済むので解決できるのですが、問題は2つ目の「モバイル機器で見るとシェア数の文字が1ピクセルずれる」なんです。なぜかモバイル機器でシェアボタンをチェックすると、1ピクセルだけシェア数の文字が上に表示されます。

わかりにくい画像で申し訳ないのですが、こんな感じにずれているのです。同じChromeなのにPCとタブレットでなぜ表示位置が変わるんでしょうか。原因がさっぱりわからないので、どなたかわかる方がおられましたら教えてください。

モバイルからのアクセスだけ1ピクセル下に表示するという、強引な解決方法もあるのですが、あんまりスマートな解決方法じゃないので気が進まないんですよね。

Game Users Share Buttons β版公開!

ついにβ版が完成しました。ここまで来るのに長かった…。何度も何度も書き直してやっと。

シェアボタン公式トップページ

最近もクロスドメインの問題でAPI絡みの部分を書き直していたのです。今まではサイト内で使う自家用APIしか作っておらず、同じノリで公開部分のAPIを作っていたため、違うドメインからAPIにアクセスできなくなっていました。

他にもネットワーク上にアップロードするとなぜか動かなくなる部分が出てきたりで、もっと早く公開するつもりだったのですが、延びに延びて11月直前になってしまいました。

以下のURLでチェックできるので、よかったらアクセスしてみてください。

https://gameusers.org/app/share-buttons

シェアボタンを作成して使ってもらってもかまわないのですが、まだローカル環境と gameusers.org 上でしかテストが済んでいないので、その他の環境の場合、なんらかの問題が起こるかもしれません。あとテーマが一種類しかなく、課金システムもテスト版になっています。誰もする人はいないと思いますが、まだ課金は行わないようにしてください(クレジットカードの入力ウィンドウの右上にTEST MODEと書かれている場合はテスト版です)

後はファイルをZipでまとめてプラグイン形式にして、このブログともう一つテスト用のブログを作成して、プラグインの動作テスト、それが終わったら公式プラグインに申請します。公式プラグインとして認められたら完成に大きく近づくので、気合を入れて頑張ります。

ちなみにWordPressで使用する場合、公式サイトでシェアボタンを作成してダウンロードして使うよりも、プラグインで使用した方が便利です。プラグイン版は作成したシェアボタンがWordPressの置いてあるサーバー上に保存され、いちいちダウンロードしなくても使用することができます。興味のある方はプラグイン版が完成するまで待っていてください。

ソーシャルボタン開発終盤

思いつきでカスタマイズできるソーシャルボタンを作り始めて、はや4ヶ月。どのみちBabelでトランスパイルするんだからということで、XMLHttpRequestをやめてFetch APIを使い、async awaitも導入、なんだかんだと新しいことを覚えながらやってきたとは言え、さすがに4ヶ月は時間がかかりすぎ。しかもまだ完成してないという。

2017/8/23 進捗状況

現在はこんな感じになっています。画像のコンテンツはアイコンをダウンロードしてくると、こんな感じのソーシャルボタンが作れますと、サンプルを含めた素材サイトを紹介するタブです。

ソーシャルボタンを表示するコードと設定するページは、だいたい完成していて、今はソーシャルボタンの公式ページを作るべく、Game UsersをReact化しています。Game Users内に公式ページを設置するつもりなので、そちらも同時にReactで書き直さないといけないのです。

これがまた結構大変!PHPで書かれているものを一から書き直しており、しかも他の人が手を加えやすいように意識しながら、ファイルをできるだけひとところにまとめようとしております。今はひとつのページを表示するために必要なファイルが、あちこちに散らばっていて、他の人が状況を把握するのが困難になっているので、それを改善すべく頑張っているのです。

Game Users React化 進捗状況

ヘッダーとフッターの表面的な部分はReactで書き直せています。一度表示すると、以降はサクサク動いてなかなかいい感じです。

退化しました

すでにソーシャルボタンを出力するコード自体はほぼ完成しており、しばらくソーシャルボタンを作成するページを作っていたのですが、なんと途中でまたもコードの大幅書き直しが発生しました。

画像はWordPressのプラグイン画面なのですが、これはソーシャルボタンを作成するページで、ここで画像をアップロードして設定を行うとWordPress上でソーシャルボタンが表示されるという仕組みになっています。

普通のサイトでも利用できるように、ソーシャルボタンの作成が行えるページを公式ページとしても公開する予定なのですが、このページをなにも考えずjQueryで作っていたのです。WordPressはjQueryが利用されているので、深く考えずにそのまま。

このWordPressのページと、公式ページのコードは共通化しようと考えていたので、当然、Game Users内に設置する公式ページもjQueryになるわけです。

jQueryベースはもうやめて、Reactをメインにして行こうという高い目標を立てたにも関わらず、なぜ未だに古いシステムで作っているんだ?Game UsersをReactで書き直そうとしていた高い志はどこへ行ったんだ?という疑念が生じ、jQueryで書いていたソーシャルボタン作成ページをReactで書き直すことになりました。

結構、進んでいた段階での書き直し作業。しかも実際、進めてみるとReactの勝手がわからず、サクサクというわけにも行かず、どんどん時間が過ぎていきます。

本当になにやってんだろうなぁ。当初すべてPHPで書いていたのをJavascriptに書き直した件も合わせると2回目の書き直し作業。さすがにアホすぎて怖くなってくる!

まだ1/3

ブログの更新が疎かになってしまいました。記事を書くのって結構脳を使うので、制作作業後にやるのは辛いものがある。…という言い訳でしばらく放置してしまいました。せっかくブログを作ったんだから、もうちょっと真面目に更新しないと。

2017/5/12 進捗状況

画像を見てもらうとわかりますが、エディットする項目が非常に多くなりました。ずらーっと縦に長いページに羅列されるフォームの数々。この値も編集できるようにした方がいいよな、と思いつくまま追加していくとこんな感じになりました。細かく編集できるのはいいのですが、ユーザーの方にめんどくさそうに思われるんじゃないかと、ちょっと心配しております。

進捗状況的には全作業の1/3くらいは終わったかな?というところです。1ヶ月かけて1/3は、さすがに時間がかかりすぎに思いますが、この後、フキダシを使わないバージョン(画像にシェア数を重ねるタイプ)と、ソーシャルボタンの公式ページ、課金システムを作るつもりなので、まだまだ作業が終わりそうにありません。

課金システムについて説明すると、ソーシャルボタンを使うとネコの画像が表示されてリンクが貼られるのですが、そのリンクを外したい方は課金してくださいというシステムにしようと思っております。Web制作の現場ではWordPressの案件が結構多いようなので、そういう形でWordPressを商用利用しているユーザーの方が有料プランを利用してくれるとありがたいな、という思惑で作っています。

WordPressのテーマを作って収益あげてる人もいるみたいなので、うまくいってくれると嬉しいのですが。

WordPressのプラグインだけでなく?

現在の設定画面

前の記事から6日も経ってるのに進みが遅い!

なぜ進みが遅くなっているのかというと、途中で方針転換があったためです。

当初はWordPressで使えるプラグインの構想だったのですが、作っていくうちに、どうせなら普通のウェブサイトにも使える方がいいよな?ということで一部がやり直しになりました。

WordPressはPHPで動いているのですが、PHPでソーシャルボタンを出力する仕様にすると利用できない環境が出てきてしまうため、Javascriptでコードを出力する仕様にしたのです。数日かけて書いたPHPのコードを書き直す悲しさ、モチベーションの上がらなさでこうなってしまいました。

毎回、自分はこうなってしまうんだよなぁ。自分なりにしっかり構想を練っているつもりなんですが、作っていくうちに構想がどんどん膨らんでいき、同じ部分を何度も書き直して無駄に時間が費やされるのです。

これ客だったら最悪なクライアントですね。途中で方針転換を繰り返して制作者に余計な作業を増やすという。他人を巻き込んでこんなことをしていると非難轟々になりそうなので、いい加減学習したいところなのですが、妄想だけは無駄に膨らむタイプなので、この病の治療は無理かもしれません。

いつの日か、誰かに作業を依頼できる身分になれたら、最初から仕様変更ありの契約でお金を上積みしとかないとダメですね。

MariaDB – DEFAULT CURRENT_TIMESTAMP

WordPressのプラグイン制作、なかなか手ごわいです。独自の書き方を学ばないといけないので、慣れるまで調べることが非常に多いです。

WordPressはデフォルトでjQueryが読み込まれるのですが、そのバージョンが1.12.4でとても古いのです。今後、jQuery依存のライブラリを利用するときに、バージョンの問題で使えないといったことが起こると困るので、最新のものを読み込もうとしたのですが、そのためにはまず古いものを読み込まないという処理をしなければなりません。

たったそれだけのことでも上記のような感じで、独自の関数をいくつか利用して書かなければならないのです。これが本当にわけがわからない。

WordPress Codex 日本語版

一応、リファレンスも用意されているのですが、どこになんの項目があるのか分かり辛い上に、解説が難解で理解するまでに時間がかかるのです。

プラグインをサクッと完成させてから、Game Usersの開発も進めていこうと思っていたのですが、世の中そんな簡単には行かないもんですね。作っているうちに追加したい機能も増えてきたので、当初思ってたよりずっと時間がかかってしまうかもしれません。

MariaDB 日時のデフォルト値


プラグインで使うデータベースのテーブルを作成するコードは以下になるのですが、これを書いているときに、便利な日時のデフォルト値の設定方法を知りました。

datetime_renewal DATETIME DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP NOT NULL

データベースの日時のデフォルト値をこのように設定しておけば、Updateするだけで自動的に日時が更新されることを知って、ちょっとしたショックを受けました。今までデータベースを更新するたびに 0000-00-00 00:00:00 形式で日時を作成してから保存してたのに、あの手間はなんだったんだという。

すごく便利なので、みなさんもぜひ使ってみてください。


追記: 記事を書いてすぐに、これってもしかして新しい機能なんじゃないかと気になって調べてみたところ、MySQL5.6.5からの機能でした。またMySQLが古い環境だと、DEFAULT CURRENT_TIMESTAMPが2つあるとエラーが出るようなので、どのみち上に挙げたSQL文は使えません。

公式によるとWordPressの推奨環境は、MySQL 5.6 / MariaDB 10.0以上ですが、MySQL 5.2.4でも動くようです。プラグインは環境が様々なので、ちゃんと考えてコードを書かないとダメですね。

 

プラグインの設定画面

プラグインの制作は設定画面を表示するところまで来ました。Bootstrapのタブを利用しています。これから設定画面の中身を作っていきます。