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

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

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

関連記事

no image

WordPress ローカル環境で作ったサイトの記事を簡単に本番サイトへ移す方法

この記事は約 2 分で読めます。 WordPressでサイト制作をする時。 XAMPPやMANPなどローカル環境で作ったサイトの記事を簡単に本番サイトへ移す方法をメモします。 ※Wordpressは既 …

no image

Webフォント「Google Web Fonts」を使ってみた

この記事は約 1 分で読めます。 だんだんと古いブラウザに対応しなくてよくなってくると、以前は画像だけで対応していたものがcss3などを利用できるようになってきます。 Webフォントもcss3の技術。 …

no image

Google Maps表示用スクリプト「google_map_api_js」を試してみた♪

この記事は約 1 分で読めます。 以前「jquery.gmap3.js」を使ってGoogle Mapsを表示させてみました。(「jquery.gmap3.jsを使って、Googlemapを簡単にカスタ …

no image

Facebookページで「30いいね!」を獲得したら出てくる「インサイト」画面。

この記事は約 1 分で読めます。 ゆるゆると更新していたFacebookページ。 ようやく「いいね!」の数が30を超えました。 すると、今まで見る事が出来なかった「インサイト」という項目が表示されるよ …

no image

WordPress カスタムフィールドを使ってみる

この記事は約 1 分で読めます。 WordPressの便利な機能のひとつ「カスタムフィールド」に今回チャレンジします♪ 「カスタムフィールド」は、記事本文とは別に項目を独自で作って表示するものです。