【第4話】超文系の臨床心理士が半泣きでブログ開設【Twitterのフォローボタン設置】

ブログの作り方

前回の記事では、プロフィールページとサイドバーのプロフィールを設置しました。

せっかく自分に興味を持ってくれた方とのつながりを深めるため、Twitterでもつながれると良いですよね。

そこで活躍するのが、Twitterのフォローボタン!

なお、フォローボタンとは下の図で、青い「フォローする」の表記のこと。赤い丸で囲っている部分です!

佐藤セイ
佐藤セイ

それでは早速作っていきましょう!

スポンサーリンク

ブログ開設の道のり9:フォローボタンの埋め込みコード生成

佐藤セイ
佐藤セイ

まずはフォローボタンを作るためのコードを生成します。

「Twitter publish」でコードを生成する

Twitterの「フォローする」ボタンを生成するには、「Twitter publish」を利用します。

まずは「Twitter publish」のページを開いてみましょう。下の図の赤い丸で囲ったところにTwitterのURLを入力します。

TwitterのURLとは、自分のアカウントのトップページのURLのことです。

「@~~」で示されるユーザー名とは異なりますので注意しましょう。

https://twitter.com/〇〇」の〇〇部分にユーザー名から@を除いたものを入力してもOKです。

佐藤セイのTwitterユーザー名は「@SeiSato1224」なので、

URLは「https://twitter.com/SeiSato1224」になります。

入力すると、入力欄の右端に「→」が出現しますので、それをワンクリック。

すると、画面がすーっと下にスライドして、次のような画面に移ります。

「埋め込みタイムライン」と「Twitterボタン」の2つが表示されますので、右の「Twitterボタン」の方を選択しましょう。

すると「使用するボタンを選択します」という画面が出てきますので、左の「フォローボタン」を選択してください。

選択すると、コードが生成されます。

これでコードが生成できましたが、このコードのままでは「@SeiSatoさんをフォロー」というボタンを設置することになってしまいます。

このままでOKという人は、次の「コードをWordPressに貼りつける」の手順に進んでいください。

「フォローする」ボタンに変更したい方は、あと少しだけ設定が必要です。

表記を「フォローする」に変更する

青文字で表示された「カスタマイズオプションを設定する」をクリックします。

すると、いくつかの選択肢が表示されます。

「ユーザー名を非表示」をチェック:「フォローする」ボタンを作成

「大きなボタン」をチェック:元のサイズより一回り大きいボタンを作成

チェックを入れるたび、プレビューで確認できますので、自分の好みの設定に調整してみましょう。

調整できたら「更新」ボタンを押してください。

「更新」すると、元のコードの画面に戻りますので、このコードをコピーしておきます。

スポンサーリンク

ブログ開設の道のり10:コードをWordPressに貼りつける

それでは、生成したコードをWordPressに貼りつけて、「フォローする」ボタンを設置していきましょう!

WordPressの管理画面を表示し、外観→ウィジェットをクリックします。

前回作成したサイドバーのプロフィールに貼りつけたいときには、「サイドバー」の「テキスト(PC用):プロフィール」をクリック。

佐藤セイ
佐藤セイ

プロフィールのタイトルを「自己紹介」などにした人は「テキスト(PC用):自己紹介」という表示になっていますので注意!

設置したい位置にコードを貼り付けます!

「フォローする」ボタンを中央に設置したい場合には、<center></center>でコードを囲んでおきましょう。

「保存」を押せば、「フォローする」ボタンの設置は完了です。

まとめ

佐藤セイ
佐藤セイ

これまでの成果をまとめてみましょう!

今回は、

9 .フォローボタンの埋め込みコード生成

・「Twitter publish」でコードを生成する

・表記を「フォローする」に変更する

10.コードをWordPressのサイドバープロフィールに貼りつける

までを達成しました!

佐藤セイ
佐藤セイ

ここまで来ると、ずいぶんブログらしくなってきて「あと少し頑張ろう!」とやる気も湧いてきます!

実際にブログをGoogleの海に解き放つまでには、細々とした作業が必要なのですが、それはまた別の記事にて。

第3話はこちら

第5話はこちら

コメント

タイトルとURLをコピーしました