メニュー 閉じる

webサイト制作・運営Tips1 Twitterカード・埋め込み・ボタンの設置


筆者自身がいちいち他のwebサイトからリンクを探してくるのが面倒なので自分の記事にまとめることにしました。

Twitterカード

Twitterカードとは、リンクを貼ったときにリンクのURLだけではなく、サムネイル画像やタイトルなどを表示して目立たせることができる機能です。これは、無料ブログサービスなどでは最初から機能がついている場合が多いですが、WordPressなどを利用している場合は自分で設定する必要があります。あらかじめmetaタグと呼ばれるHTMLを記述するか(上級者向け)、WordPressのテーマの設定、テーマで設定できない場合はプラグインを導入して設定することができます。筆者はプラグインであるAll in One SEOの「ソーシャルネットワーク」設定を用いています。これを用いて設定すると、Twitterなどで次のように表示されます。

当サイトと個人サイトでは異なり、当サイトでは大きな画像で要約(summary_large_image)・記事のサムネイル、個人サイトでは要約(summary)・デフォルト画像(アイコン)としています。「大きな画像で要約」のほうがTwitterのタイムラインで目立ちますが、必要に応じて使い分けましょう。また、Twitterカードがきちんと設定できているかどうかは次のTwitter公式ツールで確認できます。デベロッパー(開発者)向けツールなので、一般ユーザーが発見しにくいところにあります。

Card validator

ツイート埋め込み・Twitterボタン

これらは次のリンクにまとまっています。英語のページなので、それぞれの機能を使用した場合のプレビューを載せていきます。

What would you like to embed?

あなたが埋め込みたいものは何ですか?この画面のせいで見えにくいので下にスクロールしましょう。

Enbedded Tweet(ツイート埋め込み)

クリックして出てくる画面に埋め込みたいツイートのリンクを入力し、「Preview」ボタンを押すと生成されるHTMLタグを「Copy Code」ボタンでコピー。次のようにツイートの埋め込みができます。

Enbedded Timeline(タイムラインの埋め込み)

自分の(おそらく自分のじゃなくても公開アカウントなら可能ですが控えましょう)最新ツイートを埋め込むことができます。ただ、そのままだと大きすぎて邪魔なので「set customization options」をクリックして、適当な大きさにすることをお勧めします。

Twitter Button(Twitterボタン)

次の5種類があります。

Share Button
このボタンを設置したページのリンクをツイートできます。「set customization options」から、自分のTwitterアカウントへのメンションをつけたり、ハッシュタグをつけたり、ボタンを大きくしたりできます。

Follow Button
指定したアカウントをフォローしてもらうリンクを設置できます。もし閲覧者の方が誤って押しても、フォローするかしないかの確認画面が出てくるので安心してください。「set customization options」から、ユーザーネームを隠したり、ボタンを大きくしたりできます。

Mention Button
指定したアカウントに対して@メンションを送るツイートのボタンを設置できます。「set customization options」から、別のTwitterアカウントへのメンションを加えたり、ボタンを大きくしたりできます。

Hashtag Button
指定したハッシュタグをツイートするボタンを設置できます。ハッシュタグは無難に仮面ライダーゼロワン最終話のセリフから。元々嫌いだったキャラの名言、いいですよね。「set customization options」から、リンクや別のTwitterアカウントへのメンションを加えたり、ボタンを大きくしたりできます。

Message Button
指定したアカウントに対してダイレクトメッセージを送るボタンを設置できます。諸事情によりこれだけは筆者の個人アカウントにしています。set customization options」から、メッセージに特定の文字列を含めたり、ユーザーネームを隠したり、ボタンを大きくしたりできます。

なお、このボタンを作成するとき入力を求められる「Twitter ID」とは、@以下のアカウント名(ユーザーネーム)や表示名を変更しても変わらない、アカウント作成にあたってランダムに割り当てられた数字の文字列であり、いわばTwitterのマイナンバーとでも言えるものです。かつてはTwitterの設定から簡単に確認できましたが、どうやら今ではidtwiなどの外部ツールを使用したほうが簡単に確認できます。例えば、筆者の当サイトのアカウントのIDは「1333716959360290818」、個人アカウントのIDは「323566206」です。ユーザー名だけを入力してもボタンがうまく生成されない場合は、自分のTwitter IDを調べ、入力してみてください。

今回は自分の備忘録としての意味合いも強い記事ですが、Twitter関連ツールを使いたい方への役に立てば幸いです。

Posted in webサイト制作・運営