[静的ページ]twitter/Facebook/LINEのシェアリンクをテキストやオリジナル画像で設置する

e2ax4vkdl6wyzyvh

2016/10/12 Facebookコードを修正しました。

テキストとURLのエンコードは、TAG indexさんのエンコードフォームを使わせてもらう。

 

twitter

なぜか日本語ドキュメントがないので、公式英語ドキュメントで書式を確認する。

Web Intent URL
//twitter.com/intent/tweet

Pre-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用のメタタグ設置を忘れずに。

このページをツイートする

 

Facebook

Facebookは公式日本語ページでエンコードしてくれるので便利。

「シェアするURL」にURLを入力後、「コードを取得」をクリックしてハイパーリンク部分のみコピペで抽出。
body直下のコードコピペと、OGPタグ設置を忘れずに。

3fcw7jfbmc0njh8g

表示させるテキスト

  • URL https://keitahirai.net/

このページをFacebookでシェアする

 

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。

このページをLINEで送る

 

コメントを投稿する

※メールアドレスは私にだけ届き、サイトには表示されません。
※「送信する」ボタンは一度だけクリックしてお待ちください。