レンちゃんとペンタ

「LINEで送る」ボタンの作り方【好きな画像でも設置できます】

「LINEで送る」ボタンの作り方【好きな画像でも設置できます】

「LINEで送る」ボタンを設置する方法をご紹介。自分の好きな画像でも作れます。

この記事で分かること

  • 基本の「LINEで送る」ボタンの作り方
  • 「LINEで送る」を好きな画像で作る方法

    Webデザインとブログで豊かに引きこもる。

    レンちゃんとペンタ

    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で送るボタン」の設置方法
    LINEの公式ページで好みのボタンを作成できます

    好きな画像で作る「LINEで送る」ボタン

    こちらも先程のリファレンスページの「カスタムアイコンを使用」欄にソースコードの記載があります。
    ↓ボタンサンプルはこちらです。

    LINEで送る

    コードはこのような表記です。hrefの属性値「ページのURL」の部分に、送りたいページのURLを入れます。

    <a href="https://social-plugins.line.me/lineit/share?url=ページのURL">
      <img src="画像のパス"/>
    </a>

    はてなブックマークボタンの設置方法を紹介しました。

    1. Home
    2. 「LINEで送る」ボタンの作り方【好きな画像でも設置できます】

    Related Posts