Twitterをブログ・サイトに埋め込む

Twitterをブログ・サイトに埋め込む

ブログ制作時に《TwitterをWPブログ・サイトに埋め込む方法》について解説します!

Twitterは「小さなブログ」とも言われるほど重要なツールになっていますよね。

ブログやサイトを作ったら、関連するTwitterを表示しないともったいない!

ここでは必要な手順を簡単に解説します!

[注意]Twitter公式のアップデート等により、記事内で紹介している内容と画面構成が異なる場合があります。
※この記事は2017年11月に執筆しました。

Twitterタイムラインの埋め込み

①まずはTwitterにログイン

複数アカウントを使っている方は、埋め込みを行いたいアカウントでログイン!

②Twitter公式のヴィジェット制作ページにアクセス

https://publish.twitter.com/#

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などの数字を変更する事でも変更可能です。

サイドバー・ヘッダーなど、設置場所に合わせて調節してください。

今回の記事は以上です。おつかれさまでした!