リアルコマース スタッフブログ

Real Commerce株式会社スタッフブログ

CLOSE

makeshopのPC版のページにも「LINEで送る」ボタンを設置する方法

PC版でもLineで送るボタンを設置!

SP版にはある「Lineで送る」ボタンを、PC版にも設置する方法になります。
Facebookのいいねボタンや、Twitterのボタンのように、Lineで送るボタンは直接商品をユーザが拡散するのに役に立ちますので、是非設置して運用に役立てましょう。

LINE Social Pluginsへアクセス

https://media.line.me/ja/how_to_install#lineitbutton

  1. 上記URLよりボタンタイプの設定を行い、コードをコピーしてエディタに貼り付けます。

htmlとjsを記述

商品詳細ページに以下の記述をします。
htmlは以下の通り

<div class="line-it-button" data-lang="ja" data-type="share-a" data-url="" style="display: none;"></div>
          <script src="https://d.line-scdn.net/r/web/social-plugin/js/thirdparty/loader.min.js" async="async" defer="defer"></script>
          <script type="text/javascript">LineIt.loadButton();</script>

javascriptは次のようになります。

<script>
    $(function(){
      var url = location.pathname;
      $('.line').attr('data-url').echo(url);
    });
</script>

これで表示されるようになります。

この記事をシェアする