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.

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

no image

MacでもWindowsでもOKな「AMPPS」でローカル環境を作ってみる

この記事は約 1 分で読めます。 以前、ローカル環境では「XAMMP」と「MAMP」の環境を作ってみました。 今回は、MacでもWindowsでも使える「AMPPS」でローカル環境を作ってみました。 …

no image

WordPressでシンプルな自作SNSボタンを設置してみた

この記事は約 1 分で読めます。 ブログの記事下に、いろんなSNSアイコンをよく見かけます。 このブログにも付けていたのですが、時々ちょっと重たさを感じていたのですが、先日書いた記事「WordPres …

no image

WordPress 「wp_head」を入れて上部に隙間ができた時

この記事は約 1 分で読めます。 WordPressでオリジナルテーマを作っていて、「wp_head();」を入れた途端・・・ブラウザ上部に28pxの隙間が出来る現象が起きました。 ブラウザによっては …

no image

WordPressサイトでRSSフィードボタンを設置してみた♪

この記事は約 1 分で読めます。 何気にWebサイトで、オレンジ色のRSSフィードボタンを見掛けます。 Webサイトの新着情報配信をする為のものなんですが、私のサイトでは今までボタンを設置してませんで …

no image

WordPressログイン画面にオリジナルロゴを表示させる

この記事は約 1 分で読めます。 パッとひと目でそのサイトだと分かりやすくしたいなぁと思って、ログイン画面のロゴをオリジナルに変更してみました。 WordPressのバージョンによって、ロゴ部分のサイ …