Blogger(blogspot)にはてなブックマークボタンとEメールで送信ボタンとTumblrボタンをオリジナルで作る方法
オリジナルのはてなブックマークボタンをBloggerに設置する方法他
今回はBlogger(Blogspot)に「はてなブックマークボタン」と「BloggerのEメールで送信ボタン」「Tumblr（タンブラー）ボタン」の三つのボタンをカスタマイズしてオリジナルボタンを作成する基礎コードを作成しましたのでご案内したいと思います。オリジナルボタンにカスタマイズすることでデザインを統一して見やすいブログを作ることができます。
目次
はてなブックマークをオリジナルにカスタマイズしてBloggerに設置する方法
はてなブックマークは未だに根強い人気のソーシャルブックマークです。お役立ち系のブログに是非とも搭載したいボタンです。オリジナルのはてなブックマークをBloggerに設置する方法を考えました。標準のボタンは「はてなブックマークボタンの作り方（URL:http://b.hatena.ne.jp/guide/bbutton）」に書いてあります。
公式サイトのはてなブックマークボタンは、はてなのサーバーから画像を取得する仕組みになっていますので個人のブログ上では表示が遅くなります。自前でリンクボタンを作成すれば早くボタンが表示できますのでここではオリジナルのボタンを作成する基盤を整えます。
まずはてなブックマークのURLを調べてみると次のようになっています。
http://b.hatena.ne.jp/entry/s/あなたのURLのhttp://を除いたアドレス
既に私のブログに設置しましたはてなブックマークのソースを利用するとBlogger用のはてなブックマークのリンクURLは次のようにデザインすることができます。
<a class='あなたのクラス' expr:data-hatena-bookmark-title='data:post.title' expr:href='"http://b.hatena.ne.jp/entry/" + data:post.url' title='このエントリーをはてなブックマークに追加' target='_blank'>Hatena</a>
data-hatena-bookmark-lang='ja'というタグを追加すると言語を日本語に限定することができますが、割と海外の人も日本のブログをよく見ておられますのでこのタグを追加しても無意味ですので今回は使いません。動作を確認して正常に動いてCSSでデザインを整えてやればオリジナルのはてなブックマークは完成です。
オリジナルのはてなブックマークの設置は簡単でした。
ソースをコピペするだけで簡単に設置できるように知恵を捻って作りましたので、ソースをご利用になる際にはシェアまたはブログで紹介していただけるようにお願いします。シェア無しでこっそり無断利用される場合は、筆者があなたのことをよく思っていない、あなたは悪いことをしているということを覚えていてください。
メールで共有ボタンをBloggerに設置する方法
Bloggerには標準でメールでURLを送信する機能が搭載されています。それをもとにオリジナルのメールでブックマークボタンを作ってみましょう。Bloggerのソースをもとに編集します。オリジナルのソースコードは次の通りです。
<b:if cond='data:top.showEmailButton'><a class='goog-inline-block share-button sb-email' expr:href='data:post.sharePostUrl + "&target=email"' expr:title='data:top.emailThisMsg' target='_blank'><span class='share-button-link-text'><data:top.emailThisMsg/></span></a></b:if>
BloggerのEメールで送信ボタンをクリックすると次のようなURLが表示されます。
BloggerのEメールで送信ボタンをクリックすると次のようなURLが表示されます。
https://www.blogger.com/email-post.g?blogID=
ここからメールボタンのリンクを作成します。If文は不要なので消しておきましょう。
<a class='あなたのクラス ' expr:href='data:post.sharePostUrl + "&target=email"' expr:title='data:top.emailThisMsg' target='_blank'>E-Mail</a>
ここで気を付けたいのがリンクのタグはdata:post.canonicalUrlではなくdata:post.sharePostUrlとしておくことです。Eメール送信の場合、カノニカルは通用しません。
動作を確認してみて正常だったらCSSでデザインをカスタマイズして完成です。
Blogger Eメールで送信画面はこのようになります。Googleアカウントにログインしてなくても使えるかどうかはわかりませんし、Googleがどのような情報を取得して検索結果に関係しているのかどうかも不明です。Googleのことですからこのアクションに対し何の情報収集もしていないわけがないかもしれませんね。
動作を確認してみて正常だったらCSSでデザインをカスタマイズして完成です。
ほかにもある、シェアボタンをBloggerに導入する方法
ここまでは需要があるソーシャルボタンの設置方法を詳しく、ソースをコピペするだけで簡単に設置できるように説明してきました。ソーシャルボタンはLINEというアプリもあるようですが、私はLINEやMixiのような低俗なアプリは紹介したくありませんので省略します。Tumblr（タンブラー）はどの程度の人気があるのかな？日本ではテレビでまだ放送されたことがないのでこれから利用者が増えるかもしれません。
Tumblr（タンブラー）のオリジナルボタンをBloggerに設置する
Tumblrは他者と交流できるクリップ型のSNSです。写真はページをクリップできるアプリです。Tumblrのボタンの仕様を見てみましょう。
公式サイトにはFacebookに瓜二つなボタンとTというTwitterにそっくりなアイコンが組み合わさってます。これはどう見てもパクリとしか思えないデザインですが・・・日本だけじゃなくてアメリカでも平然と類似デザインにすることってよくあるのかな？
話は戻ってTumblr設置ようのコードは以下のようになっていました。
<a class="tumblr-share-button" data-color="blue" data-notes="right" href="https://embed.tumblr.com/share"></a> <script>!function(d,s,id){var js,ajs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://assets.tumblr.com/share-button.js";ajs.parentNode.insertBefore(js,ajs);}}(document, "script", "tumblr-js");</script>
ここもJavaScriptでサーバーからボタンを読み込む仕様となっています。肝心のクエリがどうなっているのか見えません。
試しにボタンサイトの実働リンクをクリックしてURLを取得してみました。リダイレクトが設定されていて一瞬のことなのでコピーするのが難しい！
Tumblrのアイコンを見てみると3種類あって「Post」「Follow」それと「任意のテキスト」があるんですね。
私はTumblrを利用したことがないのでこれは想像するしかないのですが「Post」はおそらく日記の投稿画面で「Follow」はそのブログの購読かブックマークするか何かだと思うのです。apiでアプリを作ることも可能だそうです。自分のブログにTumblrボタンを設置する目的は、その記事について何か投稿を行うことか、フォローするかのどちらかしかありませんし、Postはよほど良いネタを書いているブログじゃないと実用的ではなさそうです。そういうことで「Follow」ボタンを作ってみることにしました。まずはアドレスのクエリを取得したのでそれをもとにBlogger用にTumblrのボタンを作ってみたいと思います。
参考にしたページは次の通りです：Tumblr share url
Tumblrに関してはアカウントを持っておらず動作結果の検証は行ってませんのでダメでも文句は言わないようにしましょう（汗）
省略しますが、結局は私が書きました「ユーザー名」をあなたのTumblrのユーザー名に指定することでリンク自体は作れると思います。詳細はわざわざ会員登録をしてまで調べたいとは思えませんが…もしかしたらURLをスクラップする方法があるかもしれません→後ほどできました。今回の調査で私はTumblrに対してネガティブな印象しか受けませんでしたので説明はこれで終わりたいと思います。Tumblrのことですから、おそらくこのようなボタンをわざわざ設置しなくてもユーザーが自分でスクラップできる仕組みを用意していると思いますのでわざわざブログにボタンを設置する必要はないかもしれません。
ほかにはインスタグラムとかいろいろあるらしいですが、これまで私が説明してきた方法を使えばだれでも簡単にシェアボタンを設置することができると思います。
試しにボタンサイトの実働リンクをクリックしてURLを取得してみました。リダイレクトが設定されていて一瞬のことなのでコピーするのが難しい！
Tumblrのアイコンを見てみると3種類あって「Post」「Follow」それと「任意のテキスト」があるんですね。
私はTumblrを利用したことがないのでこれは想像するしかないのですが「Post」はおそらく日記の投稿画面で「Follow」はそのブログの購読かブックマークするか何かだと思うのです。apiでアプリを作ることも可能だそうです。自分のブログにTumblrボタンを設置する目的は、その記事について何か投稿を行うことか、フォローするかのどちらかしかありませんし、Postはよほど良いネタを書いているブログじゃないと実用的ではなさそうです。そういうことで「Follow」ボタンを作ってみることにしました。まずはアドレスのクエリを取得したのでそれをもとにBlogger用にTumblrのボタンを作ってみたいと思います。
- <a href="https://www.tumblr.com/register/follow/ユーザー名" /a>
- <a class='あなたがカスタマイズしたCSSクラス名' expr:href='"https://www.tumblr.com/share/link?url=" + data:post.url' target='blank_'>Tumblr</a>
多分このFollowというのは基本的に個別のページじゃなくてどうやら登録ユーザーをフォローするもののようです。ですがBloggerのhtmlページをブックマークする用のリンクも何とか作ることができました。
Tumblrの使い方を日本語検索すると検索結果の上位にゴミみたいなページしかでて来なかったしJavaScriptをオンにしないと画像が見れない意地悪なページも多かったので結局わかりませんでした。最終的には海外のウェブサイトにリンク方法がありましたのでそれをもとに記述しました。
参考にしたページは次の通りです：Tumblr share url
Tumblrに関してはアカウントを持っておらず動作結果の検証は行ってませんのでダメでも文句は言わないようにしましょう（汗）
省略しますが、結局は私が書きました「ユーザー名」をあなたのTumblrのユーザー名に指定することでリンク自体は作れると思います。詳細はわざわざ会員登録をしてまで調べたいとは思えませんが…もしかしたらURLをスクラップする方法があるかもしれません→後ほどできました。今回の調査で私はTumblrに対してネガティブな印象しか受けませんでしたので説明はこれで終わりたいと思います。Tumblrのことですから、おそらくこのようなボタンをわざわざ設置しなくてもユーザーが自分でスクラップできる仕組みを用意していると思いますのでわざわざブログにボタンを設置する必要はないかもしれません。
ほかにはインスタグラムとかいろいろあるらしいですが、これまで私が説明してきた方法を使えばだれでも簡単にシェアボタンを設置することができると思います。
次回はすべてのシェアボタンのデザインとBloggerへの設置方法について考えてみたいと思います。お疲れ様でした。
尚、ソースをご利用の際にはブログなどでこのページをリンクして紹介していただくか、ソーシャルボタンを押して反応してください。無反応での利用はあなた自身に自業自得の害が及ぶでしょう（苦笑）
