Facebookの埋め込みコードと投稿ページのリンクの取得方法

HTML/CSS

今回は、Facebookの埋め込みの仕方と個別投稿ページのURLを取得してリンクを作成する方法について紹介していきます。

FacebookのTOPページへのリンクURLや埋め込みは簡単に理解出来たのだが、投稿ページのリンクが少しややこしかったので、自分のメモを含め共有しときます。

投稿ページのURL

投稿ページのURLの取得はややこしいが作業は非常に簡単です。

投稿部分の左上にある更新時刻をクリックするとそのページへ移動します。その時のページのURLバーのURLが個別投稿ページのものです。(この時刻のリンクが投稿ページとは思わなかった)

スマホの場合はシェアその他のオプションコピーで取得出来ます。

1
2

別の方法

①まずはリンクしたいFacebookページへ行きます。

②リンクさせたい投稿の右上にある「⁝」をクリックして「埋め込み」をクリックします。

③埋め込みコードが表示されるが、無視して下の詳細設定をクリックします。

④そこにある「投稿URL」があります。これがそのまま、投稿のURLです。

作成したURLをURLバーに貼り付けて更新すれば狙った投稿のページへ行きます。

このURLを下記の様にテキストリンクなどにすれば意図した流れで指定したFacebookページへのリンクを付ける事が出来ます。

Facebook投稿ページリンク

埋め込み

また下記の様に、投稿ページのデザインを維持した状態でWEBサイトに埋め込んでリンクさせることも可能です。

先程の「埋め込み」のページを開き「コードの取得」を選択し「IFrame」のタブを選択しそこのコードをbody内、もしくはカスタムHTMLにペーストするだけで完了です。

タイムラインの埋め込み

まず下記の「Facebook ページプラグイン」にアクセスします。

https://developers.facebook.com/docs/plugins/page-plugin/

上記ツールのサイドバーメニューの「ページプラグイン」へ移動。FacebookページのURLの部分に埋め込みたいFacebookアカウントのTOPページのURLを入力します。

タブを「timeline」と入力し、幅と高さを指定して下にある「コードを取得」を押します。

そしたらコードが表示されるのでタブの右側のIFrameコードをコピーします。その後body内、もしくはカスタムHTML内にコードをペーストすれば完了です。


以上が「Facebookの埋め込みコードと投稿ページのリンクの取得方法」でした。

Facebook以外にもTwitterやYouTubeも埋め込み可能です。それらのやり方を知りたい方は下記の記事をみて下さい。

HTML/CSSFacebook, html, 埋め込み

Posted by KT