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

右クリックで独自メニューを出して画像のコピーガード

この記事は約 1 分で読めます。 画像のコピーガードを3通り試しています。 今回は「右クリックで独自メニューを出す」方法を試してみました。 「右クリック禁止で画像のコピーガード」、 「透明画像を置いて …

no image

WordPress ナゾのスマイルマーク

この記事は約 1 分で読めます。 あんまり気にしてなかったんだけれど、フッターの下にとても小さなナゾのスマイルマークがありました。 今回、オリジナルテーマを作成していて・・・何となくフッターの下にのぞ …

WordPressが勝手に挿入する「pタグ」を自動挿入させない方法

この記事は約 1 分で読めます。 WordPressには「auto paragraph」という、自動でpタグを挿入してくれる機能があります。 そのため、意図しない見た目になってしまうことが、時々起きて …

no image

WordPressでRSSフィードを便利に使うプラグイン。

この記事は約 1 分で読めます。 以前、「WordPressサイトでRSSフィードボタンを設置してみた♪」でRSSフィードボタンを設置しました。 その後、RSSフィード関係で便利そうなWordpres …

no image

WordPress 「IE6 No More」プラグインでアラートを表示させてみた。

この記事は約 1 分で読めます。 IE6ブラウザで見た時だけ、バージョンアップを案内する表示をさせたいと思います。 幾つかWordpressのプラグインで見つけたのですが、表示が上手くいかないものもあ …