twitterへの投稿を埋め込み！ブラグイン不要★

2017/10/29 WordPress, ノウハウ

twitterへの投稿を埋め込み！

twitterへの投稿内容が自動的に更新されるようになっているスペースを作っているWEBサイトを良く見かけます。

twitterの良いところは、気軽で簡単に思ったことをつぶやいたり、画像や動画をアップしたり出来ることだと思います。逆に悪いところは、他の人のつぶやきに埋もれてしまうこと。

それを簡単に解消することが出来るのがWEBページにtwitterへの投稿を「埋め込み」することです。

簡単に出来る作業でSEOにも効果があるとか・・・

今回は、
twitterへの投稿を埋め込み！ブラグイン不要★
というテーマで投稿します。

STEP1　基本コードを取得

まずはこちらのサイトに行きましょう。

このようなページが現れたと思います。

少し下にスクロールすると・・・

投稿オプションが表示されます。
矢印の、“Embedded Timeline”（タイムライン埋め込み）を選択しましょう。

“Paste a URL”(URLを貼り付けてください）とあります。

貼り付けるURLは、
“https://twitter.com/”+”ご自身のtwitterアカウント”。

私の場合は下記のようになります。
“https://twitter.com/monemone_ad”

このURLをコピー＆ペーストして、”Preview”をクリック。

次のような画面が表示されたと思います。

ここで、”Copy Code”をクリックすれば、twitterへの投稿をWEBサイトに埋め込むためのコードを入手できます。

簡単ですね。

STEP2　カスタマイズ

せっかくなのでカスタマイズしましょう。

“set customization options.”（カスタマイズオプションを設定）をクリックしてみましょう。

埋め込む際のサイズをカスタマイズ

Height(px)、Width(px)とあります。

■Heightは高さ（長さ）
■Widthは幅

私の場合は次のような設定にしました。

■Height = “600”
■Width = “320”

右下にある“Update”（更新）ボタンをクリックします。

すると、「プレビュー」と「そのプレビューを埋め込むためのソースコード」が取得できるようになります。

プレビューはこんな感じです。

細長い感じに変わりました。

WEBサイトのサイドバーに埋め込む場合は、幅320pxぐらいを基準に高さを調整すると良いと思います。

またトップページのメインカラムに埋め込む場合は、幅を大きくして目立たせるのも良いでしょう。

背景色とリンクテキストの色を変える

背景色はデフォルトの”Light”と”Dark”のどちらかを選択することができます。
またその横のボックスでリンクテキストのカラーを選択できます。

だいぶ印象が変わりました。

言語を選択

表示する言語を選択できます。

日本語を選択すると・・・

English(default）だと・・・

こんな感じになります。

あとは、コードを取得してサイトに埋め込みます。

STEP3　twitterへの投稿内容をサイトに埋め込み

私の場合は”WordPress”を使用しているので、ウィジェットを使いました。

ここでも少しコードを追加しています。
赤のアンダーラインを引いたところが追加した部分です。

カスタマイズのためのタグ

次のようなカスタマイズのためのタグがあるようです。

data-border-color=”カラーコード”	ウィジェットを囲むボーダーと、ツイートを区切るボーダーの色を指定。
data-chrome=”noheader”	タイムラインのヘッダーをなくす。
data-chrome=”nofooter”	タイムラインのフッターをなくす。
data-chrome=”noborders”	ウィジェットの周りやツイートの間のボーダーをなくす。
data-chrome=”noscrollbar”	タイムラインのスクロールバーが表示されないようにする。
data-chrome=”transparent”	タイムラインの背景を透明にする。

いろいろなことができますね。

私は、次の3つを使用しました。
■data-border-color=”カラーコード”
■data-chrome=”noheader”
■data-chrome=”nofooter”

※date-chrome=”noheader nofooter”と記載することが可能です。

最後に、<div align=”center”></div>で取得したタグを囲み、サイドバーの水平方向の真ん中に表示されるようにしました。