WordPressに「LINEで送る」ボタン

Filed under: wordpress — kdcs @ 17年12月19日 火曜日

WordPressに「LINEで送る」ボタンを設置する方法
公式サイトからコードを取得する
※公式のコードを使うとPCでは小さい別ウインドウが表示される

アイコンを選ぶ
下記コードの「data-type=”share-a”」の部分、末尾のアルファベットで変わる

コード

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

動的WebサイトでLINEで送るボタンを呼び出す

<script type="text/javascript">LineIt.loadButton();</script>

以下は旧タイプ
※pcでは小さなウインドウは開かず別ページに移動する

<a href="http://line.me/R/msg/text/?<?php the_title(); ?>%0D%0A<?php the_permalink(); ?>">
<img src="[ボタン画像のURL]" width="[ボタン幅]" height="[ボタン高さ]" alt="LINEで送る">
</a>

モバイルのみ表示させる場合「is_mobile」で切り換え

<!-- LINEボタンここから-->
<!--スマホで見た時の表示 -->
<?php if(is_mobile()) { ?>
<a href="http://line.naver.jp/R/msg/text/?<?php the_title(); ?>%0D%0A<?php the_permalink(); ?>" target="_blank"><img src="ボタン画像のURL" width="ボタン幅" height="ボタン高さ" alt="LINEで送る" /></a>
<!--スマホで見た時の表示終わり -->
<!-- PCで見た時の表示 -->
<?php } else { ?>
<!-- 何も表示しない -->
<?php } ?>
<!-- PCで見た時の表示終わり -->
<!-- LINEボタン終わり -->

サイト内検索

カテゴリー

最近の投稿

« |WordPressに「LINEで送る」ボタン| »
↑上に戻る