페이스북 공유하기 api 사용기....
구글링해서 알아봤더니 meta 태그를 설정하면 된다는데 하나도 안먹혔다
가이드를 처음부터 다시 쭉 읽었당
1. 메타태그 추가하기
페이스북 글 공유 api는 <head>태그 안에 있는 meta 태그를 기준으로 한다.
<head>
<meta property="og:title" content="your_link_title">
<meta property="og:description" content="your_link_description">
<meta property="og:url" content="https://example.com/path" />
<meta property="og:image" content="your_image_url">
</head>
위 소스를 기준으로
og:title 에는 링크 제목을, og:description 에는 링크에 대한 설명을, og:image에는 썸네일로 표시될 이미지를 넣는다.
og:url은 지정되지 않은 경우, 해당 페이지의 URL이 링크공유되는 URL인 것으로 본다고 한다.
2. 자바스크립트 함수 추가하기
자바스크립트 함수를 추가해준다. 공유하기 버튼에 click 이벤트를 걸고 shareFacebook() 을 호출하도록 한다.
shareFacebook() 안에서 window.open() 함수를 통해 share 전용 창을 열어준다.
function shareFacebook() {
var url = document.URL;
window.open('https://www.facebook.com/sharer.php?u=' + url,'facebook','toolbar=0,status=0,width=655,height=520');
},
이렇게 하면 페이스북에 글 공유하기 기능을 사용할 수 있다.
++)
그렇다면 window.open에서 여는 창의 url(www.facebook.com/sharer.php)과, url 파라미터(?u=뒤의 url)는 무엇이며 og:url은 왜 따로 설정하는가?
사실 "www.facebook.com/sharer.php" 라는 url 정보 자체는 구글링하다가 찾은 것이고, 내가 검색했을 때는 페이스북의 가이드 문서에서는 해당 url이 적힌 메뉴를 찾을 수 없었다.
다만 /sharer.php 뒤의 파라미터인 u=url을 통해, 파라미터로 url을 전달하고 있음을 알 수 있는데
실제로 /sharer.php에 어떻게 정의되어 있는 지는 모르겠으나, url 파라미터 파싱을 하는 거라고 추측한다.
여기서 궁금한 게 생긴다. 그럼 og:url과, 파라미터로 전달하는 url이 다르다면 공유하기 글에는 어떤 url이 표시되는 걸까?
shareFacebook() 내의 url을 변경 시도 해보았으나 없는 url을 전달 할 경우 오류가 났고, 네이버 주소를 전달 했더니 네이버의 주소와 썸네일이 나타났다.
이런걸 보면 파라미터로 전달하는 u=url이 우선되는 것 같은데.. 그럼 og:url은 작동하지 않는 다는 얘기일까..?
코린이는 정보가 필요해요..
기능 소개는 이렇고, 아래는 오류 수정 탐험기이다.
페이스북 공유 기능을 사용하려는데 url은 잘 가져와지는데 이미지가 뜨지 않았다.
페이스북 공유 디버거가 있길래 확인해보니 아래와 같은 오류가 떴다.
참고로 공유 디버거 사용 시, 꼭 "다시 스크랩" 버튼을 클릭하길 바란다. 링크를 다시 긁어와서 초기화하는 역할을 하는 것 같다.
결론부터 보고싶다면 맨아래로 내리시길 바란다.
1. 이미지 오류 확인
썸네일 이미지 최소 권장 픽셀보다 사이즈가 작아서 그런가..? 다른 구글링 글에서 보니 최소 600*600 픽셀이 되어야 한다고 한다. 가이드에 이미지에 대한 설명이 있길래 가져와봤다.
아니 이미지 권장 사항인데 최소 허용 이미지 픽셀 정보가 다르면 어쩌라는겨
대충 아 이미지 크기랑은 상관없구나 라는 것을 알게되었다.
또한, 이미지 바꿔치기 했다고 방심하지 말 것.. 페이스북은 이미지 캐싱을 url을 기준으로 하기때문에 url도 바꿔주어야함
요리조리 이미지의 사이즈를 바꿔보았으나 .. 먹통 ㅠㅡㅠ 작동하지 않았다.
권장사이즈인거지 필수적인 요구사항은 아닌 듯 하다.
2. 원인 발견
원인은 다른 곳에 있었다. 우리 웹사이트에는 ssh 가 적용되어 https:// 로 시작하는데
<meta property="og:image" content="http://www.test.co.kr/image/web/logo.png"/>위의 코드처럼, image를 가져오는 url이 http로 시작해서 그런 듯 했다.
왜냐하면 http:// --> https://로 바꿔주니까 썸네일이 정상적으로 가져와졌기 때문이다...
오류사항 결론 : 가져오는 url과 현재 url 사이에 크로스도메인부터 확인해보자
오늘도 하나 해결 ^-^
'웹개발지식쌓기' 카테고리의 다른 글
| Zoom Api 사용해보기 - 1 (0) | 2022.08.29 |
|---|---|
| [back] 초간단 Interceptor 사용법 (0) | 2022.08.16 |
| [오류] cron 표현식 오류 - Encountered invalid @Scheduled method 'excute': For input string: "6L" (0) | 2022.06.17 |
| [오류] 메이븐 오류 - java.lang.ClassNotFoundException: org.springframework.web.servlet.DispatcherServlet (0) | 2022.06.16 |
| [back] catalina.out 한글 깨질 때 (0) | 2022.06.09 |
