HTML(31)SNSの埋め込みについて

HTMLとCSSでページを彩ろう HTML
HTMLとCSSでページを彩ろう

http:// 前回は地図の表示の仕方について紹介しました。

HTML(30)地図の表示の仕方について
今回は、地図表示の仕方について紹介します。HTMLでの地図の表示の仕方は意外と簡単です。是非実践してみましょう。
kamechannel.com
2025.01.09

今回はSNSの埋め込みについて紹介したいと思います。

【もっと詳しく知りたい人は是非これを読んでください！！】

1冊ですべて身につくHTML＆CSSとWebデザイン入門講座 /SBクリエイティブ/Mana（単行本）

価格:747円 (2024/12/16 23:17時点) 感想(2件)

HTMLでのSNSの埋め込み方

ウェブサイトにSNSを埋め込むと、サイトがもっと魅力的になります。訪問者にリアルタイムの情報を届けたり、画像や動画でサイトを華やかにしたりするのに便利ですよね。ここでは、主要なSNSをHTMLで埋め込む方法を、できるだけ分かりやすく説明します。

1. Twitterの埋め込み方

Twitterを埋め込むと、自分の最新ツイートを簡単にウェブサイトで表示できます。以下の手順でやってみましょう！

やり方

  1. Twitter Publishにアクセスします。
  2. 自分のTwitterアカウントや特定のツイートのURLを入力します。
    • 例: https://twitter.com/twitter
  3. 好きなデザインを選びます。
  4. 表示されたHTMLコードをコピーします。
  5. コピーしたコードを自分のHTMLファイルに貼り付けます。

コード例

<a class="twitter-timeline" href="https://twitter.com/Twitter">Tweets by Twitter</a> 
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

ポイント

  • <script>タグは絶対に忘れず貼り付けてください。
  • デザインを変更したい場合はCSSを使ってカスタマイズできます。

2. Instagramの埋め込み方

Instagramでは画像や動画を共有できますよね。投稿を埋め込むと、視覚的に華やかなページが作れます。

やり方

  1. 埋め込みたい投稿をInstagramで開きます。
  2. 投稿右上の「…」をクリックして、「埋め込み」を選択します。
  3. 表示されたコードをコピーします。
  4. コピーしたコードをHTMLファイルに貼り付けます。

コード例

<blockquote class="instagram-media" data-instgrm-permalink="https://www.instagram.com/p/xxxxxxxxxx/" data-instgrm-version="12"></blockquote>
<script async src="https://www.instagram.com/embed.js"></script>

ポイント

  • 投稿が「公開」設定になっていることを確認しましょう。
  • 埋め込みコードをそのまま使えばOKですが、デザインを調整したい場合はCSSを追加できます。

3. YouTubeの埋め込み方

YouTube動画を埋め込むと、動きのあるページを簡単に作れます。

やり方

  1. 埋め込みたい動画をYouTubeで開きます。
  2. 動画下の「共有」をクリックして、「埋め込む」を選択します。
  3. 表示されたHTMLコードをコピーします。
  4. コピーしたコードをHTMLファイルに貼り付けます。

コード例

<iframe width="560" height="315" src="https://www.youtube.com/embed/動画ID" frameborder="0" allowfullscreen></iframe>

ポイント

  • コード内のwidthやheightを調整することで、動画のサイズを変えられます。
  • allowfullscreenを付けると、訪問者がフルスクリーンで動画を見られるようになります。

4. Facebookの埋め込み方

Facebookの投稿やページを埋め込むと、訪問者に情報を直接届けられます。

やり方

  1. Facebook埋め込みツールにアクセスします。
  2. 埋め込みたいURLを入力します。
  3. 表示されたコードをコピーします。
  4. HTMLファイルに貼り付けます。

コード例

<div class="fb-post" data-href="https://www.facebook.com/投稿URL"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v3.2"></script>

ポイント

  • Facebook SDK（<script>タグ）を必ずHTMLに追加してください。

まとめ

SNSをHTMLで埋め込むのは意外と簡単です！

  • Twitter: リアルタイム情報を共有。
  • Instagram: 視覚的な魅力をアップ。
  • YouTube: 動画で動きのあるコンテンツを提供。
  • Facebook: 交流を深める情報発信。

自分のサイトに合わせてSNSを選んで、ぜひ試してみてください。

参考リンク

以上がSNSの埋め込みの紹介でした。
次回からは新しくjavascriptの紹介をしたいと思います！

スポンサーリンク