Facebook 페이지의 피드를 내 웹 사이트에 삽입하는 방법
저는 자선 행사를 홍보하기 위해 그룹과 협력하고 있습니다. 삽입하려는 페이지는 내 Facebook 프로필이 아니라 누군가가 만든 Facebook 페이지입니다.
내 웹 페이지에 해당 뉴스 피드를 표시하고 싶습니다. 이 페이지에서 정보 / 액세스가 필요하면 알려주십시오. 다른 사람이 작동하는 예가 있으면 알려주십시오. 나는 그것을 그리기 위해 jsfiddle.net을 사용하고 있습니다.
페이지 : http://www.facebook.com/pages/Chefs-Classic-Knock-OUT-Bout/225835004169328
Ahhh, 그것은 매우 간단하고 프로그래밍이 필요하지 않습니다.
참조 : https://developers.facebook.com/docs/plugins/page-plugin
당신은 유지하려는 것 show stream켜져 옵션을 선택합니다. 너비, 높이 및 기타 몇 가지를 조정할 수 있습니다.
플러그인 대신 사용자 정의 코드를 찾고 있다면 이것이 도움이 될 수 있습니다. 페이스 북 그래프는 진화 한 이후 몇 가지 변화를 겪었습니다. 이 단계는 최근에 시도하고 잘 작동 한 최신 Graph API에 대한 것입니다.
관련된 두 가지 주요 단계가 있습니다. 1. Facebook 액세스 토큰 얻기, 2. 액세스 토큰을 전달하는 Graph API 호출.
1. 액세스 토큰 받기 -다음은 Facebook 페이지에 대한 액세스 토큰을 얻는 단계별 프로세스입니다. - 내 웹 사이트에 Facebook 페이지 피드를 삽입 합니다. 이에 따라 Facebook 개발자 페이지에서 앱 ID와 앱 비밀을 제공하는 앱을 만들어야합니다. 이 두 가지를 사용하여 액세스 토큰을 얻으십시오.
2. 그래프 API 호출 -액세스 토큰을 받으면 매우 간단합니다. 검색하려는 모든 필드 / 속성으로 Graph API에 대한 URL을 형성하고이 URL에 GET 요청을하기 만하면됩니다. 다음은 asp.net MVC에서 수행하는 방법에 대한 한 가지 예입니다. asp.net mvc를 사용하여 페이스 북 피드 삽입 . 이것은 HTTP GET 요청 일 뿐이므로 다른 기술에서 매우 유사합니다.
샘플 FQL 쿼리 : https://graph.facebook.com/FBPageName/posts?fields=full_picture,picture,link,message,created_time&limit=5&access_token=YOUR_ACCESS_TOKEN_HERE
새 페이지 플러그인 에서는 웹 사이트에서 여러 탭을 수행 할 수 있습니다. 페이지 플러그인을 사용하면 웹 사이트에 Facebook 페이지를 쉽게 삽입하고 홍보 할 수 있습니다. Facebook에서와 마찬가지로 방문자는 사이트를 떠나지 않고도 페이지를 좋아하고 공유 할 수 있습니다.
- 페이지에 JavaScript SDK를 한 번, 이상적으로는 여는
<body>태그 바로 뒤에 포함합니다 .
<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/sdk.js#xfbml=1&version=v2.5&appId={APP_ID}";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>- 페이지에서 플러그인을 표시하려는 위치에 플러그인 코드를 배치합니다.
<div class="fb-page"
data-href="https://www.facebook.com/YourPageName"
data-tabs="timeline"
data-small-header="false"
data-adapt-container-width="true"
data-hide-cover="false"
data-show-facepile="true">
<div class="fb-xfbml-parse-ignore">
<blockquote cite="https://www.facebook.com/facebook">
<a href="https://www.facebook.com/facebook">Facebook</a>
</blockquote>
</div>
</div>다음 설정을 변경할 수도 있습니다.
또한 이제 새 페이지 플러그인을 사용하여 타임 라인, 이벤트 및 메시지 탭을 사용할 수 있습니다.
- 타임 라인 탭 : Facebook 페이지 타임 라인의 가장 최근 게시물을 표시합니다.
- 이벤트 탭 : 사람들은 페이지 이벤트를 팔로우하고 플러그인에서 이벤트를 구독 할 수 있습니다.
- 메시지 탭 : 사람들은 웹 사이트에서 직접 페이지에 메시지를 보낼 수 있습니다. 이 기능을 사용하려면 로그인해야합니다.
<div class="fb-page"
data-tabs="timeline,events,messages"
data-href="https://www.facebook.com/YourPageName"
data-width="380"
data-hide-cover="false">
</div>Like Box / Page 플러그인은 기본적으로 iframe이며 추악합니다. : D
그래서 FanPage 피드를 표시하기 위해 Famax 플러그인 이라고 부르는 무료 플러그인을 만들었습니다 . 같은 상자와 비슷하지만 UI가 더 좋고 사용자 정의가 가능합니다.
또한 Like 상자는 고정 된 너비와 높이 등으로 iframe에 표시되기 때문에 실제로 반응하지 않습니다.
Correct me if I am wrong, but it seems that Facebook deprecated the Activity Feed plugin. Additionally there does not seem to be any substitute plugin for activity anymore.
Here is the link: https://developers.facebook.com/docs/plugins/activity
For website developers, another option you have is to follow a working Facebook Graph API tutorial such as this one.
But if you need a quick solution where you can customize and embed a Facebook page feed instantly, you should use website plugins such as this one.
Here's a step by step guide:
- Get a Free Key or Paid Key.
- Go to this login page and use the key to login.
- Once logged in, click “+ Create Custom Feed” button.
- On the pop up, name your custom Facebook page feed.
- On the drop-down, select “Facebook Page Feed On Your Website” option.
- Enter your Facebook Page ID.
- Click the “Proceed” button. This will show you the customization options.
- Click the “ Embed On Website” button located on the upper-right corner of the screen.
- On the pop up, copy the embed code by clicking the “Copy Code” button.
- Paste the embed code on your website.
Visit the tutorial link to see a live demo there as well.
참고URL : https://stackoverflow.com/questions/9187419/how-to-embed-a-facebook-pages-feed-into-my-website
'developer tip' 카테고리의 다른 글
| Linux 용 예쁘고 기능이 풍부한 Git GUI (0) | 2020.11.11 |
|---|---|
| JavaScript에서 양식 제출 캡처 (0) | 2020.11.11 |
| DateInterval 형식에서 'P'는 무엇을 의미합니까? (0) | 2020.11.11 |
| 중첩 함수가 외부 함수의 변수에 액세스 할 수 있지만 수정할 수없는 이유 (0) | 2020.11.11 |
| SQL에서 같은 줄에 정수 변수와 문자열 인쇄 (0) | 2020.11.11 |