ホームページをもっとよくする!Jimdoワンポイント講座

ホームページをもっとよくする!Jimdoワンポイント講座

第51回目「JimdoにTwitterのタイムラインを掲載してみよう」

Jimdoではさまざまな外部ツールと連携することができます。前回はInstagram(インスタグラム)との連携をご紹介しましたが、今回はもう一つの人気SNS「Twitter(ツイッター)」のタイムラインをJimdoへ表示させる方法を解説します。

笑顔アリーナ

ラーメン屋で塩ラーメン、なう!(ポチッ)


ルドルフ

ルドルフくん、何をブツブツつぶやいているの?


笑顔アリーナ

ああ、アリーナちゃん。今、アリーナちゃんとラーメンを食べているのを、Twitterに投稿してたんだよ。


ルドルフ

ルドルフくん、Twitterをやっていたのね。そういえば、TwitterとJimdoって連携できるのを知ってた?


ルドルフ

えっ、そうなの?!知らなかった!教えてくれる?!


ルドルフ

もちろんよ。解説するわね。


【JimdoとTwitter(ツイッター)の連携について】

 

Twitterは「ミニブログ」とも呼ばれるネット上のコミュニケーションツールです。140文字以内(海外では280文字)で、近況を伝えたり情報を投稿することができます。Instagram(インスタグラム)が画像や動画が中心なのに対し、Twitterは文字+画像(動画)を使用します。

「リツイート」や「いいね」を使って、第三者の投稿を拡散することができます。投稿内容にもよりますが、拡散力が高く、広めるスピードが速いのが特徴です。

JimdoにTwitterのタイムラインを表示することができます。本稿では、設置方法について詳しく解説します。

 

(1)Twitterって何?タイムラインとは?

(2)準備しよう

(3)JimdoにTwitterの「フォローボタン」を設置しよう

(4)JimdoにTwitterの「タイムライン」を表示させよう

 

 

(1)Twitterって何?タイムラインとは?

 

Twitter(ツイッター)は、140文字以内の文字、画像、動画などを組み合わせて投稿ができる、手軽な情報発信ツールです。スマートフォンの普及に伴い、ユーザー数も増加しました。日本国内の月間アクティブユーザー数は、4,500万人とも言われ(※1)、Facebook・Instagramと比べると最もユーザーのアクションが活発なSNSです。

 

※1)【2018年10月更新】人気SNSの国内&世界のユーザー数まとめ(Facebook、Twitter、Instagram、LINE)

https://blog.comnico.jp/we-love-social/sns-users より

 

■国内月間アクティブユーザーの年代別分布

※グラフは下記サイト様に掲載されているデータを元に作成しております。

https://appbu.jp/share-of-social-media

 

Twitterの「タイムライン」とは?

複数の投稿が時系列に並ぶ、投稿一覧のことを言います。いろいろな人のTwitterをフォローしていくと、タイムラインに登場する投稿数が増えていきます。

 

一方、自分がフォローされれば、今度はフォローしてくれた相手(=フォロワー)のタイムラインに、自分の投稿が表示されるようになります。フォロワーが増えれば増えるほど、自分の発言を読んでもらうチャンスが増えるということになります。

 

スマートフォンのアプリから簡単に投稿ができるため、お店や企業の新着情報の発信やブログの代替ツールとして活用しているケースもあります。


 

 

(2)準備しよう

 

TwitterとJimdoを連携させるには、あらかじめTwitterのアカウントを取っておく必要があります。

https://twitter.com/こちらのページから無料で登録できますので、まだアカウントがない場合は、準備しておきましょう。

 

 

TwitterとJimdoの連携には「フォローボタンを設置する」と「タイムラインの埋め込み」の2種類があります。

順番に解説していきます。

 

 

 

(3)JimdoにTwitterの「フォローボタン」を設置しよう

 

JimdoにTwitterのフォローボタンを設置しましょう。基本機能でおこなうことができます。

 

1) ボタンを設置したい箇所で「コンテンツを追加」をクリックします。

 

2)「その他コンテンツ」の「Twitter」をクリックします。

 

3)Twitterボタンの設置画面が表示されます。

「Twitter ユーザー名」には、Twitterのユーザー名を入力します。ユーザー名は、自身のTwitterアドレス「https://twitter.com/xxxxxxxxxxx」の赤字部分です。

 

4)「フォローボタン」について。

「ボタン」「数を表示」の2種類が選択できますが、現在はどちらを選んでも変化が出なくなっています。

※Twitter側の仕様変更などで変わる場合があります。

 

5)Twitterボタンの設置が完了しました。

 

【「Twitterに接続」と表示される場合】

ボタンの文言が「Twitterに接続」と表示されている場合は、訪問者がそのボタンを押すことで、フォローボタンに切り替わります。

 

 

 

(4)JimdoにTwitterの「タイムライン」を表示させよう

 

TwitterのタイムラインをJimdoへ表示させたい場合は、Twitter社が提供している「Publish」という機能を使用します。

 

1)「https://publish.twitter.com/」へアクセスし、「What would you like to embed?」へ埋め込みたいタイムラインのURL(Twitterのアドレス)を入力し、キーボードのEnterキーを押します。

 

2)「Here are your display options」と表示されますので、ここでは左側の「Embedded Timeline」をクリックしましょう。

 

3)このままでもOKですが、表示スタイルをカスタマイズしたい場合は「set customization options.」をクリックします。(中~上級者向け)

カスタマイズをしない場合は、「6)発行されたコードをコピーします」へ進んでください。

 

4)カスタマイズ画面が表示されました。

①What size would you like your timeline to be?

表示されるタイムラインの高さや幅を指定できます。

 

②How would you like this to look?

タイムラインの背景色を設定することができます。Light/Dark(白い背景色/黒っぽい背景色)の2種類です。右横のボタンでは、リンクのカラーを変更できます。

 

③What language would you like to display this in?

言語を指定することができます。日本語で表示する場合は「Automatic」のままでOKです。

 

 

5)カスタマイズが完了したら「Update」ボタンをクリックします。

 

6)発行されたコードをコピーします。

 

7)Jimdoサイトにログインした状態で、Twitterのタイムラインを表示させたい場所へ移動します。「コンテンツを追加」→「その他コンテンツ&アドオン」をクリックしましょう。

 

8)「ウィジェット/HTML」をクリックします。

 

9)さきほどコピーしたコードを貼り付けて「保存」をクリックしましょう。

 

10)Twitterのタイムラインが表示されました。

 

Twitterの「Publish」画面でカスタマイズすると、このように背景が黒っぽいタイムラインを表示することもできます。

以上で、JimdoとTwitterの連携設定は完了です。

輝くルドルフ

表示できたよー!アリーナちゃん、ありがとう!


ウインクアリーナ

よかったわね、ルドルフくん!


まとめ

JimdoにTwitterを連携させる方法は2種類あります。1つ目の「フォローボタン」はJimdoに付属している基本機能で設定できますが、2つ目の「タイムライン」を表示させたい場合は、Twitter社が提供する「Publish」を使用します。英語版にはなりますが、3ステップ程度で、連携用のコードが作成できますので、Twitterを使っている人はぜひJimdoと連携させてみてくださいね。


ルドルフの小言

泣くルドルフ

ホームページを良くしていくのってなかなか難しいよね。

詳しい人に相談できるといいんだけど・・・


ウインクアリーナ

そんな時はJimdoCafeがオススメよ!

JimdoCafeのことは、ここのページを見てみて!

▶︎▶︎ Jimdoユーザーの駆け込み寺「JimdoCafe」