bloggerとツイッターを連携させよう!!ガジェット応用編1

製作 blogger初心者講座

2016/11/09(水)

blogger初心者講座第8回:ツイッターと連携!

bloggerをこれから始められる方に向けて使い方を紹介しているのですが、だいぶ思い通りのかわいいブログを作れるようになってきたのではないでしょうか。

今回は前回のガジェットの応用編というコトで、サイドバーやフッターにツイッターのつぶやきを載せる方法を紹介していきますね。

bloggerツイッター連携:もくじ

  1. 自分のツイッターのユーザー名を調べる
  2. ユーザー名で置き換え
  3. bloggerのガジェットに追加

自分のツイッターのユーザー名を調べる

bloggerにツイッターのつぶやきを載せるにはツイッターのユーザー名が必要となります。なのでまずツイッター側の操作から始めていきますね。

ツイッターの画面を開いたら左上に自分のユーザー名(@が付いているやつです)が載っています。これをコピーするか覚えてください。

ユーザー名で置き換え

自分のツイッターのユーザー名が確認できたら、以下のコードの「○○○」のトコロに@を付けないでローマ字の部分だけで置き換えてください。


<a class="twitter-timeline" data-height="600" href="https://twitter.com/○○○"></a> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

bloggerのガジェットに追加

ココまできたらあとは前回のおさらいです。bloggerにガジェットを追加していきましょう!

blogger59

ガジェットの編集をするには左のメニューから「レイアウト」を押すんでしたね。

Tokyoテンプレートを使われている方は今回は「フッター中央」の枠にツイッターガジェットを追加しますので、「フッター中央」を探してください。

見つかったらorツイッターガジェットを追加したい枠を選んだら、その枠の「ガジェットを追加」を押してくださいね。

blogger63

コンタクトフォームは「その他のガジェット」から追加しましたが、そのほかの場合はすべて「基本」から選んでいきます。

ツイッターやフェイスブック、地図のような動きのあるガジェットなら「基本」の中から「HTML/JavaScript」を選んでください。

自己紹介のような自分で決まった文を打つ場合は「基本」の中から「テキスト」を選んでくださいね。(さらに写真なら「イメージ」を選んでください。)

今回はツイッターなので「HTML/JavaScript」をクリック!

blogger73

新しくこんな画面が出てくるので、先ほど自分のユーザー名に置き換えた上記コードをそのまま貼り付けてください。

後はいつもどおり「保存」を押して、右上のバッテンでウィンドウを閉じてくださいね。

ツイッター連携完了!

blogger74

さっそく自分のブログを確認してみましょう。

ちゃんとブログのフッターにツイッターのつぶやきが表示されていますね!

ツイッターガジェットの色を変えたい!

ツイッターガジェットの色や高さを変更するコトが出来ます。以下のツイッター公式ページより行えるのですがぜんぶ英語なのでチョットがんばらないといけません。

https://publish.twitter.com/#

最初の「Enter a twitter URL」には自分のツイッターURLを入力します。(例:https://twitter.com/○○○)

bloggerとツイッターを連携させて情報を発信しよう!

今回はbloggerとツイッターを連携させてブログにツイッターのつぶやきを表示させる方法を写真つきで紹介しました。

bloggerではガジェットという機能を使ってツイッターのつぶやきをカンタンに表示させることができます。ぜひブログ上にツイッターのつぶやきも載せて、たくさんの情報を発信できるようにしてみてくださいね!

bloggerでかわいいブログを持とう!

かわいいblogger用デザインを無料配布中です。合わせて参考にしてくださいね!

模様替えのできるチェック柄ブログなら

bloggerテンプレート「Kyoto」ダウンロードページへ