via: LINEで送るボタン
@Mori2ndです。巷で話題のLINEで送るボタン。当ブログのスマートフォン向けサイトにも設置しました！
公式サイトの記述例を元にWordPressのほうのコードを追加して、いざ試してみたところある事に気付いたのです。
なんと記事タイトルにハッシュタグの「#」が入っているとLINEで送った情報を開いたときに、ハッシュタグ以降が切れて無くなっているんです。。
試した記事: あけましておめでとうございます！「ブロガーとしての新年の抱負」 #2013ambitions
企画ものでハッシュタグを付けているとこのように残念な結果となりました。。
当ブログではハッシュタグの「#」がある場合も正しくLINEで送れるように対応しましたので、ご紹介させていただきます！
ハッシュタグの「#」があると途中で切れる？
先ほどもご説明したようにハッシュタグの「#」があると、この文字以降は途中で切れて無くなってしまいました。
なんでそうなるのか？調べてわかりましたが、公式サイトの記述例だとハッシュタグの「#」がパーセントエンコーディングされないからですね。
公式サイトにあるパラメータの説明に「パーセントエンコーディングしたテキスト情報を指定する」と書いてありますので、「#」含めてパーセントエンコーディングすればOKということになります。
パーセントエンコーディング(utf-8)したテキスト情報の値を指定します。
原則、ページタイトル、ページURLの指定が可能です。
ページに関係ない情報の指定はガイドラインで禁止されています。
記事タイトルをパーセントエンコーディングする記述例
というわけで、パーセントエンコーディングするコードを追加しましたので、よろしければ参考にしてみてください。
1 2 3 4 | ; html-script: false ] <a href="http://line.naver.jp/R/msg/text/?<?php $title = the_title_attribute('echo=0'); $title = rawurlencode($title); echo $title; ?>%0D%0A<?php the_permalink(); ?>"> <img src="[ボタン画像のURL]" width="[ボタン幅]" height="[ボタン高さ]" alt="LINEで送る" /> </a> |
記事タイトルのところを
1 2 | ; html-script: false ] <?php the_title(); ?> |
下のコードに置き換えています。
1 2 | ; html-script: false ] <?php $title = the_title_attribute('echo=0'); $title = rawurlencode($title); echo $title; ?> |
あとはご自身の環境に合わせてアレンジしてみてくださいね。
URLエンコードについてはこちらを参考にしています。
rawurlencode: RFC 3986 に基づき URL エンコードを行う (URL 関数) - PHPプロ！マニュアル
返り値
-_.~ を除くすべての非アルファベット文字をパーセント 記号 (%)に続いて 2 つの 16 進数がある表現形式に 置き換えた文字列を返します。
修正後にLINEで送るボタンを実行するとハッシュタグの「#」以降も問題なく送れました！
試した記事: あけましておめでとうございます！「ブロガーとしての新年の抱負」 #2013ambitions
LINEで送るボタンの設置方法
おさらいとして、LINEで送るボタンの設置方法をまとめておきます。
まずは公式サイトからボタン画像をダウンロード。好みの画像を選んでください。
＞＞「設置方法｜LINEで送るボタン」ページから画像をダウンロード
ダウンロードした画像をサーバーにアップロードして、
先ほど紹介した記述例の画像部分をアップロードした画像の内容に置き換えます。
▼この部分です。
1 2 | ; html-script: false ] <img src="[ボタン画像のURL]" width="[ボタン幅]" height="[ボタン高さ]" alt="LINEで送る" /> |
さいごに設置したい場所にコードを追加したら出来上がりです！
当ブログではこのような設置になっています！(記事公開時)
おわりに
LINEの利用者はどんどん増えてきているようですね。
LINEを使って情報をやり取りする機会もこれから増えてくると思うので、このボタンがお役にたてるとうれしいです！
何かお気づきの点などあれば、ご連絡ください。
LINEで送るボタンは、スマートフォンWebサイト、またはアプリから簡単にLINEで情報をシェアすることができるボタンです。 WebページのURL、ページタイトルを送ることができます。