Tag: SNS

SNSタグの付いた記事

RSS

はてなブックマークボタンを吹き出しスタイルにするJS

ソーシャルボタンのカウントが吹き出しスタイルに揃う

スクリーンショット (スクリプト適応前/後)

はてなブックマークボタンのブックマーク数表示を吹き出しスタイルに強制的に変換するJavaScriptです。要jQuery。

ソーシャルボタンを並べたときにはてなブックマークだけ我が道を行くデザインで納まりが悪いので、腹が立って作りました。

本スクリプトをヘッダ辺りで1回読み込めば、あとは何もしなくてもそのページ内のスタンダードタイプ(カウント付き横型)のはてなブックマークボタンが自動的に全て吹き出しスタイルに変換されるという簡単仕様です。ボタン自体は通常のはてなブックマークの公式ボタンのコードでかまいません。

スクリプト名が恐ろしく長いですが、勘弁して下さい。'Hatenabookmark' がそもそも長いんだよ、略称もしっくりこないし。

githubに置いてあります。ご自由にどうぞ。(repository)

Shareボタン

share buttons
share buttons

せっかくソーシャル・アイコンとか作ってるんだし、と色気を出してShareボタンなどを付けてみた。

しかし、設置しておいてなんだが私はこのボタンの意義がよく解っておらず、「そのサービス使ってるなら別にこっちで用意しなくてもそのサービス経由でシェアする手段1も得てるはずでしょ」と思うのだが、これだけボタンがはびこってるのをみるとそうでもないのかもしれない。

ひとまずページ下部に雑に置いたので、細かい配置は今後変わるかもしれない。納まりが良いのはサイドカラムだけど、機能を思うとページ下端であるべき。それにサイドカラムに出しているのはコンテンツレベルの機能2であり、メインカラムが各ページに属するの情報。一応気を使ってるんです。

当サイトで配布してるアイコンはPNG形式だけど自分で使ってるのはしれっとSVG形式だったり。

カウンタは見栄えが悪く邪魔なので非表示。ただfacebookだけは技術的にカウンタ外せなかった。そんくらい選択肢用意しておいて欲しい。

  1. Bookmarkletとか。
  2. 正確に言うと、サイト検索とAuthorはサイトレベルの情報なのでちょっと遺憾に思っている。

ミニ・ソーシャル・アイコン

本アイコンセットの最新版はミニ・ソーシャル・アイコン -Worksにあります。

[preview]
54 pieces of social icons

小さいアイコンはかわいい。

ということで小さいアイコン配布第3段。いわゆるソーシャル・サービス系のミニアイコンです。web素材的な。

いや、なんてことないんだけど、こういうのってフォーマット揃えたいじゃん? 並べたときに各社バラバラだとなんか落ち着かない。だから揃えられるように沢山作ってみました。自分のプロフィール・ページとかブログのソーシャル・ブックマークに使えそうなのを欧米系サービス・国内サービス取り混ぜて42 54個。

read more

オリジナルはてなブックマークボタン&ツイートボタン

今回のリニューアルでこのブログにも流行のはてブボタンとツイートボタンが付きましたが、案の定凝り性なので自分で色々弄ってます。

せっかく作ったのでここに弄り方をまとめときます。

公式のSNSボタン
当サイトのカスタマイズSNSボタン

まぁ一番簡単なのは、それぞれのサービスが提供しているタグセットなのですが、それだとあまりに味気ないというかデザイン上の自由度がほぼ皆無。やはり自分の好きな画像を使ったり、ブックマークがある時だけブックマーク数を表示したり、色々臨機応変にやりたい。しかもそうやって条件分岐させるならJavaScriptで後から書き換えではなく、そもそもPHP上でページ生成時にやっちゃった方が楽というものです。JavaScript使えない環境にもやさしいもんね。

これからの解説は、JavaScriptではなくPHPでカウント数を取得,ボタンリンクを生成するための方法です。外部サービスは利用せず、Twitter/はてなの各公式サイトのAPIのみを使用しています。

ということで解説。

read more