今日の目標
twitterやfacebookやLNEで自分のサイトをシェア出来るようにしよう！
今日実装してみるのは下の画像の赤枠の部分です
例えば twitterのアイコンをクリックすると
このように シェアしたいページをtwitterで投稿することができます。
爆速でこのシェア機能を実装してみましょう
twitterバージョン
Twitter には 2種類のシェア用 URL がある。
基本形はintent
https://twitter.com/intent/tweet
の形でTweetを投稿出来ます。
https://twitter.com/intent/tweet?text=Hello%20World!!
とすると
`Hello World！！｀と出力される
https://twitter.com/share
でも書くことができる
とりあえず
<%= link_to 'Twitter', "https://twitter.com/share?url=#{request.url}", title: 'Twitter', target: '_blank' %>
と書くとシェアしたいページのURLがリンクでシェアできる
ほげぇ 超簡単すぎるw 記事がこれで終わってしまうw
ということで オプションの解説
オプション
パラメータ名=値を&で連結することで、複数のパラメータを指定することが出来ます。
もちろん、すべての値はURLエンコードしてくださいね！
text
先ほど紹介したパラメータです。ツイートの本文になります。
textを140文字以内(半角英数は0.5文字換算)に抑えていても、後述のurlやvia、hashtagsの値を含めて140文字を越えてしまうとツイートできないので注意です。
https://twitter.com/intent/tweet?text=ツイート本文
url
ツイートにURLを関連付けます。ツイートの末尾にURLが追加されます。
bit.lyやgoo.glなどの短縮URLを使うことも出来ます。
ちなみに：今のTwitterは、URLをツイートすると自動でt.coで始まる短縮URLに変換されるので、短縮URLサービスの実用性はないです（どんなに短くても長くても、23文字前後として扱われます。）
https://twitter.com/intent/tweet?url=https://localhost:3000/teachers/3//
hashtags
ハッシュタグを指定します。ツイートの末尾に追加されます。
「#」マークは付けずに指定してください。また、カンマ「,」で複数指定が可能です。
カンマもエンコードする必要があるのと、パラメータ名がhashtagsと複数形になっているので、ちょっと注意が必要です。
https://twitter.com/intent/tweet?hashtags=家庭教師ワイズ,成績UP
実際に書いてみるとこうなります
=link_to "http://twitter.com/share?url=#{request.url}/&text=家庭教師のワイズの先生です/&hashtags=成績UP",{class:"footer-icon_1"} do
%i.fab.fa-twitter.twitter
via
ツイートにスクリーンネーム(@から始まるユーザー名)を関連付けします。
ツイートの末尾に「via @screen_name」や「@screen_nameさんから」が追加されます。この文言はlang（後述）によって変わります。
https://twitter.com/intent/tweet?via=ひがきけいた
詳しくはこちらをご覧ください
Twitter 開発者 ドキュメント日本語訳
facebookバージョン
Facebookデベロッパーズページ
シェアボタン構成ツールに必要なシェアしたいURLと、
ボタンのタイプを選択して、コードを取得ボタンをクリックします。
コードを取得をクリックすると
とコードが出力されるので あとは設置したい場所にコピペするだけです
LINEバージョン
説明の隙間がないくらい丁寧ですw 手順は以下のまんまです
こんな感じでシェア出来ます
完成品
