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>で取得したタグを囲み、サイドバーの水平方向の真ん中に表示されるようにしました。
完成!
こんな感じにしました。
まとめ
今回は、
twitterへの投稿を埋め込み!ブラグイン不要★
というテーマで投稿しました。
プラグイン不要で簡単にコード取得ができるので、15分あれば設置完了です。
簡単!!
SEOの効果がどこまであるのかは定かではありませんが・・・
良かったら試してみてください★
コメント