Twitter埋め込み｜カスタマイズについて

色々な方のサイトやブログを見ていると、PC画面でサイドバー付近にTwitterのタイムラインが埋め込まれていることがありますよね。

このTwitterウィジェットの埋め込みは簡単に行うことができます。
また、カスタマイズすることでお好みのデザインにすることもできますのでぜひ試してみてください！

ここでは、ブログなどにTwitterを埋め込む方法とカスタマイズについてご紹介します。

本記事の内容

・Twitterの埋め込みとは
・Twitterウィジェットの埋め込み方
・埋め込みのカスタマイズについて

1.Twitterの埋め込みとは

Twitterの埋め込みとは、PC画面のサイドバーあたりで見かけるTwitterのタイムラインのウィジェットをサイトやブログ内に埋め込むことです。

次のようなTwitterのタイムラインをブログなどに埋め込むことができます。

Twitterへの流入が期待できるので良さもありますが、ブログの表示速度が悪化する可能性もあります。

試してみて問題ないようであれば導入してみるといいかもしれませんね！

2.Twitterウィジェットの埋め込み方

サイトやブログへのTwitterの埋め込みは非常に簡単で作業的に3分程度で完了します。

【Twitterの埋め込み方】
専用サイトにアクセス→[TwitterのアカウントURLの入力]→[Enter]と進みます。

次にタイムラインを埋め込む場合[「Embedded Timeline」を選択]と進みます。

そして表示されたコードをブログ内の表示させたい箇所に貼り付けて完了です。

【参考】
上記デフォルトのコードをそのままブログに埋め込むと、次のように縦に長く冴えない感じで表示されます。

よって、コードをカスタマイズしてお好みのデザインに仕上げていきます。

関連TwitterURL｜URLの貼り付け方や短縮や検索

3.埋め込みのカスタマイズについて

カスタマイズは、デフォルトのコードにこれからご紹介する「属性」と「値」コードをaタグ内に追加することで行うことができます。

例えば、幅と高さを変えたい場合、デフォルトコードのaタグ内に「width」属性と「hegiht」属性を追加（赤字）した下記コードをブログに埋め込みます。

<a class=”twitter-timeline” width=”280px” height=”400px” href=”https://twitter.com/appriding?ref_src=twsrc%5Etfw”>Tweets by appriding</a> <script async src=”https://platform.twitter.com/widgets.js” charset=”utf-8″></script>

aタグ内に属性と値を追加するときの留意点は次のとおりです。

各属性と値の前後は半角スペースを入れる
属性を指定する順番に決まりはない

カスタマイズ一覧

カスタマイズ	コード例	説明
幅	width=”280px”	幅を指定します。単位は「px」
高さ	height=”400px”	高さを指定します。単位は「px」
表示ツイート数	data-tweet-limit=”1″	表示するツイート数を固定します。これを指定するとツイートが自動更新されなくなります。
テーマ	data-theme=”light”	テーマを明るくします。
テーマ	data-theme=”dark”	テーマを暗くします。
リンクカラー	data-link-color=”#e55937″	リンクの色をしています。
ボーダーカラー	data-border-color=”#ff0000″	線の色を指定します。
ヘッダー非表示	data-chrome=”noheader”	ヘッダーを非表示にします。
フッター非表示	data-chrome=”nofooter”	フッターを非表示にします。
ボーダー非表示	data-chrome=”noborders”	線を非表示にします。
スクロールバー非表示	data-chrome=”noscrollbar”	スクロールバーを非表示にします。
背景透明	data-chrome=”notransparent”	背景の色を透明にします。
ヘッダーフッター非表示	data-chrome=”noheader nofooter”	「data-chrome=””」系の複合の書き方です。