DESIGN IT YOURSELF.

BUROKI


top

blog

  • top
  • blog
  • design_thing
  • 誰でも簡単にできる!webサイトにtwitterを表示させる方法

誰でも簡単にできる!webサイトにtwitterを表示させる方法

design_thing

  • top
  • blog
  • design_thing
  • 誰でも簡単にできる!webサイトにtwitterを表示させる方法

誰でも簡単にできる!webサイトにtwitterを表示させる方法

2020.06.18.

スポンサーリンク

スポンサーリンク

ボクのwebサイトには表示させていないのですが、クライアントさまによっては「運営しているtwitterをwebサイトにも表示させてほしい!」というご要望をいただきます。

twitterをされている人は多いと思いますが、自分のツイートをwebサイトに表示させられることを知っていましたか?実はけっこう簡単な方法で表示させることができるんです。

自分のtwitterをwebサイトに表示させると、サイトには載っていない最新情報が知れてリアルタイム感を出すことができます。ずっと更新されていないwebサイトって意外と多いですからね・・。サイトを更新できない理由はいろいろあると思いますが、twitterなら自分で手軽に更新できますし、それがサイトにも反映されるのは助かりますよね。

なので今回は、「自分のtwitterをwebサイトに表示させる方法」を紹介したいと思います。

BUROKIアイコン

簡単なのでぜひ実践してみてください!

index

目次

1. 「Twitter Publish」にアクセス

まずは表示させるコードを生成するために、「Twitter Publish」というwebページにアクセスします。

すると、ビックリするくらいシンプルなwebページが表示されます(笑)。

Twitter Publishのwebページ
検索窓だけという究極のシンプルさ・・

2. 検索窓にtwitterのURLを入力

次に、表示されている検索窓に、表示させたいtwitterアカウントのURLを入力します。twitterのURLは基本的に「https://twitter.com/●●(自身のアカウントID)」となっています。すごくシンプルですね。「●●」の部分は自分のアカウントIDを入れてくださいね。そのURLを入力します。

Twitter Publishの検索窓
こんな感じで入力!

入力が完了したら、検索窓の右端にある「→」ボタンをクリックします。

Twitter Publishの手軽なところ

このTwitter Publishに対して驚いたのが、自分のアカウント以外のIDを入力してもOKなんですよね。仕事でクライアントさまのアカウントを表示させる場合がたまにあるのでボクとしては助かりますが、使い方によっては勝手に自分のツイートをどこかのwebサイトに表示されている、といった怖いことも可能で・・

そんなことはしないように気をつけましょう。

3. 表示するパターンを選ぶ

検索窓のURLを入力し、矢印を押すと、勝手に次の画面に誘導してくれます。そこには2種類のレイアウト図が表示されていて、どちらかを選んでくださいとシンプルに問いかけてくれます。

Twitter Publishの表示するパターンを選ぶ画面
あなたはどちらを選びますか?

この図だけではわからない人に説明しますと、左側は自分のtwitterのタイムラインが表示され、右側は自分のフォローボタンが表示されます。

要は、左側を選んでタイムラインを表示させると、あなたの近況を伝えられますよ、という意味で、右側を選ぶと、webサイトからあなたのtwitterのフォロワーを増やせますよ、ということを伝えてくれています。今回の場合はwebサイトにリアルタイム感を出すことを目的としているので、左側のパターンを選びましょう。

BUROKIアイコン

大体タイムラインを表示させることが多いですね。

4. コードが生成されるので表示したいwebページにコピペ

どちらかの表示パターンを選ぶと、さらに下のページに誘導されます。するとそこには表示用のコードが生成されています。

Twitter Publishの検索窓
しかし簡単な手順でできますねぇ。

ここまで誰でも使いやすいようにつくっているtwitter社には頭が下がるというか、本当にすごいなと思いますね・・コードが表示されている右側にある「Copy Code」ボタンを押すとコードも簡単にコピーできます。これぞ神だな・・

あとはコピーしたコードを表示させたいwebページに貼り付けてサーバーにアップロードすると、webページにもtwitterが表示されるようになります。たったこれだけの手順です。

5. 表示されたデザインのカスタマイズも可能

本当はここで終わり!という感じなのですが、せっかくなんで少しだけ・・。表示させるデザインをカスタマイズできます。さきほどのコードをコピーする画面の、少し上に「set customization options.」というリンクがあります。ここをクリックします。

