はてなブログにTwitterのタイムラインを埋め込む方法
おすっ!つな(@tu_na_69)です(@_@。
こんな雪の日には、ブログのサイドバーにTwitterのタイムラインを埋め込みしたいなぁ、なんてことを思うのです。
あなたも同じ考えでしたか。
それでは早速やってみましょう。
埋め込みコードを作る
Twitterのタイムラインを埋め込むためのコードを作ります。
↓「Twitter publish」のサイトへGO
①空欄にTwitterのURLを入力して「enter」を押します。
注:アカウントではありません。
URLです。
わたしのサイトだと↓こちら
よろしければフォローもどうぞよろしくお願いします。
あんまりつぶやいていません。ごめんなさい。
忙しくてつぶやいている暇がない。
記事を書く時間はあっても←こっちの方が時間がかかっているけれども。
あっ、また話が脱線しました。すみません。
②タイムライン表示を選んでクリックします。
左の「タイムライン」を選びます。
③コードをコピーします。
②の画像をクリックすると、下に生成されたコードが表示されます。
「Copy Code」をクリックして、コピーします。
コードの下にはTwitterのタイムラインも表示されますよ。
ブログにコードを貼り付ける
①ダッシュボードから「デザイン」→「カスタマイズ」→「サイドバー」をクリックします。
②一番下にある「+モジュールを追加」をクリック。
③</>HTMLをクリック
④タイトルを入力
「twitterタイムライン」とか「フォローしてね」とか、好きなタイトルを入力してください。
⑤コピーしたコードを貼り付けます。
⑥「適用」をクリックして完了です。
タイムラインをカスタマイズ
コピペしたコードに、ピンクとグリーンの下線部分を追加挿入して、サイズと表示件数をカスタマイズしました。
サイズをカスタマイズ
デフォルト(初期設定)では、タイムラインはかな~り長いのでサイズを調整します。
幅(width="")と長さ(height="")で調整できますが、長さは表示件数で調整するので、ここでは幅だけにしました。
表示件数をカスタマイズ
サイズのカスタマイズで長さ(height)を設定することも可できますが、それよりも表示件数を設定したほうがすっきりします。
表示件数は1~20の間で設定できます。
「20」にするなら、長さ設定したほうがいいだろうけど(;^_^A
ここでは、「3」に設定しています。
だいぶすっきりします。
まとめ
ブログにTwitterのタイムラインを埋め込むことで、さらに動きのあるサイトになったと思います。
はてなブログとTwitterを連携させたい方はこちらの記事を参考にどうぞ。
記事を紹介してくれたサイト
この記事が参考になったと言及してくださったサイトを紹介しています。ありがとうございます。
- 特定ツイートを Hatena Blog に表示する方法 - へのへのもへじ
- Twitterのタイムラインをサイドバーに表示させる方法 - すんげブログ
- ブログのサイドバーにTwitterタイムラインを埋め込みました! - 生きるのをもっと楽に、楽しく
- Twitterのタイムラインをブログに埋め込んでみた - 海外 ひとり旅の野望!
- 【おすすめ】はてなブログのテーマ「UnderShirt」を使ってブログのデザインを一新しました! - 思い考える日常
- 【ブログ Twitter連携】Twitterもやっているので、はてなブログ内にツイートをのせてみた・・結局やめたその理由とは。 - ken-j’s diary
- 改装しました - みっちぇの節約レポ
- ブログのUIを改善(?)しました! - 人間初心者
- サイドバーを少しいりじました - KnoNの学び部屋
- はてなブログ初心者専用!カスタマイズやデザイン方法 まとめ - TomoGのごちゃまぜ倉庫
- Twitter連携でフォロアー拡大♪過去ブログの続きです~ - わたしとかぞくと... (サイドビジネスとパートと育児の狭間にて)
- はてなブログのサイドバーにInstagramのリンクをつける方法 - 京野が女、妻、母、エンジニアとしての生き方を考えるブログ
- ブログ立ち上げの記録(7/8更新) - Let's enjoy 同人
- 自己紹介(はじめての方はどうぞ) - 鯖缶@3rd&forever
はてなブログとTwitterを連携させて使いこなす
おすっ!つな(@tu_na_69)です(^_-)-☆
はてなブログとTwitterを連携させてたいと思います。
はてなブログとTwitterを連携させると…
①Twitterでブログ更新のお知らせができる
②Twitterからブログを読みに来てくれる人がいる(かもしれない)
などメリットがあります。←効果があるかどうかは、やり方次第だけど。
さっそく、はてなブログとTwitterを連携させてみましょう。
つなろっくおすすめの1曲を聴きながらどうぞ(*‘∀‘)
はてなブログとTwitterを連携させる
①ダッシュボードから「アカウント設定」→「外部サービス連携」をクリックします。
②「Twitter連携設定」が「現在無効です」となっていますよね。
となりの青い文字で書かれた「有効にする」をクリックします。
③アカウント認証ページで「Twitter認証画面にすすむ」をクリックします。
④認証画面で「ユーザー名」と「パスワード」を入力します。
⑤「現在有効です」と表示されれば連携完了です。
「フォローする」ボタンを設置する
ブログのサイドバーに「フォローする」ボタンを設置します。
①ダッシュボードから「デザイン」→「カスタマイズ」→「サイドバー」をクリックします。
②「プロフィール」の「編集」をクリック。
③Twitterのフォローボタンにチェックを入れる
④「適用」をクリックして完了。
ブログをチェックしてみてください。
プロフィール欄にtwitterのフォローボタンが挿入されました。
Twitterでお知らせする方法
Twitterに更新した記事を投稿したりして、お知らせしたいと思います。
TwitterのマークをクリックしてツイートしてもOK。
ブックマークでもTwitterに投稿されます。
これで新着記事のお知らせとかできますね(^^♪
Twitterをさらに連携させる
Twitterとはてなブログを連携させたら、タイムラインウィジェットをサイドバーに挿入したり、「フォローする」ボタンを設置することもできます。
こちらの記事で紹介しています。
記事を紹介してくれたサイト
この記事が参考になったと以下のサイトで紹介していただきました。ありがとうございます。
・ツイッターの自己紹介文・ホーム画面にブログのリンクを貼る方法! - スタべえlog
・ブログ開設初日でアクセス獲得する方法 - 初心者ブロガーでもできる対策 - 30代OLのリッチな憧れ
・【初心者でも出来る】はてなブログとTwitterの連携! - 林檎を買うまでには
・Twitter連携でフォロアー拡大♪過去ブログの続きです~ - わたしとかぞくと... (サイドビジネスとパートと育児の狭間にて)
・Twitterはじめてみました - 職業訓練校のまいにち~職業訓練ではどんな授業をしているのか~
・はてなブログとTwitterを連携させてみた - 一匹狼の回顧録