Lineで送るカスタムボタンのリンクウインドウを小窓で表示する
~Lineで送るボタンは好きなデザインボタンを使用できる!

   LINEで送るボタンは、Webサイトの情報をLINEの友だちと簡単にシェアできるボタンです。
このボタンにカスタムアイコンを使用できるようになり、ボタン設置の公式コードが公開されています。
下記の例のとおりボタンのリンクを設定します。   LINEで送るボタン公式サイト

 カスタムボタン デモ

このデモは、リンク先のウィンドウの大きさはこのページと同じ大きさになります。
いわゆる小窓には表示されません。

  Lineで送るカスタムアイコン(デザインボタン)の作り方は、次のとおりです。
  1. ボタンにカスタムアイコンを使用する場合、下記の例のとおりボタンのリンクを設定します
    リンクのフォーマットは、
    https://social-plugins.line.me/lineit/share?url={URL}

    (例){URL}は、ボタン設置のページのURLを指定します。例えば、http://www.xxx.jp/yyy.htmlのとき、
    
    <a href="https://social-plugins.line.me/lineit/share?url=http://www.xxx.jp/yyy.html" target="_blank">
      <img src="カスタムアイコンURL"></a> 
           
  2. 動的WebサイトでLINEで送るボタンを呼び出します
    Javascriptで、LineIt.loadButton()を呼び出してLINEで送るボタンを有効にします。
    <script type="text/javascript">LineIt.loadButton();</script>

 カスタムボタンのリンク先ウィンドウを小窓で表示する方法

Lineで送るカスタムボタンのリンク先ウィンドウを小窓で表示する手順は以下のとおりです。
jQueryを使用しますが、jQueryファイルはダウンロードせずにcode.jquery.comから直接インクロードします。

 オリジナルデザインボタンの準備(カスタムボタン画像)

カスタムボタンは、Lineサイトからダウンロードできます。
≫ボタン画像ダウンロード https://media.line.me/download/buttons_ja.zip

 jQueryファイルのインクルードHTMLコード(jQuery)

<!-- jQuery -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

 ソーシャルボタン設置HTMLコード(HTML-Line公式コード)

フリーなデザイン画像のカスタムボタンの配置は、Aタグでボタン画像にリンク設定を行います。
仮に、カスタムボタンの配置するURLが、http://urbanqee.com/webutil/sns/social-line-custombutton.html
カスタムボタンのURLが、./images/line-share-h.pngとすれば、リンク設定はつぎのとおりです。
なお、Aタグのidパラメータを指定します。これは、カスタムボタンをクリックしたときに、このid名でonclickイベントを取得して リンク先の「Lineに送る」ページのウインドウを小窓で開くために必要です。

ボタン設置HTMLコード


<a href="https://social-plugins.line.me/lineit/share?url=http://urbanqee.com/webutil/sns/social-line-custombutton.html"
 id="lineBut"><img src='./images/line-share-d.png'></a>

 LINEで送るカスタムボタン有効化スクリプト(Javascript-Line公式コード)

動的WebサイトでLINEで送るボタンを呼び出します。Javascript、LineIt.loadButton()を呼び出してLINEで送るボタンを有効にします。 下のJavscriptコードを、上の「ボタン設置HTMLコード」の下部の適当な場所に配置します。


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

 LINEで送る小窓表示スクリプト(jQuery)

Lineで送るカスタムボタンをクリックしたときに呼び出され、そのリンク先ウィンドウを小窓で表示します。


<script>
$('#lineBut').on('click',function(){
     var lineLink = $(this).attr("href");
     window.open( lineLink , "lineWindow" , 'top=100,left=100,width=500,height=500,scrollbars=yes,resizable=yes');
     //alert (lineLink);
    return false; // Aタグのリンク無効にする
});
</script>

 LINEで送るカスタムボタンサンプル


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Lineで送るカスタムボタンのリンク先ウィンドウを小窓で表示</title>
<!-- jQuery -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

<style>
body{
 width: 900px; margin: 0 auto;
 color: #333; font: 14px 'Lucida Grande', Verdana, sans-serif;
  }
</style>
</head>
<body>
<h2 style="text-align:center">Lineで送るカスタムボタンのリンク先ウィンドウを小窓で表示デモ</h2>

<!-- Lineで送るカスタムボタン -->
<a href="https://social-plugins.line.me/lineit/share?url=http://urbanqee.com/webutil/sns/sns-socialbutton-customize.html"
 id="lineBut"><img src='images/line-share-d.png'></a>

<!-- 小窓で表示スクリプト -->
<script>
$('#lineBut').on('click',function(){
     var lineLink = $(this).attr("href");
     window.open( lineLink , "lineWindow" , 'top=100,left=100,width=500,height=500,scrollbars=yes,resizable=yes');
     //alert (lineLink);
    return false; // aリンク無効にする
});
</script>

<!-- LINEで送るボタンを有効化スクリプト  -->
<script>LineIt.loadButton();</script>

</body>
</html>


TOP


 ソーシャルボタン関連サイト内リンク

  1. 公式サイトへ行かずに、簡単に手元でソーシャルボタンをまとめて設置する Lightboxなどのモーダルウィンドウ上にも設置できる ~17SNS/RSSサイト、31種類余りの公式ボタン、非公式デザインボタンどちらでも!~
  2. まとめて設置のデモ - モーダルウィンドウにも(1.関連)
  3. オリジナルデザインのソーシャルボタンにカウントを設置する方法 - デザインボタン 7サイト - Facebook, Google+, Hatena, Pinterest, Feedly, LDR, Pocket(本ページ)

HOME
 最終更新日:2018.9.6(Debut)
メール mailto:  掲示板