set customization optionsのリンクテキスト
これはなかなか気づかないですよね

するとカスタマイズ用の画面が表示されます。

Twitter Publishのカスタマイズ画面
ここで表示時の見た目をカスタマイズできますよ

カスタマイズといっても見た目をガラッと変えることができるわけではなく、縦幅や横幅のサイズ指定や、表示するときの色をライトかダークか選べたり、言語を選択できたりする程度です。

特に縦幅を指定することがとても大事です。指定しないと延々縦長で表示されてしまうことになるので、適切な高さを指定しましょう。

カスタマイズ設定完了後、「Update」ボタンを押す

サイズの数値など入力し、カスタマイズが完了したら右下にある「Update」ボタンを押し、もう一度4.の手順と同じく「Copy Code」でコードをコピーし、webページにペースト、サーバーへアップロードします。これで完了でございます。

facebookやinstagramなどのSNSにもwebページに表示させるコードは用意されていますが、twitterほど簡単ではなく英語表記で難易度も高いですが、twitterは本当に簡単なので紹介しました。

やってみようと思っていた人は、ぜひ試してみてくださいね。

スポンサーリンク

BUROKI写真

BUROKI写真

はじめましてBUROKIです。

ベンチャー企業にて11年間webやグラフィックデザインとブランディング経験を経て、2019年5月よりフリーランスデザイナーになりました。完全独学でフリーランスになった異色の経歴の持ち主だと思います(笑)

制作実績やインハウスデザイナーのことなど日々更新しています。デザイン制作のご依頼やお問い合わせなども受け付けてますので、なんでもお気軽にご相談ください。

ベンチャー企業でマスターデザイナーとして働いた後、フリーランスになりました。制作実績やインハウスデザイナーのことなど日々更新しています。制作のご依頼なども受け付けてますので、なんでもお気軽にご相談ください。

ご依頼・お問い合わせ

ご依頼・お問い合わせ

related contents

関連コンテンツ一覧
スポンサーリンク

文鳥とデザイナー

スポンサーリンク

blog list

ブログ一覧

think

SEO小話vol.06 クライアントが気づかないURLぐちゃぐちゃ問題を事前に回...

今年の4月より不定期に更新している「SEO小話」シリーズ。 少し間隔が空いてしまいましたが(いつもですねすいません)、これからももちろん更新して…

2024.07.24.

think

SEO小話vol.05 webサイト公開後、検索上位にこないんだけど!?の対処法

今年の4月より不定期に更新している「SEO小話」シリーズ。 お読みいただけているでしょうか?けっこうリアリティあって面白いと思うんですけどね。ま…

2024.06.28.

think

SEO小話vol.04 wordpressのSEOプラグイン、入れなくても問題な...

今年の4月よりマイペースにはじめている「SEO小話」。 ちょっと間隔が空きましたが・・今後ももちろん更新は続けるつもりです。さて今回はvol.04とい…

2024.06.21.

private

初めての鎌倉旅行・3日目。最後は横浜にある伝説の家系ラーメンで〆る

初めての鎌倉旅行もいよいよ3日目、最終日。2日目に江ノ電観光を満喫したので、最終日は鎌倉で相方が行きたい寺を巡ることにしました。 鎌倉旅行1日…

2024.06.15.

private

初めての鎌倉旅行・2日目。江ノ電に乗って観光名所巡り

初めての鎌倉旅行、2日目の朝を迎えました。2日目は江ノ電に乗って観光すると決めていたので、早朝6時半に起きて準備。鎌倉旅行1日目のブログは下記…

2024.06.11.

private

初めての鎌倉旅行・1日目。夏がくる前に2泊3日で鎌倉へ行ってきました

もうすっかり夏の陽気ではありますが、先日の6月4日から6日までの3日間、昨年の北海道函館旅行以来の旅行へいってきました。 今回向かった先は「鎌倉…

2024.06.08.

blogをもっと見る

制作のご相談・お問い合わせはフォームから

デザインのご依頼や予算のご相談、お問い合わせなどお気軽にお問い合わせください。
また、書いてほしいブログのリクエストやファンレター(笑)もお待ちしております。

問い合わせフォームはこちら

topトップページ

aboutブロキについて

designデザイン

voiceお客さまの声

blogブログ

films制作動画

cassetteカセットテープ

snsソーシャル