「LINEで送る」ボタンの作り方【好きな画像でも設置できます】
「LINEで送る」ボタンを、設置する方法をご紹介。自分の好きな画像でも作れます。
Twitterのツイートボタン、Facebookのシェアボタンに比べると、リファレンスがしっかり機能していているのでわかりやすいです。
豊かに引きこもる。
Webデザインは器。ブログは中身。
「レンちゃんとペンタ」では、2つのスキルを掛け合わせて、
おウチで豊かに楽しく暮らす方法をご紹介しています。
基本の「LINEで送る」ボタン
基本形
↓ボタンサンプルはこちらです。
実装方法は、以下のコードをページに貼り付けるだけです。
「ページのURL」の部分に、シェアしたいページのURLを入れます。
<div class="line-it-button" data-lang="ja" data-type="share-b" data-ver="3" data-url="ページのURL" data-color="default" data-size="large" data-count="false" style="display: none;"></div>
<script src="https://www.line-website.com/social-plugins/js/thirdparty/loader.min.js" async="async" defer="defer"></script>ボタンのカスタマイズ
LINEの公式リファレンスから、自分の好きなボタンを作成することができます。
好きな設定を選んで、生成されたソースコードを貼り付けるだけで、カンタンに設定できます。
好きな画像で作る「LINEで送る」ボタン
こちらも先程のリファレンスページの「カスタムアイコンを使用」欄にソースコードの記載があります。
↓ボタンサンプルはこちらです。
コードはこのような表記です。hrefの属性値「ページのURL」の部分に、送りたいページのURLを入れます。
<a href="https://social-plugins.line.me/lineit/share?url=ページのURL">
<img src="画像のパス"/>
</a>まとめ
はてなブックマークボタンの設置方法を紹介しました。リファレンスがわかりやすいので簡単でしたね。
TwitterのツイートボタンやFacebookのシェアボタン、はてなブックマークボタンの設置と合わせてご参考ください。
