公開日：
こんにちは、チームSKYの児島です。
現在、AdSense Japanで開催されている、AdSense Big Challengeにて、SNSからの流入を増やすミッションに取組中です。
そこで、wordpressで運営する１つのブログに「LINEで送る」ボタンを設置することにしました。今日はその方法をご紹介したいと思います。
このページの目次
・「LINEで送る」ボタンの設置 基本
まず、「LINEで送る」ボタンを設置するにあたって、やりたいことが３つ。
１、オリジナルLineボタンを使う。
２、ページURLをシェア。
３、任意のメッセージでシェア。
これは、LINEの公式ページで詳しく解説されていますが基本のコードは次のように書きます。
<a href="http://line.me/R/msg/text/[任意のメッセージ] [ページURL]"> <img src="[ボタン画像のURL]" alt="LINEで送る"> </a>
[任意のメッセージ]と[ページURL]の部分を自由に編集して埋め込む事ができます。
wordpress の独自関数で埋め込む
wordpressの場合、独自関数を用いて次のように記述すると、[任意のメッセージ] にページのタイトル、[ページURL]に現在のページのURLを埋め込む事が出来ます。
<a href="http://line.me/R/msg/text/?<?php the_title(); ?>%0D%0A<?php the_permalink(); ?>"> <img src="[ボタン画像のURL]" alt="LINEで送る"> </a>
the_title(); 現在の投稿のタイトルを取得
the_permalink(); パーマリンクのURLを表取得
・任意のメッセージを埋め込む
通常はこれで良いのですが、今回やりたいのは、
「３、任意のメッセージでシェア。」
ページタイトルではなく、予めこちらが用意したテキストで、シェアしてもらえるよう設定します。
単純には、「 http://line.me/R/msg/text/ 」の後ろに任意のテキストを埋め込めば良いのですが、実はここに、日本語等のマルチバイト文字をそのまま埋め込むと、シェアされた時に文字化けすることがあります。
正しく表示するには、埋め込みたい文字列を一旦エンコードする必要があります。
そこで、PHPの urlencode(); 関数を用いて次のように記述します。
<a href="http://line.me/R/msg/text/?<?= urlencode("[任意のメッセージ]"); ?> [ページURL]">
<img src="[ボタン画像のURL]" alt="LINEで送る">
</a>
さらに、任意のメッセージは、変数を設定します。私のサイトはクイズのサイトですので、「この問題解ける？」というメッセージを設定します。
$share_message = "この問題解ける？";
ここで何故、わざわざ一度変数にするのか？
普通SNSのボタンを設置する際、LINE１つだけ置くことは少ないと思います。FBやTwitterなど他のボタンと一緒に置く事でしょう。ここでメッセージを変数に設定しておけば、他のSNSボタンにも流用できるようになります。
変数を urlencode("");の引数にあてがいます。
urlencode("$share_message");
これで、メッセージ部分は完成です。次にURLを設定します。
・URLを埋め込む
wordpressの関数 the_permalink(); を用いることもできますが、せっかくここまで書いたので、URL取得部分もwordpressの関数を使わず、自力で作成してみます。
方法は簡単、$_SERVER グローバル変数を用いて、現在のページのURLを取得します。
$share_url = $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"];
ここも前述したのと同じ理由で、一旦変数にします。
表示部に変数をあていよいよ完成です。
・完成ソースコード
<?php
$share_url = $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"];
$share_message = "この問題解ける？";
?>
<a href="http://line.me/R/msg/text/<?= urlencode("$share_message"); ?> http://<?php echo "$share_url"; ?>.html">
<img src="[ボタン画像のURL]" alt="LINEで送る">
</a>
これなら、wordpress以外のサイトでもそのまま使う事が出来るようになります。
ながながと説明しましたが、「完成ソースコード」をコピペするだけでも設置は可能です。
是非お試しください。
そして、「これよりもっといい方法があるよ」というご意見もお待ちしています。
タグ
