WordPressカスタマイズ

スマホ向けサイトにLINEで送るボタンを設置!タイトルにハッシュタグの「#」があると途中で切れる件の対応版を公開![WordPress]

更新日:


via: LINEで送るボタン

@Mori2ndです。巷で話題のLINEで送るボタン。当ブログのスマートフォン向けサイトにも設置しました!

スポンサードリンク

公式サイトの記述例を元にWordPressのほうのコードを追加して、いざ試してみたところある事に気付いたのです。

なんと記事タイトルにハッシュタグの「#」が入っているとLINEで送った情報を開いたときに、ハッシュタグ以降が切れて無くなっているんです。。


試した記事: あけましておめでとうございます!「ブロガーとしての新年の抱負」 #2013ambitions

企画ものでハッシュタグを付けているとこのように残念な結果となりました。。

当ブログではハッシュタグの「#」がある場合も正しくLINEで送れるように対応しましたので、ご紹介させていただきます!

ハッシュタグの「#」があると途中で切れる?

先ほどもご説明したようにハッシュタグの「#」があると、この文字以降は途中で切れて無くなってしまいました。

なんでそうなるのか?調べてわかりましたが、公式サイトの記述例だとハッシュタグの「#」がパーセントエンコーディングされないからですね。

公式サイトにあるパラメータの説明に「パーセントエンコーディングしたテキスト情報を指定する」と書いてありますので、「#」含めてパーセントエンコーディングすればOKということになります。

パーセントエンコーディング(utf-8)したテキスト情報の値を指定します。
原則、ページタイトル、ページURLの指定が可能です。
ページに関係ない情報の指定はガイドラインで禁止されています。

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

記事タイトルをパーセントエンコーディングする記述例

というわけで、パーセントエンコーディングするコードを追加しましたので、よろしければ参考にしてみてください。

記事タイトルのところを

下のコードに置き換えています。

あとはご自身の環境に合わせてアレンジしてみてくださいね。

URLエンコードについてはこちらを参考にしています。

rawurlencode: RFC 3986 に基づき URL エンコードを行う (URL 関数) - PHPプロ!マニュアル

返り値
-_.~ を除くすべての非アルファベット文字をパーセント 記号 (%)に続いて 2 つの 16 進数がある表現形式に 置き換えた文字列を返します。

修正後にLINEで送るボタンを実行するとハッシュタグの「#」以降も問題なく送れました!



試した記事: あけましておめでとうございます!「ブロガーとしての新年の抱負」 #2013ambitions

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

おさらいとして、LINEで送るボタンの設置方法をまとめておきます。

まずは公式サイトからボタン画像をダウンロード。好みの画像を選んでください。

>>「設置方法|LINEで送るボタン」ページから画像をダウンロード

ダウンロードした画像をサーバーにアップロードして、

先ほど紹介した記述例の画像部分をアップロードした画像の内容に置き換えます。

▼この部分です。

さいごに設置したい場所にコードを追加したら出来上がりです!

当ブログではこのような設置になっています!(記事公開時)

おわりに

LINEの利用者はどんどん増えてきているようですね。

LINEを使って情報をやり取りする機会もこれから増えてくると思うので、このボタンがお役にたてるとうれしいです!

何かお気づきの点などあれば、ご連絡ください。

LINE LINE
価格: 無料 (記事公開時)
カテゴリ: ソーシャルネットワーキング
App Storeで詳細を見る

アプリをダウンロードする

設置方法|LINEで送るボタン
LINEで送るボタンは、スマートフォンWebサイト、またはアプリから簡単にLINEで情報をシェアすることができるボタンです。 WebページのURL、ページタイトルを送ることができます。

スポンサードリンク

ピックアップ記事

1

機種変更時に最適なiPhoneのバックアップ方法をご紹介しています。iCloudバックアップではなく、iTunesの暗号化バックアップから復元することでスムーズにデータ移行できます。各アプリのIDやパスワードも引き継ぐにはこの方法がおすすめですよ。詳しい手順も解説していますので、ぜひ参考にしてみてくださいね。

iPhone・iPadのAirDropの使い方を解説 2

iPhone・iPadなどApple製品同士で使えるAirDropはデータの受け渡しにとても便利な機能です。写真・動画・PDFなどのコンテンツを送受信する方法と利用する際の注意点も合わせてご紹介します。

3

AUKEYのUSB充電器「72W ACアダプター PA-Y12」を購入してみました。最大60WのUSB Type-C PD(Power Delivery)対応でワット数の異なるパソコンにもパワフル充電。追加のUSB-Aポート2つでスマホやタブレットの充電にも大活躍。使ってみた感想をご紹介します。

4

パソコン内のデータ整理とバックアップ目的でポータブルハードディスクを購入してみました。それがウエスタンデジタルの「WD Elements Portable」です。大容量なのに小さくて収納や持ち運びが楽です。商品の特徴や使ってみた口コミもご紹介します。

5

快適なパソコン作業環境を求めて21:9ウルトラワイドモニターを購入してみました。それがLGエレクトロ二クスの「29UM69G-B」29インチです。1枚のディスプレイでスクエアタイプのモニター2枚分の広さを実現。ウィンドウを並べての作業が捗りますね!商品の特徴や使ってみた感想をご紹介します。

-WordPressカスタマイズ
-, ,

Copyright© ディライトモード , 2019 All Rights Reserved.