Twitterをブログ・サイトに埋め込む
Twitterをブログ・サイトに埋め込む
ブログ制作時に《TwitterをWPブログ・サイトに埋め込む方法》について解説します！
Twitterは「小さなブログ」とも言われるほど重要なツールになっていますよね。
ブログやサイトを作ったら、関連するTwitterを表示しないともったいない！
ここでは必要な手順を簡単に解説します！
[注意]Twitter公式のアップデート等により、記事内で紹介している内容と画面構成が異なる場合があります。※この記事は2017年11月に執筆しました。
Twitterタイムラインの埋め込み
①まずはTwitterにログイン
複数アカウントを使っている方は、埋め込みを行いたいアカウントでログイン！
②Twitter公式のヴィジェット制作ページにアクセス
URLへの直接リンクの他に、自分のTwitterホームページからアクセスも可能です。
Twitterホーム⇒プロフィールと設定⇒ヴィジェット⇒新規作成⇒プロフィール で同じ画面が表示されるハズです。
③画面が表示されたら翻訳して、自分のTwitterURLを入力
利用環境によっては最初から日本語で表示されていたり、URLが入力済みだったりします。
中央の入力欄に《https://twitter.com/自分のアカウント》という形で入力し、右側の[↓]ボタンをポチ！
※＠アットマークは入力しません。
④表示された画面から、左側の[埋め込みタイムライン]を選択
⑤[カスタマイズオプションを設定する]をポチ！
⑥自分のブログに表示したいサイズ、色合いにカスタマイズ！
■Height⇒表示するタイムラインの[高さ]を設定します。
■Width⇒表示するタイムラインの[幅]を設定します。
■どのようにこれを見たいですか？
⇒光(デフォルト)・ダーク(黒バック)から選択します。
⇒カラー・リンクの文字色を選択します。
■これをどの言語で表示したいですか？
⇒管理人は自動にしておきました。
■仕立てのオプトアウト
⇒よく意味がわからなかったので、管理人はチェック無しで作りました。
⑦設定を終えたら[更新]をポチ！
中央に埋め込みコードが表示されました。
このコードをコピーして、自サイトに埋め込めば完成です！
フォローボタンも作ってみよう
①[Twitterタイムラインを埋め込む]項目の③番まで同じ手順です
右側の[Twitterボタン]を選択します。
②制作するボタンを選びます
フォローボタン⇒Twitterをフォローするボタンです。
モーションボタン⇒「〇〇さんにtweetをする」ボタンです。
ここでは《フォローボタン》を選択して制作します。
③[カスタマイズオプションを設定する]をポチ！
④自分好みにカスタマイズ！
ボタンの大きさ・ユーザー名の表示などを選択します。
⑤制作が完了したら[更新]ボタンをポチ！
中央に埋め込みコードが表示されました。
このコードをコピーして、自サイトに埋め込めば完成です！
フォローボタンにフォロワー数を表示したい
管理人もこの表示方法にしたくて、Twitter公式ボタン作成ページで右往左往してみたんですが、それらしい項目が見つかりませんでした。
ネット上の情報を漁ると、どうやらフォローボタンコードの一部分を変更すると表示できるらしい！
フォローボタンのコードから変更！
フォローボタン制作時に取得したコード内のこの部分を変更します。
data-show-count=”farse“この部分を…
data-show-count=”true“に変更する！
farseの部分をtrueに変更するだけ！
[注意点]コード内に、同じような表記があるので、間違えないようにしっかり確認しましょう！
これでタイムライン＆フォローボタンのコードが準備できました！
自サイトに貼り付けていきましょう！
自サイトにTwitterを埋め込む
管理人のブログ環境は、ワードプレス＋テーマはLightningです。
ご自身のサイトの環境に合わせて埋め込んでくださいm(__)m
①管理画面から[外観]⇒[ヴィジェット]を選択
②任意の場所に[テキスト]を用意してコードを貼り付け！
③出来上がり♪
表示する大きさ等は、コード内のHeightなどの数字を変更する事でも変更可能です。
サイドバー・ヘッダーなど、設置場所に合わせて調節してください。
今回の記事は以上です。おつかれさまでした！
