Lineで送るカスタムボタンを小窓で表示する～Lineで送るボタンはデザインボタンを使用できる！

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

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

カスタムボタンデモ

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

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

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

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

ソーシャルボタン設置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に送る」ページのウインドウを小窓で開くために必要です。


<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コード」の下部の適当な場所に配置します。

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で送るカスタムボタンサンプル

カスタムボタンサンプル小窓デモ
HTMLコード（まとめ）


<!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>

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

カスタムボタン デモ