LINEで送る　その他のSNSボタン [js]

html＋js

<span>
<script type="text/javascript" src="//media.line.me/js/line-button.js?v=20140411" ></script>
<script type="text/javascript">
new media_line_me.LineButton({"pc":false,"lang":"ja","type":"a"});
</script>
</span>

※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。

設置方法は提供元サイトの通りです。ボタンデザインを選び、素直にコードをまるっとコピペしてください。

• ソースをコピペしただけでは、スマフォ用になっているのでPCでは表示しません。４行目の"pc":falseのfalseをtrueに変えるとPCでも表示します（ローカル環境では表示しないのでサーバーにアップして確認してください）。
• twitterやfacebookのボタンのように、変数にコードを入れてjqueryなどでhtmlの好きな場所に挿入させるという方法はうまくいかないみたいです。
• 1ページ内に複数の「LINEで送る」ボタンを設置する場合、２行目の
  <script type="text/javascript" src="//media.line.me/js/line-button.js?v=20140411" ></script>
  は複数記述しなくても良いです。

提供元サイトのページの中ほどにある「送るテキストを選択」で、FBのいいねボタンのようにテキストも設定できます。

• 「ページタイトルとURLを使う」を選択すると、自動的に「LINEで送る」を設置しているページのtitleタグの内容とurlを送る。
• 「直接入力」を選択すると、入力フォームに入力したテキストと「LINEで送る」を設置しているページのurlを送る。

html

<a href="http://line.me/R/msg/text/?送りたいテキスト（エンコード）"><img src="[ボタン画像のURL]" width="[ボタン幅]" height="[ボタン高さ]" alt="LINEで送る" /></a>

※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。

1. （ガイドラインに則った）テキストや画像をaタグで囲む。
2. aタグに特定の書式によるアドレスを設定。http://line.me/R/msg/のあとにtextパラメータを指定するとテキストを送れる。
3. 送りたいテキストは?で接続して設定する（送りたいテキストはUTF−8にエンコードする）。

• line://msg/〜で始まる書式の場合も、ほぼ同じです。詳細は提供元サイトを確認してください。
• エンコードはtag indexなどのwebツールが便利です。
• ボタンの画像は「LINEで送る」ボタン提供元サイトでダウンロードできます。ガイドラインには「LINEで送るボタンを外部サイトに設置する場合、専用アイコンを使用しなければなりません。但し、設置者は、専用アイコンの代わりに「LINEで送る」又は「LINE」というテキスト文字を使用することができます。」とある（2016/07現在）ので、専用の画像を使ってください。詳しくはLINEのガイドラインを確認してください。
• wordpress用のコードもあります。

html

<a href="http://b.hatena.ne.jp/entry/対象ページURL" class="hatena-bookmark-button" data-hatena-bookmark-title="対象ページタイトル" data-hatena-bookmark-layout="simple-balloon" title="このエントリーをはてなブックマークに追加"><img src="https://b.st-hatena.com/images/entry-button/button-only@2x.png" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="https://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>

※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。

設置方法は提供元サイトの通りです。ボタンデザインを選び、設定をして素直にコードをまるっとコピペしてください。

• はてなブックマークヘルプの「はてなブックマークボタンを表示する」も参照してください。
• 1ページ内に複数のはてブボタンを設置する場合、ソースの最後に記述されている
  <script type="text/javascript" src="https://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
  は複数記述しなくても良いです。

html

<script src="https://apis.google.com/js/platform.js" async defer>
  {lang: 'ja'}
</script>

※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。

このコードはheadタグかbodyタグの終了タグの直前に記述します。

<div class="g-plusone" data-annotation="inline" data-width="300"></div>

※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。

設置方法は提供元サイトの通りです。ボタンデザインを選び、設定をして素直にコードをまるっとコピペしてください（コメントアウトのとおり、scriptタグとdivタグの記述位置が違うので、注意してください）。