Warning: include(/home/users/2/lolipop.jp-a-virtual/web/dhmo/dhmo/wp-content/advanced-cache.php): failed to open stream: No such file or directory in /home/users/2/lolipop.jp-a-virtual/web/dhmo/dhmo/wp-settings.php on line 74

Warning: include(/home/users/2/lolipop.jp-a-virtual/web/dhmo/dhmo/wp-content/advanced-cache.php): failed to open stream: No such file or directory in /home/users/2/lolipop.jp-a-virtual/web/dhmo/dhmo/wp-settings.php on line 74

Warning: include(): Failed opening '/home/users/2/lolipop.jp-a-virtual/web/dhmo/dhmo/wp-content/advanced-cache.php' for inclusion (include_path='.:/usr/local/php/5.4/lib/php') in /home/users/2/lolipop.jp-a-virtual/web/dhmo/dhmo/wp-settings.php on line 74
【これは使える】LINEで指定の値を送る方法|LINEで送るボタンの設置方法と応用の具体的な書き方 – Androidアプリつくったった

【これは使える】LINEで指定の値を送る方法|LINEで送るボタンの設置方法と応用の具体的な書き方

シェアする

なぜLINEのボタンなのか?LINEで送るボタンの設置方法と応用

スマホでの閲覧が増えてきた昨今、Webページの紹介はその手軽さから
メールよりLINEが選ばれることが多くなってきています。
シェアする

▼ LINEで送る場合の手順を確認してみましょう。

◎ LINEでページをシェアするフロー
1 『LINEで送る』をタップします
2 LINEが起動(LINEがインストールされている必要があります)
3.シェア先を選択(トークで友達に送るor自分のホームに送る)します。
4.送信されます。

複数の仲間で情報共有するのであれば圧倒的にLINEの方がスムーズに
情報共有できます。『LINEで送る』は今年初めに一部技術者だけでなく
一般公開されたので、今やサイトへの設置が常識的になりつつあります

▼ プラグインだけでなく自力で設置できるようになり仕組みを理解しましょう。

LINEで送るボタンの設置方法と応用の具体的な書き方

それでは具体的に、書き方(ソース)を紹介していきます。
LINEボタン設置方法

公式にはこのページに書かれた内容です。

パターン1 スマートフォンのみ表示させるパターン

“pc”:falseは、見た目通り『パソコンからは見えません』という意味です。
ただ、trueにしてパソコンパソコンから見えるようにしたところで
LINEの公式ページ行きになるだけなので、
特別な理由がない限りfalseでいいのではと思います。
linebutton_88x20
「LINEで送る」ボタン

 headerへの記載
<script type="text/javascript" src="http://media.line.naver.jp/js/line-button.js"></script>

 

Bodyへの記載
<script type="text/javascript">// <![CDATA[
new jp.naver.line.media.LineButton({"pc":false,"lang":"ja","type":"a"});
// ]]></script>

『小さいボタン』にしたい場合は、(正方形の小さなアイコン)
『”type”:”a”』の部分を『”type”:”b”』と書き換えましょう。
見た目はこんな感じです。(大きさは20×20(px)なのでもう少し小さいです。)

linebutton_20x20

パターン2 サイトのタイトルとURLを送る

スマホでもっとも利用シーンが多いパターンではないでしょうか?
スペースの関係上ボタンタイプも”b”が採用される事が多いです。

<script type="text/javascript">// <![CDATA[
new jp.naver.line.media.LineButton({"pc":true,"lang":"ja","type":"b"});
// ]]></script>
パターン3 決まった内容(文章)を入れる

LINEで送った際の見た目の分量も意識して指定の文章を送りたい場合は以下の
方法で設定するといいでしょう。書き方としては

一個にまとめた形式が便利

です。以下のように書きます。
 
”キーワード”となっている箇所を指定したい文章内容に書き換えましょう。

<span>
<script type="text/javascript" src="//media.line.naver.jp/js/line-button.js?v=20131101"></script><script type="text/javascript">// <![CDATA[
new jp.naver.line.media.LineButton({"pc":false,"lang":"ja","type":"a","text":"キーワード","withUrl":true});
// ]]></script>
</span>

選べるボタンタイプ

ボタンタイプは以下のように指定できますが
簡単にまとめると以下のようになります。
 
a → 細長
linebutton_88x20
b → 小
linebutton_20x20
c → 中
linebutton_30x30
d → 大
LINEボタン設置方法
e → 文字入り
linebutton_36x60

WordPressの記事内でjavascriptを動かすためには

方法1 プラグインでねじ込む

プラグイン『inline-javascript』を導入してタグで囲むとでてきます。
表示がその影響で崩れてしまった場合はプラグイン『Custom CSS and JS』
で調整することができます。
(inline-javascriptは

ソースを表示するプラグインなど
一部プラグインと相性が悪いので使用条件に注意して導入しましょう)
<h5>function.phpに手を加える</h5>
もっと根本的にjavascriptを読み込めるようにしたい場合はfunction.phpに
以下を記載するとよいでしょう。

<!--?php // header内に任意のコードを読み込む function head_original_load(){     if(is_single() || is_page()){         if($head_original_code = get_post_meta(get_the_ID(), 'head_load', false)){             foreach($head_original_code as $head_code){                 echo $head_code . "\n";             }         }     } } add_action('wp_head', 'head_original_load'); ?-->
リンク形式で貼り付ける

function.phpをいじるのも怖いし、プラグインを組み合わせた調整も難しい
なんてときは、サイズぐらいしかいじれなくなりますが以下の方法もオススメです。

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

 

最後にこれを応用して任意の値を送ってみましょう。
“任意のテキスト”の部分を変更すれば実現可能です。
 

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

 

以上です。
 

参考になれば幸いです。

▼ 関連記事・最近の投稿は記事の下にあります。コチラもご参考ください。

 

About the Author

dhmo
Author:DHMO(ディベロッパー名) 仕事では自社サービス・メディアの開発を行ってます。 趣味でAndroidアプリ製作を行っています。 カラオケではランキングバトルにはまっております。 Mail: dihydromooxide7@gmail.com 

Be the first to comment on "【これは使える】LINEで指定の値を送る方法|LINEで送るボタンの設置方法と応用の具体的な書き方"

Leave a comment

Your email address will not be published.


*