페이스 북 오픈 그래프를 워드 프레스와 통합하는 방법

Facebook Open Graph 프로토콜을 사용하면 독자뿐만 아니라 Facebook 친구들도 블로그 콘텐츠를 공유 할 수 있습니다. 가장 중요한 부분은 - 누군가 좋아했다 귀하의 콘텐츠 (들)은 Facebook 프로필에 게시됩니다. 그러나 이것이 전부는 아니지만, Open Graph를 사용하면 독자와 상호 작용하고 참여하는보다 흥미로운 방법을 탐색 할 수 있습니다. 궁극적으로 - 이것이 올바르게 완료되면 브랜드를 구축하고 사이트 트래픽을 증가시킵니다..

오늘의 글에서, 우리는 페이스 북 오픈 그래프를 자체 호스팅 WordPress에 통합하는 방법 자세한 단계별 가이드 기존 WordPress 테마를 편집하고 Facebook 응용 프로그램을 만들어야합니다 (없는 경우)..

준비된? 브라우저와 좋아하는 코드 편집기를 실행 해 봅시다. 점프 후 전체 가이드.

Step 1. 페이스 북 앱 만들기

우리는 응용 프로그램 ID 그것을 얻으려면 Facebook App을 만들어야합니다. 이미 가지고있는 경우 2 단계로 이동하십시오..

응용 프로그램을 만드는 것이 쉽습니다. 다음과 같이하십시오.

Facebook에 로그온하고 개발자 페이지로 이동하십시오..
클릭 "새 앱 설정오른쪽 상단에있는 "버튼.
이름을 지어 라. 새 앱에, 동의하다 페이 스북 용어, 히트 앱 만들기.
이동 웹 사이트 탭, 채우기 사이트 URL 과 사이트 도메인.
의 가치를 메모하십시오. 응용 프로그램 ID 어딘가에 "변경 사항을 저장하다"버튼.

그게 다야! 나머지 정보를 채우기 위해 언제든지 나중에 다시 올 수 있습니다..

2 단계. 교체 꼬리표

테마의 헤더 파일 열기 (header.php) 좋아하는 편집기에서. 잘못 된 경우를 대비하여 항상 백업 사본을 보관하십시오..

다음 코드 행을 찾으십시오. 또는 다음 행으로 시작하십시오. >

그것을 다음으로 대체하십시오 :

header.php를 열어 놓고, 우리는 3 단계를 위해 그것을 필요로 할 것입니다..

3 단계. OG 삽입 태그들

바로 다음 코드 붙여 넣기 태그 이전에 꼬리표.

"/>

다음은 변경해야 할 몇 가지 값입니다.

3 호선 : 바꾸기 your_fb_app_id 와 더불어 응용 프로그램 ID 1 단계의.
4 호선 : your_fb_admin_id Facebook 인사이트 페이지에서 (추가 정보). "귀하의 웹 사이트에 대한 통찰력"녹색 버튼, 전체 코드 문자열을 잡고 Line 4를 대체하십시오..
12 행 :이 행은 게시물을 나타내는 이미지를 결정합니다. 테마가 WordPress 게시 미리보기 이미지를 지원하면 잘 작동합니다. 그러나 그렇지 않으면 이미지없이 정상적으로 실패 할 것입니다. 다른 해결 방법은 3a 단계를 확인하십시오..
19 행 : 바꾸기 logo.jpg 블로그 로고에 대한 URL이 있습니다. 블로그의 비공개 페이지가 Facebook에서 공유 될 때 표시됩니다..

3a 단계 - "wp_get_attachment_thumb_url"실패

언제 wp_get_attachment_thumb_url () 작동하지 않으면 아래에 표시된 것과 같이 값이없는 콘텐츠 속성으로 이동하게됩니다.

간단한 해결 방법은 Line 12를 다음 코드로 대체하는 것입니다.

다음으로 열어 라. functions.php 다음 코드를 삽입하십시오.

function catch_that_image () 글로벌 $ 포스트, $ 포스트; $ first_img = "; ob_start (); ob_end_clean (); $ 출력 = preg_match_all ( '// i ', $ post-> post_content, $ matches); $ first_img = $ matches [1] [0]; if (empty ($ first_img)) // 기본 이미지를 정의합니다. $ first_img = "/images/default.jpg";  return $ first_img;

이 대체 코드는 함수 호출을 사용하려고 시도합니다. catch_that_image () 마주 치게 될 첫 번째 이미지의 URL을 잡고 출력합니다. 함수가 첫 번째 이미지를 찾지 못하면 URL을 기본 이미지로 바꾸십시오..

4 단계 : Facebook Javascript SDK 삽입

다음 자바 스크립트는 그래프 API와 대화 상자의 모든 기능에 액세스 할 수있게 해줍니다. 또한 Like 버튼, Facepile, Recommendations 등과 같은 Facebook 소셜 플러그인을 쉽게 통합 할 수 있습니다..

그것을 안으로 두십시오 header.php, 직후

바꾸다 your_fb_app_id 라인 4에서 응용 프로그램 ID 앞의 1 단계부터.

5 단계. 테스트 해 봅시다.!

페이스 북 오픈 그래프를 워드 프레스 블로그에 통합했습니다. 우리가 일을 올바르게했는지 확인하기 위해 몇 가지 테스트를 해봅시다..

테스트 # 1 - 소스 코드보기

블로그 게시물 중 하나의 소스 코드를 살펴보면 다음과 같은 내용을 얻을 수 있습니다.

속성과 해당 값을 확인하고 올바른지 확인하십시오..

테스트 # 2 - Like Box 설치

Facebook Like Button을 설치하지 않았다면 아마 하나가 될 것입니다. 다음 코드를 아무 곳에 나 배치하십시오 (내용 앞이나 뒤의 내용이 바람직 함). single.php:

다음으로 친구를 사귈 수 있습니다. 처럼 그것. Facebook 프로필에 비슷한 내용이 표시되어야합니다.

추가 기능 : WordPress Plugin

어떻게 든 코드를 설치하지 않았거나 빠르고 쉽게 할 수 없으면 WordPress 플러그인이 있습니다..

WordPress의 Facebook Open Graph Meta는 썸네일 문제, 잘못된 제목 문제, 잘못된 설명 문제 등을 피하기 위해 Facebook 메타 데이터를 추가하는 WordPress 플러그인입니다..