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

twitterへの投稿を埋め込み!ブラグイン不要★
スポンサーリンク

twitterへの投稿を埋め込み!

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

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

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

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

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

STEP1 基本コードを取得

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

Twitter Publish

このようなページが現れたと思います。 twitterへの投稿を埋め込み!ブラグイン不要で簡単★

少し下にスクロールすると・・・ twitterへの投稿を埋め込み!ブラグイン不要で簡単★

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

twitterへの投稿を埋め込み!ブラグイン不要で簡単★

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

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

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

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

次のような画面が表示されたと思います。
twitterへの投稿を埋め込み!ブラグイン不要で簡単★

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

簡単ですね。

STEP2 カスタマイズ

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

twitterへの投稿を埋め込み!ブラグイン不要で簡単★

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

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

twitterへの投稿を埋め込み!ブラグイン不要で簡単★

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

■Heightは高さ(長さ)
■Widthは幅

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

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

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

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

プレビューはこんな感じです。
twitterへの投稿を埋め込み!ブラグイン不要で簡単★

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

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

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

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

twitterへの投稿を埋め込み!ブラグイン不要で簡単★

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

twitterへの投稿を埋め込み!ブラグイン不要で簡単★

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

言語を選択

twitterへの投稿を埋め込み!ブラグイン不要で簡単★

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

日本語を選択すると・・・
twitterへの投稿を埋め込み!ブラグイン不要で簡単★

English(default)だと・・・twitterへの投稿を埋め込み!ブラグイン不要で簡単★

こんな感じになります。

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

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

私の場合は”WordPress”を使用しているので、ウィジェットを使いました。
twitterへの投稿を埋め込み!ブラグイン不要で簡単★

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

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

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

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>で取得したタグを囲み、サイドバーの水平方向の真ん中に表示されるようにしました。

完成!

twitterへの投稿を埋め込み!ブラグイン不要で簡単★

こんな感じにしました。

まとめ

今回は、
twitterへの投稿を埋め込み!ブラグイン不要★

というテーマで投稿しました。

プラグイン不要で簡単にコード取得ができるので、15分あれば設置完了です。
簡単!!

SEOの効果がどこまであるのかは定かではありませんが・・・
良かったら試してみてください★