ひと工夫した、LINE(ライン)で送るボタンをブログに設置する方法

2012/12/27 Life Web Wordpress

友達なんかとのプライベートな連絡はほとんどラインでやっちゃうようになりました。

おもしろいサイトとかラインでシェアできたら良いなと考えていたところに、
ようやく公式でラインで送るボタンが発表されましたね!

LINEで送るボタン 設置方法公式ページ
http://media.line.naver.jp/howto/ja/

~方法なんて大げさなタイトルにしていますが、URL先に書いてある方法で楽勝さんですね。

ちなみにこのブログには、一番左の88px×20pxって画像のボタンを設置してみました。
(実際はレティナディスプレイ対応になってるんで176px×40pxなんですけどね)

ワードプレスのブログなので以下のソースを貼ればすぐ機能しました。軽く感動!

<a href="http://line.naver.jp/R/msg/text/?
<?php the_title(); ?>%0D%0A<?php the_permalink(); ?>">
<img src="[ボタン画像のURL]" width="[ボタン幅]" height="[ボタン高さ]" alt="LINEで送る" /></a>

でも、このままだとですね、
ラインアプリに飛ぶ→情報をシェアする先を選ぶ→ブラウザに戻る→ライン公式になっとる!!!になっちゃいます。

なのでtarget=”=blank”をaタグに入れてあげてみました→だめでした。

そこでダメ元で、普段あまり使わない表記ですが、target=”new”を入れたら成功!
ブラウザに戻ってもちゃんと元いたページにいてくれます。

自分の環境のiPhone5ではこれで上手くいきましたが、Androidは持ってないのでよくわかりません。
ちなみに、周りの人のAndroidで試すと別ウィンドウ扱いにはなりませんでした。

iPhoneだけでも良いですよね!!

それと、公式サイトの通常サイトの場合の表記例の

<a href="http://line.naver.jp/R/msg/text/?
LINE%E3%81%A7%E9%80%81%E3%82%8B%0D%0Ahttp%3A%2F%2Fline.naver.jp%2F">
<img src="[ボタン画像のURL]" width="[ボタン幅]" height="[ボタン高さ]" alt="LINEで送る" /></a>

これを理解するのに、一瞬戸惑ったので、軽く解説つきバージョンにしておきます。(自分用のメモにもね!)

<a href="http://line.naver.jp/R/msg/text/?[ここにライン側に表示したいテキスト]
%0D%0A[ここにURL]" target="new">
<img src="[ボタン画像のURL]" width="[ボタン幅]" height="[ボタン高さ]" alt="LINEで送る" /></a>

僕はソースとか弱いので、このぐらい日本語じゃないと、一瞬固まっちゃいます…

【注意!】
まだ設置したばかりなのと、よく調べていないので、
お仕事なんかで使う場合がある人は自己責任でよく調べてから設置してくださいね!
(target=”=new”あたりなんて特に!)

すでにこのブログの記事下にも設置していますが、PCでラインなんてだれも使ってないだろってことで
現状はスマートフォンでのみラインで送るボタンが表示されるようにしています。

スマートフォンで確認してラインで送ってみたらいいじゃないっすか!

ここまで書いて、ブログをレスポンシブ化している途中だった事を思い出して少し恥ずかしいです。
しかし、気にせずポストです。

ちなみにスマフォのみ表示のソースはこんなやり方です。(全て半角にしてください。)

<?php if (wp_is_mobile()) :?>
この中にスマフォだけで表示したいの入れたらOK!!
<?php endif; ?>

あーまたラインポップのおねだりがきた。

Facebookシェア B!