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

Photoshop で入力したテキストの「縦書き」「横書き」を変更する方法

この記事は約 1 分で読めます。 Photoshopを使うようになってもう何年も経つのに、意外と知らずに無駄な事をしていたり・・・が多かったりします。。。 効率よく作業するには、やっぱり便利な方法は活 …

no image

クリッカプルマップをjQueryでレスポンシブ対応させる方法

この記事は約 1 分で読めます。 滅多に使わないのですが、たま~に「クリッカプルマップ」を使用してコーディングをする事があります。 しかし、「クリッカプルマップ」はレスポンシブで使用してしまうと、リン …

no image

WordPress記事中の文章をコピーしたら管理者にお知らせしてくれるプラグイン「Check Copy Contents(CCC)」を試してみた

この記事は約 2 分で読めます。 私の過去記事で人気なのが、「画像のコピーガード」。画像を盗用されることに対して対策を打ちたい方がたくさんいらっしゃるのでしょう。 もしこれが記事中の文章においても、コ …

no image

Worepress 前後の記事へリンクをつけたい時。

この記事は約 1 分で読めます。 記事の下に「古い記事へ」「新しい記事へ」という前後の記事へのリンクを表示しています。 単純に投稿順で前後の記事へリンクをさせるのか、または開いている記事と同じカテゴリ …

no image

Facebookの個人プロフィールに勤務先のFacebookページをリンクさせる方法

この記事は約 1 分で読めます。 Facebookの個人プロフィールに、勤務先を入れた時に勤務先のFacebookページとうまくリンクされない事があります。 案外、ココがクリックされているようで・・・ …