\ポムミーの代わりはペライチ/

12月末でポムミーのサービスが終了します!

乗り換えがまだの方はペライチで無料作成
ブログクエスト カテゴリから記事を探す

CocoonのサイドバーにTwitterのタイムラインを埋め込む方法

WordPressでサイドバーにTwitterを埋め込む方法 ブログデザイン
WordPressでサイドバーにTwitterを埋め込む方法
この記事は約2分で読めます。

この記事では、WordPressのサイドバーにTwitterのタイムラインを埋め込む方法をご紹介します。

最近では、ブログ×SNS集客が当たり前になりつつあるので、できる限り自分のツイートを色々な人に見てもらうチャンスを作りたいですよね。

そのチャンスを作る簡単な方法が、Twitterのタイムラインをブログに埋め込むことです。

PCでブログを見た時に、今ツイートしたタイムラインが載っていると、わざわざTwitterを開かせなくても自分のツイートを見てもらうことができます。

サイドバーのTwitter
サイドバーのTwitter


スポンサーリンク

サイドバーにTwitterを埋め込む方法

Twitterをサイドバーに埋め込む方法①
Twitterをサイドバーに埋め込む方法①


ダッシュボード > 外観ウィジェットテキスト をサイドバーに追加する。

Twitterをサイドバーに埋め込む方法②
Twitterをサイドバーに埋め込む方法②


サイドバーに追加したら、自分のTwitterのURLをコピーして、ビジュアル枠内に張り付けると、↑のように自分のタイムラインが現れます。タイムラインが現れたらEmbed をクリック。

Twitterをサイドバーに埋め込む方法③
Twitterをサイドバーに埋め込む方法③


↑のようなTwitterの英語画面が開きますので、左側のEmbedded Timeline をクリック。

Twitterをサイドバーに埋め込む方法④
Twitterをサイドバーに埋め込む方法④


ここで、set customization options をクリックして、タイムラインの大きさ(高さ・幅)を決めます。

Twitterをサイドバーに埋め込む方法⑤
Twitterをサイドバーに埋め込む方法⑤


ちなみに、高さと幅は、高さ:600、幅:700がオススメです。高さと幅を決めれたら、Update ボタンをクリックしてください。

Twitterをサイドバーに埋め込む方法④
Twitterをサイドバーに埋め込む方④


Twitterを埋め込むためのHTMLを自動生成してくれたので、Copy Code で自動生成後のHTMLをコピーします。

Twitterをサイドバーに埋め込む方法⑤
Twitterをサイドバーに埋め込む方法⑤


ダッシュボードに戻って、テキストウィジェットの、テキストタブを開いて、ここに先ほどのHTMLコードをペーストしてください。

このとき、デフォルトで入力されている自分のTwitter URLは消してください。

Twitterをサイドバーに埋め込む方法⑥
Twitterをサイドバーに埋め込む方法⑥


↑のようにペーストしたら保存 をクリックして、自分のサイトを表示してみて下さい。

サイドバーTwitter埋め込み後
サイドバーTwitter埋め込み後


こんな風になっていたらできあがりです!

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