DESIGN IT YOURSELF.

BUROKI


top

blog

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

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

design_thing

  • top
  • blog
  • 誰でも簡単にできる!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

2023年11月の活動報告。11月はこんなデザイン制作をしていました

今年も残すところあと1ヶ月。 振り返るにはまだ早いですが、ざっと今年を振り返ってみたところ、なかなか濃い1年でした。まだ年末ごろに振り返りのブ…

2023.12.08.

private

念願の函館旅行・最終日。朝の金森赤レンガ倉庫付近を散歩する

2023年最初で最後の函館旅行3日目。2泊3日なのでこの日が最終日。 前日と同じくラビスタ函館ベイで朝を迎えました。 少し前に書いた函館旅行1日目と2…

2023.12.04.

think

念願の函館旅行・2日目。これを食べに来た!口コミ7年連続北海道1位に感動

2023年最初で最後の函館旅行2日目。 ラビスタ函館ベイで朝を迎えました。 少し前に書いた函館旅行1日目のブログは下記のリンクよりご覧ください。 念…

2023.11.30.

private

念願の函館旅行・1日目。雪が降る前に2泊3日で北海道函館へ行ってきました

2023年最初で最後の旅行ということで、先週火曜日から木曜日までの三日間、北海道は函館へ行ってきました。 北海道へは過去に三度行ったことがあるの…

2023.11.26.

think

2023年10月の活動報告。10月はこんなデザイン制作をしていました

少しバタバタしており、前回のブログから少し時間が空いてしまいました・・。 サムネイルは自宅の近くにある人気お好み焼き店「AT THE 21」のモダン…

2023.11.06.

think

2023年9月の活動報告。9月はこんなデザイン制作をしていました

今年から始めた筋トレ。 開始時は筋肉痛がひどく重量もたいした重さではトレーニングできませんでしたが、人間とは慣れるもの。徐々に重量を上げてい…

2023.10.06.

blogをもっと見る

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

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

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

topトップページ

aboutブロキについて

designデザイン

voiceお客さまの声

blogブログ

films制作動画

cassetteカセットテープ

snsソーシャル