よくブログのサイドバーに自分のツイートを埋め込んで、Twitterとブログを連携させているサイトがありますが、そのやり方です。
最近SNSが強力なアクセスアップツールになってきています。
ブログに自分のTwitterアカウントを掲載しておくと、検索エンジンからアクセスしてきてくれた人がフォロワーになってくれるかもしれません。
Twitterにソースコードを作成する専用ツールがあるので簡単にできます！
この記事の目次
ブログにTwitterを埋め込む方法
執筆時、2021.9.4時点でのやり方です。
何通りかやり方があるようですが一番簡単で確実な方法をご紹介します。
リアルタイムでツイートが表示される
ここではWordpressを使っていますがHTMLなので他の環境でも使えるはずです。
サイドバーだけでなく投稿などHTMLが使える場所ならどこでも埋め込めます！
リアルタイムでタイムラインが表示されるので良いです。
簡単な説明は公式ヘルプセンターにもあります。
外部リンク
【公式】タイムラインを埋め込む方法
埋め込みコードの作成
では早速ブログに貼り付けて使用するコードを作成します。
下のサイトにアクセスし、URLを入力します。
外部リンク
【公式】Twitter Publish
入力するURLですが、twitter.comの後ろにツイートを表示したいユーザー名の「@」を除いたものを付けます。
https://twitter.com/ここに@を除くユーザー名
間違っていれば進めません。
表示するデザインを選ぶ
ウィジェットの表示デザインを選びます。
日本でよく見るのは画面の左側にあるEmbedded Timelineです。
set customization optionsから設定に進む
デザインを選択すると入力したURLに応じたツイートが表示されるはずです。
（ツイートが空の場合はその旨の英文が表示されます。）
ここで既に埋め込みコードが表示されますが、先にデザインの設定を行いましょう。
「set customization options」というリンクからデザインの設定に進みます。
表示するデザインの設定
「set customization options」ではどのようにタイムラインを表示するかを簡単に決めることが出来ます。
表示デザインを決める
What size would you like your timeline to be?
ブログに埋め込んだ際に表示する大きさを選びます。
縦×横をピクセルで指定できます。
サイドバーに埋め込むなら300×300くらいが小さめ。
画像も表示したいなら300×600くらいが良いでしょう。好みです。
可能なら予め表示領域の大きさをブラウザで確認しておきましょう。
How would you like this to look?
背景色を「白色：Light」か「黒色：Dark」で選びます。
What language would you like to display this in?
表示する言語を選びます。
「Automatic」でも問題ないですが僕は「Japanese」を選びました。
設定はプレビューで確認しながら行える
当サイトではこんな感じにしました。
設定はUpdateを押せばコードに反映されます。
ブログにツイートを表示する
設定が終わったらコードを表示したいところにコピペします。
出来上がったコードをコピーする
「Copy Code」を押してコードをコピーします。
コードを貼り付ける
あとはTwitterウィジェットを表示したいところにコードを貼り付けるだけです！
中央寄せのコードが入っていないのでCSSで追加しておくと良いです。
完成形
すごく簡単ですね！いい時代です。
Twitter埋め込みのカスタマイズコード一覧
「Twitter Publish」の設定画面である程度の設定が出来ますが、コードを変更すればもっと細かくタイムラインの表示をカスタマイズすることができます。
コードの使い方ですが「<a clsss=」の中に入っていれば効くようです。
"twitter-timeline"の後ろに半角スペースで区切って並べればOK！
<a class="twitter-timeline" 【ここに下記のコードを入れる。】 data-lang="ja" data-width="300" data-height="300" data-theme="dark" href="https://twitter.com/~">Tweets by sologaku</a>
「Twitter Publish」で自動生成されたコードにはdata-theme=までが記述されていると思うので、追記分が分かるようにその後にコードを入れてもOKです。
<a class="twitter-timeline" data-lang="ja" data-width="300" data-height="300" data-theme="dark" 【ここに下記のコードを入れる。】 href="https://twitter.com/~">Tweets by sologaku</a>
以下、Twitter埋め込みに使えるコードの一覧です。
テーブルにしてみたのですが見にくいかもしれません…
長くなりますので、ここではコードと内容だけにとどめておきます。
| カスタマイズ内容 | コードの例 |
| 幅 | data-width="300" |
| 高さ | data-height="300" |
| 始めから記述されています。単位はpxで書き換え可能。 | |
| テーマ色（白色） | data-theme="light" |
| テーマ色（黒色） | data-theme="dark" |
| 始めから記述されています。白ベースと黒ベースから選択可能。 | |
| 表示するツイート数 | data-tweet-limit="1" |
| 表示するツイート数を変更できます。 | |
| ヘッダー非表示 | data-chrome="noheader" |
| 「@○○さんのツイート」を非表示にする。 | |
| フッター非表示 | data-chrome="nofooter" |
| 「埋め込む」と「Twitterで表示」のボタンを非表示にする | |
| ヘッダー＆フッター非表示 | data-chrome="noheader nofooter" |
| @○○さんのツイート及び、ボタンを非表示にする | |
| スクロールバー非表示 | data-chrome="noscrollbar" |
| ※ツイートの数だけ縦長になります。非推奨。 | |
| ボーダー色 | data-border-color="#00ff00" |
| ボーダー非表示 | data-chrome="noborders" |
| ツイート間(上下)のボーダーの色や表示の設定。 | |
| リンク色 | data-link-color="#00ff00" |
| ツイート本文のURLの色の設定。 | |
| 背景を透明にする | data-chrome="transparent" |
色々試してみた結果、ヘッダーとフッターの非表示くらいしか実用的ではないです。
ツイート数を１件にしてみたのですが、スクロールで表示できる方が良いです。
また、スクロールを非表示にするとツイートが全部表示されて超縦長になりました。
気になる方はご自身でお試しください。
コードを使うよりも別途CSSで調整した方が綺麗になると思います。
まとめ
サイトにTwitterウィジェットを埋め込んでツイートを表示する方法でした。
ウェブサイトってリアルタイムでコンテンツを更新して表示するのが表示領域の確保などもあり少し面倒ですよね。
でもこの方法なら思っていることなどを簡単にTwitter経由でブログに表示できます。
スクロール表示で表示領域を固定できる点もGOODですね！
技術的な影響は外部リソースを埋め込むのでページ速度はそれなりに遅くなります。
当サイトは高速化を重視しているのですが、ページが遅くなることよりもメリットの方が大きいと思い導入しました。場合によってはPCのみの表示にするのもアリです。
何よりブログが華やかになるし楽しいよね・ｗ・
