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年5月の活動報告。5月はこんなデザイン制作をしていました

5月になりましたね。 サムネイル画像は僕が前からずっと行きたかった十三にある人気ラーメン店「桐麺 本店」の桐玉です。麺と卵と出汁のみのシンプル…

2023.06.04.

private

ブロキの日本ダービー予想2023。今年の1着はあの馬で間違いなし!?

5月28日の日曜日は、我々にとって一大イベントが開催されますね。 その一大イベントとは・・そう、正解です。 「日本ダービー」ですね。 コロナ禍も…

2023.05.27.

think

本日5月13日、BUROKI design開業4周年を迎えることができました

2023年5月13日。 本日でBUROKI designは開業4周年を迎えることができました。 2019年の4月末に会社を退職して今の新居に引っ越し、4年前の今日、税務…

2023.05.13.

think

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

ゴールデンウィークはいかがでしたか? 僕はぼちぼち仕事しながらのんびりしていました。 しかし、ゴールデンウィーク中の4月末に人生の大きな決断を…

2023.05.11.

private

【天皇賞・春】リニューアルオープンした京都競馬場へ行ってきました

2020年秋より改修工事に入っていた京都競馬場が、約3年の時を経て4月22日にリニューアルオープンしましたね。 コロナも落ち着いて入場制限も緩和され…

2023.05.04.

private

大阪天満宮にある「鉄板焼 GUMP」で二度目の結婚記念日を祝う

4月22日は相方との結婚記念日。 今年で二度目の結婚記念日を無事迎えることができました。皆さまのおかげです。ありがとうございます。 昨年のこの日…

2023.04.29.

blogをもっと見る

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

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

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

topトップページ

aboutブロキについて

designデザイン

voiceお客さまの声

blogブログ

films制作動画

cassetteカセットテープ

snsソーシャル