TwitterやFacebook、Google+のボタンを設置するスクリプトを作り直しました
- 公開日 : 2015年11月27日
- カテゴリ : Web制作
数年前に「Twitter、Facebook、はてなブックマーク、Google+1のボタンを簡単設置できるスクリプト」というのを作って公開していましたが、これは作り方が自分の中で気に入らないものだった。
各SNS純正のボタンは読み込みが長いのも気に入らなかったので、もう少し読み込みが早くなるようにきちんと作り直した。
サンプルは以下のページでご覧ください。
http://www.1-firststep.com/samplephp/social-button/
このスクリプトの良い点
今回制作したこのスクリプトの特長は以下のような感じになります。
- ウェブアイコンを使用することで、高解像度のスマホやタブレットにも対応。(拡大させても表示が荒くなりません)
- jQueryのreadyメソッドで出力させているため、ページの表示が途中で止まりません。(HTMLが全て出力されてからボタン表示を行います)
- JavaScript側ではHTMLの出力だけをし、見た目のデザインはすべてCSSでカスタマイズできます。
- 設置するためにはid属性がsocial-buttonのdiv要素を設置するだけでOK。
このスクリプトの気になる点
逆に、私から見た気になる点(デメリット!?)は以下のようになります。
- jQueryが必須。(Ajax処理やクロスブラウザの面で楽だったから)
- ウェブアイコンのためにFont Awesomeが必須。
- Twitterの仕様変更により、ツイート数が表示されない。(これは現状では仕方ありません)
といった感じでしょうか。
今回は一応自分でも気に入っている仕上がりなので、私の本業のサイトのほうで公開しております。
ダウンロードや設置方法の説明は以下のページをご覧ください。
http://www.1-firststep.com/archives/1226
ダウンロードやカスタマイズは自由です。
著作権表示とかも必要ありませんよ。(著作権の放棄はしていません)
でも無断で再配布はダメです。