ライフハック読み物

[Blogger]日本語テンプレートVaster2にLINEで共有するボタンを実装する(HTML編)

夜なべしてカスタマイズ。LINEで共有するボタンを設置しました。

追記：記事公開数時間後
BloggerのHTTPSリダイレクトがオフになっている状態でのみ使用可能なHTMLコードを書いてしまっていたので修正しました。

当ブログは今のところVaster2を使用させてもらっています。

Blogger、Vaster2がなかったら使ってません。

日本語の対応テンプレートが少ないことも含め非常に助かっています！

…の…ですが、pocketは昔read it laterだった頃に使わせて貰ってたきりで、個人的には全然使わない…。

そこで、夜なべしてカスタマイズしてLINEで共有するボタンに変更しました。

色々調べ回ったんですが、Vaster2の共有ボタンを変更してLINEボタンを作る方法は見当たらず。

非常に苦しんだので後から同じことする人のためにメモしておきます。

コピペでそこそこ簡単に導入できるんですが、自己責任でお願いします！

まず、Vaster2はこちら。めちゃ便利です。ブログやったことない人も簡単に導入できるのでやってみて。（当サイトがテンプレートまんまなのがバレる）

Vaster2|レスポンシブ対応済みのblogger日本語テンプレート
http://toumaswitch.com/vaster2/

以下手順です！

Vaster2導入済みという前提で話を勧めていきます。

HTML編集ページまでたどりつこう

Bloggerの自分のページにアクセス。

左のカラム、投稿、統計とある中から下の方、テーマからHTMLの編集。

追記）…の前に、HTTPSリダイレクトはオンになっていますか？

こちらがオフになってるとこの記事で作るボタンがへんな挙動します。オンにしていただくことを推奨します！

検索して編集箇所を探そう

<ul class='clearfix'>

と書かれたタグを検索します。

ここに

Twitter
facebook
google1
hatebu
pocket

の<li＞タグがあると思います。

ここからが本番なんですが

先程出てきたタグ。このうち使わなさそうなものを一つ、

<li class='line'><a expr:href='"http://line.me/R/msg/text/?" +data:post.title + "｜"+ data:post.canonicalUrl' onclick='javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=500,width=600');return false;' target='_blank'><i class='fa fa-comment-o'/><br/>LINE</a></li>

に書き換えます。

僕はpocket絶対使わねえなと思ったのでpocketの枠を使いました。

bloggerの編集ページのがちょっと見やすいのでスクショペター。

<li class='line'><a expr:href='"http://line.me/R/msg/text/?" +data:post.title + "｜"+ data:post.canonicalUrl'

ここの設定めちゃくちゃ時間かかってます。そんでたぶん綺麗じゃないのでもっと良いの合ったら教えて下さい。

http://line.me/R/msg/text/?[任意のテキスト][共有したいURL]

の形にできればいいみたいなんですが、?を忘れてハマったのと、[任意のテキスト][共有したいURL]の[]をどうするのか分からなくてめっちゃハマってました。結局共有したいURLを指定してやったら投稿時にURLが入ってくるんですが、~~実際投稿するとURLが二重に入ってきて極めてかっこわるいです。~~

追記）これはHTTPS接続ではない、HTTPの記事内で共有ボタンを押したときのみ発動します。URLとか指定してあげないとむしろHTTPS接続で表示された記事では共有ができません。

僕としては許せないので[任意のテキスト][共有したいURL]の部分はまるっと削りました。

~~何度もテスト投稿送らせてもらった友人には頭が上がらない…~~

リンクだけが共有する形でトークなどに貼れるようになっています。

また、開くウィンドウのサイズが

height=500,width=600

のところで指定できるんですが、これは通常より高くしてあります。

LINEの投稿ウィンドウをテンプレートそのままの数字で出すと投稿ボタンが消えます。

<i class='fa fa-comment-o'/>でフォントアイコンのそれっぽいのを指定しています。

<br/>LINE</a>　のところは表示される文字です。ガイドラインでこれかLINEで送るが指定されていました。お好みで。