WEBサイトにTwitterリンクを埋め込む方法【3種類!】

HTML

 

□読んで欲しい人!
・WEBサイトに、Twitterリンクを埋め込みたい人

 

今回は「WEBサイトにTwitterリンクを埋め込む方法」について紹介します!

コーポレートサイトや個人サイトでも、Twitterリンクを貼っているWEBサイトが多いです。

これからWEB制作をしていきたい人はいずれ行う実装なので、分からない人がいたら今回を機にマスターしましょう!

Twitterリンクの埋め込み方は3種類ありますが、すべて難しくありません。

是非最後までご覧ください!

 

Twitterリンクの埋め込みの種類【3種類!】

Twitterの埋め込み方には、3種類あります!

① タイムライン

② ツイート

③ ツイートボタン

 

あなたが使う形式に合わせて、埋め込んでみてください!

 

① タイムライン

Twitterのタイムラインを埋め込んでいきましょう!

 

まずは取得したいTwitterのタイムラインのURLを取得します。

今回は僕のTwitterを例に!

タイムラインを埋め込みたい時は、Twitterの個人アカウントのURLを取得しましょう。

 

次にこちらのサイトにアクセスします。

そして、先ほどコピーしたURLを検索バーに貼り付けます。

URLを入れて「Enter」を押すと、画面が移動します。

そして「Embedded Timeline」をクリック!

 

そしてTwitterリンクを埋め込む際のサイズを調整したい人は、「set customization options」をクリックしてください。

 

以下の画像のように、タイムラインのサイズや背景色を設定することができます。

設定が終わったら、「update」のボタンをクリックして更新!

 

設定が終わったら、「Copy Code」のボタンをクリックします!

これで、タイムラインのコードを取得することができました。

 

 

 

そしてコピーしたコードを、HTMLファイルに貼り付けます!

 

ブラウザを確認すると、Twitterのタイムラインが表示されました!

 

以上が、Twitterのタイムラインの埋め込む方法でした!

 

② ツイート

ツイートを埋め込んでみましょう!

 

まずは、埋め込みたいツイートを開きます。

そして、「3本の丸のアイコン」をクリック!

 

 

そして「ツイートを埋め込む」をクリック!

 

そして「Copy Code」をクリックしてコピーします!

ツイートのサイズの変更は、先ほどのタイムラインとやり方は一緒です。

 

コピーしたコードをHTMLファイルに貼り付けると、以下の画像のようにツイートを表示させることができます!

 

以上が、ツイートを埋め込む方法でした!

 

③ ツイートボタン

最後にツイートボタンをWEBサイトに埋め込んでみましょう!

 

まずは、TwitterアカウントのURLをコピーします。

 

コピーしたURLを貼り付けます。

そして「Enter」をクリック!

そして、「Twitter Buttons」をクリック!

 

そして、お好きな表示形式を選んでください!

 

そして、コピーボタンをクリック!

 

コピーしたコードをHTMLファイルに貼り付けると、以下の画像のように表示されます!

 

以上が、ツイートボタンを埋め込む方法でした!

 

まとめ

以上が、「WEBサイトにTwitterリンクを埋め込む方法」でした!

今回の記事が参考になれば嬉しいです。

これからもWEB制作の技術について中心にブログを書いていくので、よろしくお願いします!