CONTACT

ホームページにSNSの投稿やフィードを埋め込むことで、ユーザーとのコミュニケーションを深めたり、SNSでの活動をホームページの訪問者にもアピールすることができます。

SNS埋め込みは、Instagramの写真やTwitterのタイムライン、YouTubeの動画などをホームページに表示することで、最新情報をリアルタイムで提供したり、SNSからの集客を促進したりするのに役立ちます。

この記事では、代表的なSNSの埋め込み方法と、WordPressやHTMLを使った効果的な実装手順を紹介します。

ホームページにSNSを埋め込むメリット

SNSをホームページに埋め込むことで、以下のようなメリットが得られます。

•最新の情報をリアルタイムで提供できる

ホームページ内にSNSのフィードを表示することで、最新の投稿やイベント情報、キャンペーンなどをリアルタイムで発信できます。
• ユーザーとのエンゲージメントを向上させる
SNSの投稿に対してホームページ訪問者がコメントやいいねをするなど、ユーザーとのエンゲージメントを高めることができます。
• SNSのフォロワー数を増やせる
ホームページを訪問したユーザーが、SNSの投稿を見てアカウントをフォローする可能性が高くなります。これにより、SNSフォロワーの増加が期待できます。
• SNSキャンペーンやユーザー投稿を紹介できる
InstagramやTwitterでのキャンペーン参加者の投稿を表示することで、ユーザーとのインタラクションを促進できます。

  1. ホームページにSNSを埋め込む手順と方法

SNSをホームページに埋め込む方法はいくつかあり、WordPressのプラグインを使用する方法や、HTMLを使って手動で埋め込む方法があります。

ここでは、代表的なSNS(Instagram、Twitter、Facebook、YouTube)をホームページに埋め込む方法を解説します。

(1) Instagramを埋め込む方法

Instagramの投稿やフィードをホームページに埋め込むことで、ビジュアル要素を強化し、ユーザーに訴求力の高いコンテンツを提供できます。

1.埋め込みたいInstagramの投稿を選択する

Instagramのアプリまたはウェブ版から、埋め込みたい投稿を開きます。
2. 埋め込みコードを取得する
投稿の右上にある「…」メニューをクリックし、「埋め込み」を選択します。その後、「埋め込みコードをコピー」ボタンをクリックし、コードを取得します。
3. ホームページに埋め込みコードを貼り付ける
WordPressの場合は、「カスタムHTMLブロック」や「テキストエディタ」に埋め込みコードを貼り付けます。HTMLファイルに直接貼り付ける場合は、埋め込みたい場所にコードを挿入します。

<blockquote class=”instagram-media” data-instgrm-permalink=”https://www.instagram.com/p/xxxxxxxxxx/” data-instgrm-version=”13″ style=” width:100%; max-width:540px; margin:0 auto;”>

</script>

このコードを貼り付けることで、Instagramの投稿がホームページに表示されます。

(2) Twitterを埋め込む方法

Twitterのタイムラインや特定のツイートを埋め込むことで、リアルタイムの情報をホームページに表示することができます。

1.Twitterの公式サイトから埋め込みコードを取得する

Twitter Publish のサイトにアクセスし、埋め込みたいツイートやタイムラインのURLを入力します。
2. 埋め込みのスタイルを選択する
埋め込みたいスタイル(ツイート、タイムラインなど)を選択し、「Copy Code」ボタンをクリックして埋め込みコードを取得します。
3. ホームページに埋め込みコードを貼り付ける
WordPressの「カスタムHTMLブロック」にコードを貼り付けるか、HTMLファイルの埋め込みたい場所に以下のようなコードを挿入します。

<a class=”twitter-timeline” href=”https://twitter.com/TwitterDev”>Tweets by TwitterDev</a><script async src=”https:/

platform.twitter.com/widgets.js” charset=”utf-8″>

このコードを使用することで、ホームページにTwitterのタイムラインが表示されます。

(3) Facebookを埋め込む方法

Facebookページや投稿を埋め込むことで、企業の最新情報をホームページに表示できます。

1.  Facebookの公式プラグインを利用する

Facebook Developersの埋め込みページ にアクセスし、「ページプラグイン」を選択します。
2. 埋め込みたいFacebookページのURLを入力
FacebookページのURLを入力し、表示スタイルをカスタマイズします(幅、高さ、表示する要素など)。
3. 埋め込みコードをコピーし、ホームページに貼り付ける
「コードを取得」ボタンをクリックし、表示されたコードをホームページに貼り付けます。

