Webの記録

スマホ用サイトに「LINEで送る」ボタンを設置してみる

投稿日:

この記事は約 3 分で読めます。

Lineで送る

スマホ向けに情報を発信しているサイトなど、あると便利なシェアボタン。

いつの間にかに「LINEで送る」ボタンが出来ていたのですね。

ひとまず自分用に記述方法を2種類メモします。


設置方法

LINEが提供している「LINEで送るボタン設置方法」のページにボタン素材も、記述方法も書かれています。

簡単な記述方法2つ、以下のように書けばできました。


1.決まった中から選択・記述で簡単に設置する方法

LINEで送るボタン設置方法

//サンプルコード(LINEで送るボタン設置方法のページで、該当箇所を入力すると以下のようなコードが出てきます。)
<span>
<script type="text/javascript" src="//media.line.me/js/line-button.js?v=20140411" ></script>
<script type="text/javascript">
new media_line_me.LineButton({"pc":false,"lang":"ja","type":"d","text":"ここに入れたいテキストを入力","withUrl":true});
</script>
</span>

ボタンを5種類から選んだ後に入れたいURLやテキストを入力するだけで、scriptタグを自動で生成してくれます。
何も考えずにすぐにできるので、一番簡単な方法です。


2.独自で用意したボタンを設置する方法

独自でボタンを用意した時は、こちらの記述ができます。
ボタンのサイズや位置を調整したりが普通にhtmlとcssでできるので、ちゃんと意図したようにデザインを整える場合はscriptより、こちらの方が確実にできます。


<a href="http://line.me/R/msg/text/?ここにエンコードしたテキストやURLを入れる"><img src="画像のパス" width="画像の横幅" height="画像の高さ" alt="LINEで送る等のテキストを入れる" /></a>

※エンコードは、「みんなの知識 ちょっと便利帳」さまを利用させて頂きました


参考にさせて頂いたサイト

「LINEで送る」ボタン設置以外にもSNSボタンの設置をしたのですが、ソースコードは以下の参考にさせて頂いたサイトさまの情報そのまま・・・だったので、今回はLINEのみにしておきます。(いつか書くかも?ですが。。。)

-Webの記録
-, , , , ,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

This blog is kept spam free by WP-SpamFree.

関連記事

no image

無料で簡単!アイコンフォント「Font Awesome」を使ってみた

この記事は約 1 分で読めます。 先日SNSアイコンをつけた時に、アイコンフォント「Font Awesome」を使用しました。 無料で、初めてでも簡単に使えるアイコンフォント「Font Awesome …

no image

WordPress ソーシャルブックマークのボタンを付けてみた

この記事は約 1 分で読めます。 何気によく見掛けるTwitterやFacebookなど、ソーシャルブックマークのボタン。 1つ1つ設定するのは、面倒なのでまとめて複数のサービスのボタンを簡単に取り付 …

no image

苦手なJavaScriptをイチから勉強してみる【記述の基礎編】

この記事は約 1 分で読めます。 苦手なJavaScriptをイチから勉強してみる【基本準備編】の続きとしてメモします。 イチから「JavaScript」を学び直しをする為に記録を残しています。少しず …

Basic認証を簡単に設置する方法

この記事は約 1 分で読めます。 特定の人にだけ公開する場合、IDとパスワードを用意する「Basic認証」という方法でアクセス制限をするのができます。 「Basic認証」で必要な「.htaccess」 …

no image

苦手なJavaScriptをイチから勉強してみる【基本準備編】

この記事は約 1 分で読めます。今更なんですが、実はJavaScriptはちょっと苦手です。。。 jQueryのライブラリーを使って、部分的にいじる事はあっても・・・何となく「JavaScript」っ …