ふとさ、ブログの記事中にtumblrの共有ボタン付けようかなーと思ったわけよ。
んで、最近は大抵addthisとかそういうシェアボタンのWeb生成サービスで、コピペ一発で付けちゃったりする人が多いと思うんだけどさ。
でも個人的にJavaScriptってあんま好きじゃないんだよねぇ。(制作者側じゃなく、利用者側として)
まーはてなブログ特有の微妙に融通きかないところを変えるために、普通に前述のaddthisも含め使ってはいるけどさ。
それでもスクリプトを多用して色々カスタマイズしてるとページの自体の動作がどんどん重たくなっていくし、
シェアボタンが現れるまでのタイムラグが微妙に嫌なのよ。ブログを読み込んだときにはそこに既に鎮座していてほしいレベル。
ってことでtumblr共有のために、オリジナルのカスタマイズボタンを作ろうという話。
- そもそもtumblrって？
- はてなブログ標準の共有ボタンじゃダメなん？
- じゃあaddthis的なモノじゃダメなん？
- カスタマイズのために先人に学ぼう
- お次はtumblr公式に行ってみる
- 共有ボタンの公式ドキュメントを読んでいく
- ボタン画像は何にする問題
- ちなみにボタン画像の指定方法は
- 実際にボタンを設置するときに
- 全シェアボタンの完成形はこちら
回り道した話が多いんで、結論だけ知りたい人は「でもエラーが気持ち悪いって人は」へGO！
そもそもtumblrって？
ブログとSNSのハイブリットサービスみたいなもんよ。例えるならtwitterみたく人と繋がりながら、自分のマイページがブログにもなってる、的な。
説明が適切かどうか微妙だけど、まぁこの独特の使用感は使った人にしかわからんと思う。
しかしそれこそ数年前までは盛んに次はタンブラー！タンブラー！って騒がれてやってる人も多かったんだけどね。
いまの日本だと少し下火？
まぁ流行り廃りこそあれど海外ではよく使われているし、国内にもわりと根強い利用者はいるので、
mixiやセカンドライフみたいにコアなファンが支えていくサービスになっていると思われ。興味ある人はぐぐれ。
はてなブログ標準の共有ボタンじゃダメなん？
確かにtumblrにも対応してるよね。これのことでしょ？
うん、全OFFだよｗ だってダサいじゃんｗ
まぁそれは個々のブログデザイン次第な部分も大きいと思うけどさ、
っていうかスクリプト走ってるから重いし、シェア数のカウンターとか要らんのよ。
ただでさえページが重くなるのにそのカウンターのせいで余計に重くなるし、
もっとボタンはシンプルで良くって「ぽちっと押せる」というただそれだけの機能があればいいわけよ。
じゃあaddthis的なモノじゃダメなん？
addthisはシェアボタンの生成サービスだね。たまに使ってる人も見る。ボタンを介したシェア数の統計情報も見れたりするんだよね。
うん、便利。ってことでこれは最近ちょっと実験的に使ってみてる。
まぁ似たようなwebサービスは多々あるけれど、結局のところスクリプトでボタンを配置しているのがやっぱ気に食わんのよｗ
妙なこだわりだけどさ、先述のようにページ開いたらボタンは瞬時に読み込み終わって、ページ中にあってほしいのよ。
ただしaddthisは非常にいいサービスだと思うよ。
使い方に関しては特に迷わないだろうし、そもそもこの記事の本意と外れるので説明は省くけれど、興味ある人はぐぐれ。
カスタマイズのために先人に学ぼう
はてなブログにはさ、読み込みも早くてシャレオツな独自のシェアボタンを作ったりしてる人って結構いるわけよ。
ということでまず何をするにもぐぐれ！の精神で調べてみたんだけど、
なんか知らんけどはてなブログに合わせて「tumblr」の共有ボタンを作ってる人が見当たらなかったんだよね。
いや、はてな用どころか、なんかブログってものにtumblr共有の「オリジナル」ボタンを載せる的な記事が一向に見当たらない。
せいぜいはてブ、FB、ツイッター、pocket、LINEなどの定番ボタンのコードやデザインを公開している人はよくいるんだけどね。
私の調べ方が悪いんか？というかみんなtumblrに興味がないんか？あんなにいいサービスなのに(憤怒)
お次はtumblr公式に行ってみる
まぁそもそも公式には共有ボタンジェネレーターってのが用意されてるので、何の知識も無くボタンを作ることはできるんだけどさ。
テンプレデザインから選ぶこういう画面ね。
はいはい、スクリプトスクリプト。
だからってスクリプト消してaタグだけにしたら、当たり前だけどボタンとして動かんしねｗ
そもそも私がブログの記事内に置きたいモノはこういうやつじゃないんだよ。
共有ボタンの公式ドキュメントを読んでいく
ってことで前述の公式ボタン生成ページ内でリンクされている、共有ボタンドキュメンテーションに行ってみる。
お、あるやんけ！きちんと「独自のボタンのビルド」って項が！
結論から書くと、「https://www.tumblr.com/widgets/share/tool」ってのが共有ボタンのaタグに設定すべき基本のURL。
ただこれだけじゃ当然動作しない。一体どのページをシェアするのか、っていうことで基本のURLにクエリ文字のパラメータを渡してあげなきゃいけない。
記事URLの指定
その際にページURLを指定するのは「http://tumblr.com/widgets/share/tool?canonicalUrl=【記事URL】」という形。
この記事URLを手動で一個一個指定するなんてことしたら果てしないことになるので、はてなブログ内には記事中で使える便利な変数が定義されているね。
それが「{URLEncodedPermalink}」ってやつ。
ということで、aタグに指定するURLとして最低限必要な形は「https://www.tumblr.com/widgets/share/tool?canonicalUrl={URLEncodedPermalink}」ってことになるね。
その他のパラメータ
例えばあとは記事タイトルの指定。これは「title」っていうパラメータで渡すことになる。
んで、はてなブログ内での記事タイトルの変数は「{Title}」だよね。
ってことでこれを前述のURLに含めると「https://www.tumblr.com/widgets/share/tool?title={Title}&canonicalUrl={URLEncodedPermalink}」っていう形になるね。
こうやって複数のパラメータを使うときにはアンパサンド(アンド)で追加していくことになるわけ。
さらにtumblrには投稿タイプっていう概念があって、「テキスト、画像、リンク、引用、チャット、動画」のどのタイプで投稿するのか指定することができる。
この辺は正直tumblrを使っていないと感覚的に使い分けが分からないと思うけど、
ブログ記事をシェアする場合は「リンク」を指定するし、画像メインのコンテンツの場合は「画像」にする。
さて、このときURLに渡すパラメータは「posttype」で指定する。この後に続くのは、「text, photo, link, quote, chat, video」のいずれか。
まぁ普通に記事のシェアボタンの場合はlinkでいいので、
最終的なURLの形としては「https://www.tumblr.com/widgets/share/tool?posttype=link&title={Title}&canonicalUrl={URLEncodedPermalink}」ってことになるね。
ちなみにスクリプトを使う場合は
もし共有ボタンドキュメンテーション冒頭のスクリプトを使う場合には、
URLに各クエリ文字のパラメータを指定する必要は無くて、aタグのデータ属性でそれぞれ指定することになるよ。
(っていうか私はそれを最初に逆に解釈していて、思ったようにボタンが動作しなくてここで小一時間ほどはまったｗ)
例えば前述のものをデータ属性に書き換えるとこんな感じ。
<a class="tumblr-share-button" href="https://www.tumblr.com/share" data-posttype="link" data-title="{Title}" data-content="{URLEncodedPermalink}"></a>
URLのパラメータで指定していたものをそれぞれ、data-posttype, data-title, data-contentって感じでデータ属性にしているね。
これに関する詳細やその他のオプションは共有ボタンドキュメンテーションを読んでみて。
ボタン画像は何にする問題
オリジナルアイコンで困るのはボタン画像。
まー各自適当に好きな画像にaタグを指定すればいいと思うけど、何のシェアボタンなのか一発で分かるようにしたいよね。
ってことでわりと個人的に好きなのは「icons8」というサイト。
フリーのアイコンがたくさん揃っていて商用利用も可能。ただしその場合はicons8へのリンク表記が必要だよ。
使用している全ページに表記が必要なので、普通はフッター辺りに記載することになるのかな。(アプリ内で使用するならaboutページ)
<a href="https://icons8.com/icon/19685/tumblr">Tumblr icon by Icons8</a>
例えばサイドバーやフッターにこんな感じでタグを設定してクレジット表記しておこう。
もちろんリンク表記したくなければ、有料プランも用意されているので各自利用用途によっては検討されたし。
ちなみにボタン画像の指定方法は
imgに指定する画像は、はてな民みんなが使っているはてなフォトライフに置くわけだね。
今更ほとんど操作の説明は不要だと思うけれど、一応注意点。
画像をアップロードしてimgタグに設定するURLは、
「http://f.hatena.ne.jp/【ユーザー名】/【日時】」という形のフォトライフ内の閲覧URLじゃなくて、
「https://cdn-ak.f.st-hatena.com/images/fotolife/【アルファベット】/【ユーザー名】/【日付】/【画像名】」
っていう直接の画像URLにリンクしないとおかしなことになるよ。
実際にボタンを設置するときに
さて、そんなこんなでtumblrのオリジナルシェアボタンのタグはこんな感じになっているはず。
<!--tumblr-->
<a class="tumblr-share-button" href="https://www.tumblr.com/widgets/share/tool?posttype=link&title={Title}&canonicalUrl={URLEncodedPermalink}" title="このエントリーをtumblrでシェア" target="_blank"><img src="【画像URL】" /></a>
※コメントアウトとか、title属性やtarget属性は好きにいじってね。
これをデザイン内の記事上とか記事下、あるいはその両方に設置していくことになると思うんだけど、
実際にタグを記述するとこんな感じのメッセージが表示される。
「Named entity expected. Got none.」
いわゆるHTMLの構文エラー的なものを指摘されているわけだけど、「ぶっちゃけそれでも動く」。ってことで普通に無視して保存しても大丈夫ｗ
でもエラーが気持ち悪いって人は
まぁそもそもなんであのエラーメッセージが出てるのかっていうと、aタグに指定しているURLにアンパサンドが含まれているから。
試しに「&」を消してみるとエラーは表示されなくなる。
まぁ一応特殊文字はHTMLで使っちゃいけない暗黙の了解があるわけで、それなら「&」をエスケープすればいいわけよ。
具体的には、「&」や「%26」に置き換えればいいわけ。
ということで変更して最終形のタグがこちら。
<!--tumblr-->
<a class="tumblr-share-button" href="https://www.tumblr.com/widgets/share/tool?posttype=link&title={Title}&canonicalUrl={URLEncodedPermalink}" title="このエントリーをtumblrでシェア" target="_blank"><img src="【画像URL】" /></a>
全シェアボタンの完成形はこちら
そんなこんなで、色々と既存のシェアボタンとバランスとって配置した姿はこんな感じ。
スマホでのレスポンシブ対応を考えた結果、一つ一つのボタンが小さくなった感ｗ
まぁこれはボタンの数を減らしたり、cssでmediaクエリを使えばいいわけだけどね。
というわけで、tumblrのオリジナルシェアボタンを設置するという目的は無事達成できた模様。
いろいろカスタマイズしていくとやっぱり面白いよねぇ。
あとはみなさんも先述の公式ドキュメントやコードを利用して、煮るなり焼くなりコロ助なり。
