[静的ページ]twitter/Facebook/LINEのシェアリンクをテキストやオリジナル画像で設置する
2016/10/12 Facebookコードを修正しました。
テキストとURLのエンコードは、TAG indexさんのエンコードフォームを使わせてもらう。
なぜか日本語ドキュメントがないので、公式英語ドキュメントで書式を確認する。
Web Intent URL
//twitter.com/intent/tweetPre-populated UTF-8 and URL-encoded Tweet text.
A fully-qualified URL with a HTTP or HTTPS scheme, URL-encoded.
「テキストとURLはUTF-8でエンコードしてね」ということなので、上記TAG indexさんサイトでエンコード。
表示させるテキスト
- URL https://keitahirai.net/
- twitterアカウント keitahirai
- ハッシュタグ Web制作
- ツイートテキスト 鼻ちょうちん 自営業Webサイトコーダーのブログ
改行すると半角スペースが入るのでコーディング時は改行を削除。
各パラメータは & で繋げる。
※ボタンをクリックせずにツイートする人のため、twitter用のメタタグ設置を忘れずに。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <head> <meta name="twitter:url" content="絶対パス"> <meta name="twitter:title" content="ページタイトル"> <meta name="twitter:description" content="説明文"> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:image" content="絶対パス"> </head> <body> <a href="//twitter.com/intent/tweet? url=http%3a%2f%2fkeitahirai%2enet%2f& via=keitahirai& hashtags=Web%e5%88%b6%e4%bd%9c& text=%e9%bc%bb%e3%81%a1%e3%82%87%e3%81%86%e3%81%a1%e3%82%93%20%e8%87%aa%e5%96%b6%e6%a5%adWeb%e3%82%b5%e3%82%a4%e3%83%88%e3%82%b3%e3%83%bc%e3%83%80%e3%83%bc%e3%81%ae%e3%83%96%e3%83%ad%e3%82%b0" target="_blank">テキストとか画像</a> </body> |
Facebookは公式日本語ページでエンコードしてくれるので便利。
「シェアするURL」にURLを入力後、「コードを取得」をクリックしてハイパーリンク部分のみコピペで抽出。
body直下のコードコピペと、OGPタグ設置を忘れずに。
表示させるテキスト
- URL https://keitahirai.net/
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <head> <meta property="og:url" content="絶対パス"> <meta property="og:type" content="website or article"> <meta property="og:title" content="ページタイトル"> <meta property="og:description" content="説明文"> <meta property="og:site_name" content="サイト名"> <meta property="og:image" content="絶対パス"> </head> <body> <div id="fb-root"></div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v2.8"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script> <a href="//www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fkeitahirai.net%2F" target="_blank">テキストとか画像</a> </body> |
LINE
公式ドキュメントのJavaScriptをコピペするとなぜか上手くいかないので、ハイパーリンク書式を利用する。
しかしLINEボタンは、オリジナル画像の使用を禁止している。
LINEで送るボタンに自分で作ったオリジナルのボタンを使ってもいいですか?
ボタン画像は公式に提供している画像以外の使用を禁止しています。
https://media.line.me/faq/ja/
なぜ禁止しているのか謎。
「LINEで送る」などのテキストにするか、公式の提供画像を使う。
表示させるテキスト
- URL https://keitahirai.net/
- 送信テキスト 鼻ちょうちん 自営業Webサイトコーダーのブログ
タップ後、Webブラウザが表示されます。
LINEアプリがインストールされていれば、そのままLINEアプリが起動します。
http://line.me/R/msg/<CONTENT TYPE>/?<CONTENT KEY>
という書式なので、
http://line.me/R/msg/text/?鼻ちょうちん 自営業Webサイトコーダーのブログ https://keitahirai.net/
として日本語以下をエンコードすればOK。
1 | <a href="http://line.me/R/msg/text/?%e9%bc%bb%e3%81%a1%e3%82%87%e3%81%86%e3%81%a1%e3%82%93%20%e8%87%aa%e5%96%b6%e6%a5%adWeb%e3%82%b5%e3%82%a4%e3%83%88%e3%82%b3%e3%83%bc%e3%83%80%e3%83%bc%e3%81%ae%e3%83%96%e3%83%ad%e3%82%b0%e3%80%80http%3a%2f%2fkeitahirai%2enet%2f" target="_blank">テキストとか画像</a> |
コメントを投稿する