私のウェブサイトに Facebook の写真を表示する方法はありますか? Facebookページ(公開されている)のフォトギャラリーを表示したいのですが、ユーザーがいいねやコメントなどをすることができます.
4 に答える
Facebook SDK for Javascript を使用して同様のアプリケーションを構築しました。以下に示すように、いくつかの簡単な手順に従ってください。
ステップ 1: FB 用の Javascript SDK を初期化する
ステップ 2: JavaScript SDK を使用した FLogin
ステップ 3: グラフ API を使用して、写真の URL の JSON を取得します。例:
FB.api('/me/photos', function(response) { console.log(response.data.picture)}
"data": [
{
"id": "4864649943833",
"from": {
"name": "XYZ",
"id": "1524800660"
},
"name": "From left to right: A, B& C!",
"picture": "http://photos-h.ak.fbcdn.net/hphotos-ak-ash4/481890_4824639963833_259133397_s.jpg",
"source": "http://sphotos-h.ak.fbcdn.net/hphotos-ak-ash4/s720x720/481890xyz_4864549843833_259133397_n.jpg",
"height": 405,
"width": 720,
"images": [
{
"height": 540,
"width": 960,
"source": "http://sphotos-h.ak.fbcdn.net/hphotos-ak-ash4/481890_4864649943833_259133397_n.jpg"
},
ステップ 4: 友達のフォト ギャラリーを表示する場合は、最初にアクセス トークンを取得し、/me/friends/photos または /me//photos を取得します。
ステップ 5: URL に従って、写真のいいねやコメントを組み込みます。 https://developers.facebook.com/docs/javascript/gettingstarted/#plugins
facebook のグラフ API を使用して、写真情報を含むさまざまな JSON フィードを取得できます。ただし、Facebook 独自のいいねやコメントのオプションを使用する場合、これらは URL ごとにのみ基づいているため、実際の画像では使用できません。これを回避する 1 つの方法は、URL ごとに 1 つの画像を持つことです。
たくさん掘り下げた後、私が探していたものを正確に見つけました.SDKは必要ありません!!
Facebookの投稿を埋め込む方法
Facebook は、Facebook の投稿を別の Web サイトやブログに埋め込むことができる「埋め込み投稿」機能を導入しました。写真、ビデオ、または定期的なステータス更新を埋め込むことができます。たとえば、有名人が自分の Facebook ページで写真を共有している場合、コードを 1 行追加するだけで、その画像を Web サイトに簡単に埋め込むことができます。
コンテンツの所有者がその投稿の可視性を公開に設定している限り、Facebook ページや個人のプロフィールで共有されているコンテンツを埋め込むことができます。
ただし、小さな問題があります。Facebook は、CNN、Mashable、The Huffington Post など、少数の大手 Web パブリッシャー向けに埋め込み投稿機能を有効にしています。他のすべての人は、Facebook コンテンツと一緒に埋め込みリンクが表示されるまで待つ必要があります。
ただし、その Facebook アカウントで「埋め込み投稿」が公式に利用できない場合でも、Facebook コンテンツを Web サイトに埋め込むことができる簡単な回避策があります。
埋め込み投稿の埋め込みコード
<div id="fb-root"></div>
<script>
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id))
return;
js = d.createElement(s);
js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div class="fb-post" data-href="YOUR_URL_HERE"></div>
Facebook の投稿を開き、その投稿のパーマリンク (固定 URL) をコピーします。投稿の日付を右クリックして、そのパーマリンクを確認できます。次に、上記のスニペットの YOUR_URL_HERE を、コピーしたばかりのパーマリンクに置き換えて、変更したスニペットを Web サイトの任意の場所に貼り付けます。終わり!
同じ Web ページに別の Facebook 投稿を埋め込みたい場合は、スニペット全体をコピーして貼り付ける必要はありません。新しい要素を追加し、href の値を Facebook 投稿のパーマリンクとして設定するだけです。ビデオ チュートリアルでは、これについて詳しく説明しています。
ここにすべてを説明するブログ投稿があります: http://www.labnol.org/internet/embed-facebook-post/28151/