Twitter公式のFollowボタンを自分のWebサイトに設置するには? - 適宜覚書-Fragments

Twitter公式のFollowボタンを自分のWebサイトに設置するには?

      2017/03/03

HTTPS常時使用をオフ

はじめに

Twitterで公式のFollowボタンが配布開始されました。「え?今更?前から出来たじゃない」…と思う方もいらっしゃるかもしれませんが、出来ませんでした。

従来からよく見かけるFollowMeアイコンなどは、その人のTwitterページへのリンクが仕込んであって移動先でFollowを行います。今回提供のFollowボタンは、その場で移動なくボタンを押すだけでFollowが完了するようになっています。

今回は、Twitter公式のFollowボタンを自分のWebサイトに設置する方法を紹介します。

Twitter公式のFollowボタンを自分のWebサイトに設置する方法

  1. Twitterの設定でセキュリティ向上のため、HTTPSを強制している場合、ボタンのプレビューが表示されません。
    SSL利用だとプレビュー非表示

    SSL利用だとプレビュー非表示

    一時的にTwitter / 設定から、「HTTPS を常時使用する」のチェックをオフにしましょう。

    HTTPS常時使用をオフ

    HTTPS常時使用をオフ

  2. WebブラウザでTwitter / フォローボタンページを開きます。

    Followボタンページ

    Followボタンページ

  3. もしTwitterアカウントでログイン済の場合は、1.あなたのユーザー名…項目は自動で入力済みです。勿論、任意に手入力も出来ます。

    ユーザー名

    ユーザー名

  4. 次にフォローボタンの色を「明るい」「暗い」の二択で選択します。設置するページとの兼ね合いや好みで選びましょう。
    Followボタンの色選択

    Followボタンの色選択

    1. 「明るい」を選択した場合、水色の背景色になります。

      明るい

      明るい

    2. 「暗い」を選択した場合、黒い背景色になります。

      暗い

      暗い

  5. 更にフォロワー数の表示、非表示を選択します。

    フォロワー数の表示、非表示

    フォロワー数の表示、非表示

  6. 最後にFollowボタンの表記をどの言語にするかをプルダウンリストから選択します。

    ボタンの表記言語

    ボタンの表記言語

  7. ここまでの選択は逐一右上のプレビューに反映されるので確認しつつ設定できます。気に入った設定となったなら、その下にあるコードをコピーし、自分の所有するWebページに張り付ければ、Followボタンを設置出来ます。

    プレビューとコード

    プレビューとコード

  8. 今回作成したボタンは以下の通りです。見た目だけでなく、ちゃんとこの場でFollow出来ますよ(゚∀゚)。

おわりに

今回は、Twitter公式のFollowボタンを自分のWebサイトに設置する手順を紹介しました。この記事がお役にたてると嬉しいです。

適宜覚書-Fragmentsは、筆者が興味をもった様々な情報やネタを筆者が忘れても後で思い出せるよう覚書として公開するBlogです。Google Chrome拡張、Facebook、Google、Twitter、Windows、各種Webアプリなどを扱うことが多いです。この覚書が、もし何かお役立ちになれば幸いです。

 - Tips, レビュー ,