LINEで気に入ったページを教えたい！Bloggerで簡単に共有できるボタンを設置する方法とブックマークレット

2012/11/24　11:57

通話やメッセージを無料で利用できることから、利用者数が急速に拡大しているLINE

今までのSNSとは少し異なり、自分の連絡先に登録してある友人/知人と気軽に楽しむことができるのが特徴ですね。

今回は、Bloggerの記事を友達や知人に教えたいときに、あったら便利な『LINEで送るボタン』を設置する方法を紹介します。

この方法は公式のものではなく、今後正式に公開されるまでの暫定的なものです。
→ 2012/12/21 スマートフォン向けに正式に公開されました。

LINEってどんなサービス？

LINE

nanapiさんがLINEの基本から使い方まで丁寧に解説しています

LINEとは？からわかる – はじめてのLINEの使い方 – nanapi Web
LINEとは、スマートフォンで無料で音声通話ができたり、違うキャリア同士でも無料でメッセージが送ることができます。

すべてが無料ですが、パケット料だけは契約している携帯会社(docomoとかSoftbankとか)に対して支払う必要があります。

LINEの基本的な機能は主に2つあります。
  • 友達と音声通話をする
  • 友達とメッセージのやり取りをする
「LINE(ライン)」(iPhone)で初期設定する方法 – nanapi Web

個人的な感覚で言うと、リアルのつながりとTwitterなどのSNSを併せ持ったサービスで、気軽にやり取りできるのが特徴かなと感じています。

11月16日には、LINEの登録ユーザー数が世界で7,500万人を突破したようです。

利用する上で気を付けておくこと

運営会社はNAVERまとめで有名な「NHN Japan株式会社」
「NHN Japan 不正 – Bing」検索するとわかりますが、過去からいろいろと曰くがある会社です。

実際にアプリを起動すると、UDID（端末固有の番号）にアクセスして情報収集するようです。


Protect My PrivacyというJailbreak Tweakで確認

Protectすることで個人情報を渡さないように出来ますが、脱獄しないと利用できません。

iPhone 5などiOS 6以降の場合は、[設定]-[一般]-[情報]-[アドバタイズ]-[Ad Trackingを制限]をONにすることで対応できます。

LINEで送るボタンの設置方法

さて前置きが長くなりましたが、本題になります。

初めに、テンプレート › HTML の編集で<head>タグ内へ以下の記述をしておきます。
<link expr:href='data:blog.canonicalUrl' rel='canonical'/>
参考：link rel="canonical"によるURL正規化タグ——SEOにとって非常に重要な進歩（前編） | Web担当者Forum 

1．Blogger設定画面のレイアウトを開き「HTML/JavaScript」を追加/利用します。

中身は編集しませんので、フッターあたりにセットしておきましょう。

2．テンプレート › HTML の編集でウィジェットのテンプレートを展開にチェック

タイトルやidで検索して、その部分に移動します。

b:widgetタグに mobile=’yes’ を追記

3．<data:content/>タグの下</div>の前へ以下のように追記します。
<data:content/>

<b:if cond='data:blog.isMobile'>

     <a expr:href='&quot;line://msg/text/&quot; + data:blog.pageName + &quot; &quot; + data:blog.canonicalUrl' target='_blank'><img alt='LINEで送る' src='使用したい画像のURL' width='幅' height='高さ'/></a>

</b:if>
<data:content/>

<b:if cond='data:blog.isMobile'>

     <a expr:href='&quot;http://line.naver.jp/R/msg/text/&quot; + data:blog.pageName + &quot; &quot; + data:blog.canonicalUrl' target='_blank'><img alt='LINEで送る' src='[ボタン画像のURL]' width='[ボタン幅]' height='[ボタン高さ]'/></a>

</b:if>
ボタンの素材はこちら

設置方法｜LINEで送るボタン

<br />タグを実際の表示に合わせて適宜挿入してください。

4．テンプレート › モバイル テンプレートを選択

モバイル テンプレートを「カスタム」にします。
（レスポンシブデザインを用いて使用していない場合は必要ありません）

以上で設置完了です！



jQueryを使用して表示させる方法

1．<head>タグ内にjQueryを読みこませるタグを設置
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
2．<head>タグ内のjQueryを読みこませるタグの下に以下のように記述
<b:if cond='data:blog.isMobile'>

<script>

// <![CDATA[

var url = location.href; //現在のURLを取得

if (url.match(/html?m=1$/)) {

    var canonicalUrl = url.toString().replace('.html?m=1', '.html'); //mobile用のURL（?m=1をリプレイス）

} else {

    var canonicalUrl = url //レスポンシブデザインなどmobileテンプレートを使用していない場合

}

var title = encodeURIComponent(document.title); //タイトルを取得

(function () {

    $(document).ready(function () {

        var ins = $('.post-footer'); //class="post-footer"の部分を選択

        var add = '<a href="line://msg/text/' + title + ' ' + canonicalUrl + '" target="_blank"><img alt="LINEで送る" src="使用したい画像のURL" width="幅" height="高さ"/></a>';

        for (i = 0; i < ins.length; i++) {

            $(ins).eq(i).after(add); //指定した部分の後にタグを生成

        }

    })

}());

// ]]>

</script>

</b:if>
これは .post-footer の後に挿入されます。お好みでidやclassを変更してください。
以上で設置完了です！お疲れ様でした。

<b:if cond=’data:blog.isMobile’>を利用することで、モバイルビューの時だけ表示されるようになっています。レスポンシブデザインの場合は、CSSで調整してあげればOKですね！

LINEで送るボタンの使用方法


ボタンを押すとLINEが起動して送信先の選択画面になるので選択


タイトルとURLが自動的に挿入されます。

LINEに送るブックマークレット

実際に設置しているサイトは少ないので、この情報を友達に共有したいといった場合に、ブックマークレットを使ってあげるといいかと思います。

記事を書いていて気付いたので、サクッと作りました（＾－＾）

以下のLinkをiPhoneなどで開いて、ブックマーク→編集して追加してください。

LINEに送る
その他にも便利なブックマークレットがあるので、こちらもチェックしてみてくださいね！

Blogger