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

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

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の効果がどこまであるのかは定かではありませんが・・・
良かったら試してみてください★

コメント

タイトルとURLをコピーしました