自分のサイトをSNS対応するために何ができるのか全くわからなかったので、かなり手当たり次第調べていて大変だったのでまとめておく
Twitter対応
できること
- Twitterのボタンを設置する
- カスタムのTwitterボタンを作る
- Twitterの特定のアカウントのタイムラインを設置する
- Twitterのアカウントのフォローを勧める
- TwitterのTLでページの画像やタイトルが表示されるようにする
などがあって対応は比較的簡単だけど、知っとかないとやるのが大変。
Twitterボタン(本家)をそのまま設置する
Twitterボタンを設置するのは簡単にできます。
https://publish.twitter.com/#
上記のページで選択していくだけで、所望のボタンを手に入れることができる。以下の通りだ。
あとは手に入ったコードをコピーして埋め込む。これは簡単。
カスタムのTwitterボタンを作る
さて次にカスタムのTwitterボタンを作る。この場合ボタンとかは自分で用意して、押された時に開くURLを準備する。
Twitterの方でURLは準備されており、Twitterが用意しているパラメータをセットすると設定したテキストが埋め込まれたページが作成される。
以下のようなURLを指定すればTweetするときに自動的に文字列が埋め込まれる。
encodeuricomponentを使えばスペースや日本語の変換やスペースの対応等ができる。
Twitterの特定のアカウントのタイムラインを設置する
これはさっきの「本家のボタンを用意する」で同様にやることができる。
Twitterのアカウントのフォローを勧める
これも同上の方法で可能
TwitterのTLでページの画像やタイトルが表示されるようにする
以下みたいにTwitterにURLを乗せるとサマリーが出るのを”カード”と呼ぶ。
カードを作るのは簡単でURL先のHeaderにメタデータを書けば良い。
それを一般的にOGPといい、FacebookやTwitter,他一般的サイト用などを指定しておくことで、より目につきやすいポストにすることができる。
詳細な対応は
https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/markup
に書かれている。
例としては以下のようなかんじ。twitter:cardにはカードのタイプをかけるが、もっと大きな画像を出したいならsummary_large_imageを指定する。
<meta name=”twitter:card” content=”summary” />
<meta name=”twitter:site” content=”@thothchildren” />
<meta name=”twitter:title” content=”タイトル” />
<meta name=”twitter:description” content=”説明” />
<meta name=”twitter:image” content=”画像のURL” />
<meta name=”twitter:url” content=”クリックした時のURL” />
プロクラステス距離で非類似度を測る https://t.co/jMraI7AY0c #ThothChildren @thothchildrenさんから
— ThothChildren (@thothchildren) December 25, 2017
おわり
細かいことは書いている人もいっぱいいると思うので、そこまでは書いていません。今回はどんなことができるかを知れることについてまとめてみました。少しでも参考になればと思います。
