読者です 読者をやめる 読者になる 読者になる

ゆーすけべー日記

はてなBlogってどーなの!?

各種シェアリンク実装まとめ

Technologies

自分で持っているサイトのURLをTwitterで「ツイートする」みたいなのをHTMLのaタグのhref属性値、 つまりリンクで指定する方法。 いちいち各種サイト行ったり、過去のソース漁るのもメンドクサイのでまとめてみます。対象プラットフォームは

  • Twitter
  • Facebook
  • LINE
  • カカオトーク

です。スマホアプリも入っていてカスタムスキーマで呼び出します。 前提としてシェア対象のページに「URL」と「タイトル」が存在してて、それぞれURIエスケープ出来ることとします。 表示の際に画像のボタンを使ったりしたいところですが、ここでは分かりやすいように「XXXでシェアする」っていうテキストリンクに統一してみます。 また、HTMLタグが長くなるので途中でぶった切ってるところがありますが、適宜くっつけて考えてくださいね。

Twitter

<a href="https://twitter.com/intent/tweet?
url={URLをURIエスケープしたもの}&text={タイトルをURIエスケープしたもの}">
Twitterでシェアする</a>

Facebook

<a href="https://www.facebook.com/sharer/sharer.php?
u={URLをURIエスケープしたもの}&t={タイトルをURIエスケープしたもの}">
Facebookでシェアする</a>

LINE

URLとタイトルを含んだ「テキスト」をつくって...

<a href="line://msg/text/{テキストをURIエスケープしたもの}">
LINEでシェアする</a>

カカオトーク

こいつが結構やっかい。必要なパラメータがやたら多いでこちらの公式解説で確認した方がいいでしょう。

<a href="kakaolink://sendurl?
msg={タイトルをURIエスケープしたもの}&url={URLをURIエスケープしたもの}
&appid={サイトのドメインをURIエスケープしたもの}
&appname={サイトの名前をURIエスケープしたもの}">
カカオトークでシェアする</a>

Webアプリのテンプレート内での実装例

Webアプリのテンプレートでどうやるか?疑似コードっぽくかつテンプレート内にコード書いてるけどこんな具合。

% use URI::Escape qw/uri_escape_utf8/;
% my $url = "http://yusukebe.com/";
% my $title = "ゆーすけべー日記";

<a href="https://twitter.com/intent/tweet?url=<%= uri_escape_utf8($url) %>&text=<%= uri_escape_utf($title) %>">
  Twitterでシェアする
</a>


アプリ起動に関して、アプリを持っていない場合はAppStoreに飛ばすとかハックがあるので興味ある人はググってください。当然ですが、現時点での方法なんで今後変わるかもしれないのでご注意!