ブランディングとマーケティングに強い東京のWeb制作会社「株式会社ニュークラウド」。コーポレートサイト、サービスサイト、採用サイト、LP制作お任せください。

Webサイトをノーコードで作成するツールとして知られているWebflowですが、今回はこのWebflowのエレメント内にある「Embed」というカスタムコードを用いて、Facebookの投稿を埋め込みではなく、投稿を自動で表示する方法を紹介していきたいと思うます。

1.Facebook Developerアカウントの作成

FacebookDeveloper（https://developers.facebook.com）にアクセスしてログインする。

Facebookで登録しているメールアドレスとパスワードでログインできます

2.アプリを作成する

ログイン後、以下の画像の「アプリを作成」を選択。

次にアプリ名とメールアドレスの確認画面に移ります。

メールアドレスは、ご自身のメールアドレス（定期的にチェックするアドレス）であることを確認してください。

アプリ名ですが、Facebook関連の用語や、それらを意味する紛らわしい言葉を使用することはできませんのでご注意ください。（Facebook〇〇や〇〇FB、FB〇〇など）

ここでは「テスト」と入力します。

次に「ユースケース」ですが、「その他」の「Facebookログインでの承認およびユーザーデータのリクエスト」を選択します。

その次の「ビジネス」、「要件」のステップは、おそらく選択しようがないので、そのまま次へ進みましょう。

最後に「概要」ですが、こちらは入力した内容の確認画面にあたりますので、問題なければ「ダッシュボードへ移動」を選択し、アプリを作成してください。

FacebookのIDパスワードの入力画面がモーダルで表示されますが、そのまま進めてください。

3.アクセストークンを取得する

アクセストークンとはユーザーが決済やマップ、SNSなど、様々なサービスを使用する際に発行されるシークレットキーを指します。

ここではFacebookのサービス、つまり投稿内容などをWebサイトに連携するために必要なキーを発行します。

このアクセストークンは、Facebook Graph APIという、アクセスするための認証情報です。

アプリ作成後、以下の画面に遷移されますので、「ユースケース」を選択し、登録時に選択したユースケースの

「カスタマイズ」ボタンを押してください。

次の画面に遷移したら、おそらく初期で追加されておりますがpublic_profile、

そのほかに

user_photos

user_videos

user_posts

次に、画面上部のメニューバー「ツール」から「グラフAPIエクスプローラー」を選択

以下のグラフAPIエクスプローラー画面から、先ほど追加したアクションを追加した状態で

「Generate Access Token」をクリックし、アクセストークンのキーを発行してください。

発行後、このトークンのキーをコピーします。

4.Webflowのカスタムコードにコードを入力

上記でご自身のFacebookのデータを外部と連携させる許可を得たので、Webflowを開いて「Embed」というエレメントを使用し、コードを直接入力します。

次にJavaScriptですが、赤枠の部分にアクセストークン、ご自身のFacebookのIDを入力します。

CSSに関してはご自身でカスタマイズした方がよろしいかと思いますが、もしよろしければ参考までに

<div id=”prev-button”>＜</div>

<div id=”feed-container”></div>

<div id=”next-button”>＞</div>

 

 <script type=”text/javascript” src=”//code.jquery.com/jquery-1.11.0.min.js”></script>

 <script type=”text/javascript” src=”//code.jquery.com/jquery-migrate-1.2.1.min.js”></script>

  

<script>

const accessToken = ”; // ここにFacebook Graph APIのアクセストークンを入力

const pageId = ”; // ここにFacebookページのIDを入力

const limit = 10; // 取得する投稿の数

 

// Facebook Graph APIを使用して投稿データを取得

