よく見かける「LINEで送る」ボタンの作り方です。昨日、営業を通してクライアントよりスマートフォン版HPに付けたい、という事で実装する事になりました。
この記事で書くのはボタンの作り方は、ワンクリックでアプリが起動するテキストリンクを指していますので、それ以外をお求めの方はLINEの設置方法をご覧ください。
作り方の手順は以下の通りです。
1. LINEで送るためのデータをエンコードする。
2. 書式に当てはめたURL作成。
3. URLを貼る。
簡単ですね。もっと簡単に作れるフォーム式のものもあるかとは思いますが、まずはアナログで作ってみようかと思います。
1. LINEで送るためのデータをエンコードする。
このブログタイトルとURLをエンコードしてみます。
例：ブログテンプレート制作目録 http://blog.town-nets.com/blogtemplate/
これをエンコードすると以下のようになります。エンコードできるところはこちら
何が書かれているか分からないですね。見事に%なんちゃらに。。これがURLエンコードです。次にURLを作成します。
2. 書式に当てはめたURL作成。
LINEで送るには書式があります。参考にするにはLINEの設置方法をご覧ください。
以下の通りの書式です。
<CONTENT TYPE>にはtextとimageがありますが、今回はテキストリンクを作成するため、<CONTENT TYPE>をtextにします。<CONTENT KEY>には先ほど作成したURLエンコードをペーストしてください。
で、出来たのが以下の通り。
ちなみにこのURLはアプリが起動します。もちろんスマートフォンにアプリを入れてなければ起動しませんが。。
3. URLを貼る。
<a>タグで簡単にやっちゃいましょう。
こんな感じに。
以上でLINEで送るボタンの作成は終了です。装飾などは適当に各自でやっちゃってください。