このコードをホームページに貼り付けることで、Facebookページの情報が表示されます。

<div class=”fb-page” data-href=”https://www.facebook.com/your-page-name” data-tabs=”timeline” data-width=”” data-height=”” data-small-header=”false” data-adapt-container-width=”true” data-hide-cover=”false” data-show-facepile=”true”>
<blockquote cite=”https://www.facebook.com/your-page-name” class=”fb-xfbml-parse-ignore”>
Facebookページのタイトル
</blockquote>

<script async defer crossorigin=”anonymous” src=”https://connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v10.0″ nonce=”xxx”>


(4) YouTubeを埋め込む方法

YouTubeの動画を埋め込むことで、ビジュアルコンテンツを簡単にホームページに取り入れられます。

1.  埋め込みたいYouTubeの動画を選択する

YouTubeで表示したい動画を開きます。
2. 「共有」ボタンから埋め込みコードを取得する
動画の下にある「共有」ボタンをクリックし、「埋め込む」を選択します。表示された埋め込みコードをコピーします。
3. ホームページに埋め込みコードを貼り付ける
HTMLの埋め込みたい場所に、以下のようなコードを挿入します。 https://www.youtube.com/embed/xxxxxxxxxx

このコードを使用することで、YouTubeの動画がホームページ上で再生可能になります。

  1. WordPressプラグインを使用したSNS埋め込み方法

WordPressを使用している場合、プラグインを使うとSNSの埋め込みをより簡単に行うことができます。

(1) Smash Balloon Social Photo Feed(Instagram向け)

「Smash Balloon Social Photo Feed」は、Instagramのフィードを簡単に表示できるプラグインです。

•   プラグインをインストールし、有効化します。
•   Instagramアカウントと連携し、表示スタイルを設定します。
•   ショートコードを使用して、埋め込みたいページにフィードを表示します。

(2) Custom Twitter Feeds(Twitter向け)

「Custom Twitter Feeds」は、Twitterのタイムラインをホームページに表示するためのプラグインです。

•   プラグインをインストールし、有効化します。
•   Twitter APIキーを使用してアカウントを連携します。
•   ショートコードを使って、表示したい場所にタイムラインを埋め込みます。

まとめ

ホームページにSNSを埋め込むことで、ユーザーに対して最新情報をリアルタイムで提供できるだけでなく、SNSフォロワーの増加やユーザーとのエンゲージメント向上も期待できます。

WordPressを使っている場合はプラグインを利用することで簡単に実装でき、HTMLを使って手動で埋め込む場合でも、各SNSが提供している埋め込みコードを使用すれば、比較的容易に設定できます。

目的に応じて最適な埋め込み方法を選び、ホームページとSNSの相互連携を図りましょう。

✨【3名様限定キャンペーン】無料ブログ記事作成サービス開始!✨

🌟 miraizがお届けする特別キャンペーン🌟

無料でSEOのプロがブログ記事を一本ライティングします✨
SEO対策にも強い、質の高い記事をお届けします‼️

miraizのブログサービスは、

🚀 速い納品、高い品質

SEO対策済みの高品質な記事をスピーディーに納品。
ブログの更新頻度を上げたい方、SEO対策に伴う大量の記事が必要な方、100記事作成するのにもぴったりです❗️
大量発注にも対応し、品質は常にトップクラスを保証。

⏫検索上位表示対策済みの記事制作

ユーザーが何を求めているか徹底分析し、それに応える情報をライティング。
SEOの専門知識を駆使して、あなたの記事がGoogleなどの検索エンジンで
上位に表示されるように作成いたします✨

📸画像制作もサポート

文章だけでなく、ご希望があれば必要な画像も全て作成します。

  • 本キャンペーン終了後、ご契約を締結する義務は一切ございません⭕️
  • 本キャンペーン終了後の追加営業は一切行わないことをお約束します🙏

  • 万が一、本キャンペーン終了後、ご契約されない場合でも、預かりした情報は責任をもって破棄いたしますので安心してお申し込みできます✨

また、他社のサービスにご満足いただけなかった方も、ぜひ一度miraizへご相談ください。

👉申し込みは今すぐ!この機会をお見逃しなく!