fetch(`https://graph.facebook.com/v18.0/${pageId}/posts?access_token=${accessToken}&limit=${limit}&fields=id,message,created_time,full_picture`)

  .then(response => response.json())

  .then(data => {

    const feedContainer = document.getElementById(‘feed-container’);

  

    data.data.forEach(post => {

      const postItem = document.createElement(‘a’); // リンクブロックとして生成

      postItem.classList.add(‘post-item’);

      postItem.href = `https://www.facebook.com/${pageId}`;

      postItem.target = ‘_blank’; // リンクを新しいウィンドウで開く

 

      // 投稿の写真が存在する場合

        const postImage = document.createElement(‘img’);

        postImage.classList.add(‘post-image’);

        postImage.src = post.full_picture; // 画像のURL

        postImage.alt = ‘投稿の画像’;

 

     // 投稿内容

     const postMessage = document.createElement(‘p’);

  postMessage.classList.add(‘post-message’);

 

  // 投稿メッセージを100文字以内に制限

  const messageText = post.message.length <= 100 ? post.message : post.message.slice(0, 100) + ‘…’;

  postMessage.textContent = messageText;

 

      // 投稿日付

      const postDate = document.createElement(‘p’);

      postDate.classList.add(‘post-date’);

      postDate.textContent = new Date(post.created_time).toLocaleString();

      feedContainer.appendChild(postItem);

      postItem.appendChild(postImage);

      postItem.appendChild(postMessage);

      postItem.appendChild(postDate);

    });

 

    $(‘#feed-container’).slick({

        infinite: true,

        slidesToShow: 3,

        slidesToScroll: 1,

        prevArrow: $(‘#prev-button’), // 前ボタン要素

        nextArrow: $(‘#next-button’), // 次ボタン要素

        dots: true, // ドットを非表示にするオプション

        responsive: [

    {

      breakpoint: 768, // 768px以下の場合に適用

      settings: {

        slidesToShow: 1, // スマートフォンで1つずつ表示

        slidesToScroll: 1,

        dots: false,

    }

      }

  ]

});

 

  })

  .catch(error => console.error(‘フィードの取得に失敗しました’, error));

</script>

  

<style>

#feed-container {

  display: flex;

  width: 90%;

  white-space: normal ;

  transition: transform 0.3s ease;

}

 

.post-item {

height: 100% ;

  flex: 0 0 33.33%;

  margin: 0 5px;

  box-sizing: border-box;

  text-align: left;

  display: inline-block;

  vertical-align: top;

  text-decoration: none; /* 下線を削除 */

  transition: transform 0.3s ease;

}

 

.post-image {

  width: 100%; /* 画像の幅を100%に設定 */

  height: 330px; /* 高さは自動調整 */

  object-fit: cover; /* 画像を親要素に合わせて切り取る */

}

 

/* オリジナル画像のスタイル */

.post-image img {

  display: block; /* 画像をブロック要素に変更 */

  width: 100%;

  height: 100%;

  object-fit: cover;

}

 

#prev-button, #next-button {

background-color: #1c2d4f; /* ボタンの背景色 */

      margin: 10px;

      color: #fff; /* テキストの色 */

      padding: 10px 20px; /* パディング */

      cursor: pointer; /* カーソルをポインターに設定 */

      border: none; /* ボーダーを削除 */

      margin-top: -1rem; /* 上に20px移動 */

      font-weight: bold;

    }

 

    .slick-dots {

  display: none; /* ドットを非表示にする */

  text-align: center;

  display: flex;

  margin-top: 20px;

  position: absolute;

  bottom: -4rem;

  left: 50%;

  transform: translateX(-50%);

}

 

.slick-slider .slick-dots li {

  display: inline;

  margin: 0 1rem;

}

 

.slick-slider .slick-dots li button {

  background-color: #ccc;

  width: 12px;

  height: 12px;

  border: none;

  border-radius: 100%;

  color:  transparent; /* 数字の色 */

  }

 

  .slick-dots li.slick-active button {

  background-color: #1c2d4f; /* アクティブなドットの背景色 */

  width: 12px;

  height: 12px;

  border: none;

  border-radius: 100%;

  color: transparent; /* 数字を非表示にする */

}

 

@media (max-width: 768px) {

  #feed-container {

    width: 65%; /* 画面幅の90%に設定（調整が必要かもしれません） */

  }

  .post-image {

  width: 100%; /* 画像の幅を100%に設定 */

  height: 200px; /* 高さは自動調整 */

  object-fit: cover; /* 画像を親要素に合わせて切り取る */

}

 

.post-message{

font-size: 14px;

}

#prev-button, #next-button {

      margin: 10px;

      padding: 8px 16px; /* パディング */

    }

 

</style>

 

こちらでFacebookの投稿が自動出力されるかと思います。