그냥 개발자 블로그

페이스북 공유하기의 추가 방법 본문

IT소식&팁

페이스북 공유하기의 추가 방법

마음이파파 2015. 9. 30. 17:30

페이스북 공유하기의 가장 쉬운 구현법은


url을 이용한 구현법인데요.





 

자바스크립트를 새창 열기


window.open() 을 이용하여


아래 url을 열면 끝이죠. 


http://www.facebook.com/sharer/sharer.php?u=공유주소








정상적으로 스크립트와 주소를 작성하셨다면 


페이스북 로그인 화면이 뜨고 로그인 완료되면


위에 처럼 페이스북에서 자동으로 데이터들을 가져와 공유할수 있는 화면이 뜨게 되죠.








하지만 내가 원하는 이미지와 데이터를 넣고 싶다면요?


그것도 걱정 하지 마세요.


og tag 라는것을 이용해서 내가 원하는 정보를 담은 데이터로 공유가 가능하니까요.



 

 



 


이것이 og tag라 불리우는거에요.


이렇게 메타태그를 작성하여 내가 공유하고자 하는 페이지 head 안쪽에


넣어주시면 페이스북이 자동으로 데이터를 가져올때


meta 데이터들을 우선으로 가져오게 되어있어요.


여기서 중요한건 반드시 공유될 페이지 내에 og tag를 넣어야 하는거에요.


보통 페이스북 공유하기 포스팅들에


이 내용은 빠져 있어서 해매이는 분들이 많더군요.





 


만약 정상적으로 og tag를 넣었는데도 반영이 안된다면

 


그건 페이스북 내에 이미 저장된 내용이 있어서


반영이 안되는거에요.


 

이부분을 새로고침해서 확인해보고 싶으시다면
 

 

https://developers.facebook.com/tools/debug/og/object/


주소로 가셔서 공유하고자하는 주소를 넣으시고 






 


이렇게 생긴 버튼을 클릭해주시면 새로고침이 되요.


만약 위 버튼이 안보이신다면 debug 버튼이 보일텐데


한차례 누르면 위 버튼이 보이실꺼에요.












<!doctype>
<html>
<head>
 <meta property="og:title" content="<?=$imgsharetitle?>" />
 <meta property="og:image" content="<?=$imgshareimage?>" />
 <meta property="og:description" content="<?=$imgsharedescription?>" />
 <meta property="og:type" content="website" />
</head>
<body>
<img src="<?=$imgshareimage?>" width='1px' height='1px'>
</body>
</html>


저작자표시 비영리 변경금지

'IT소식&팁' 카테고리의 다른 글

쇼핑몰 또는 홈페이지 만들때 어디에 의뢰하면 좋을까?  (0) 2015.09.30
광고와 홍보의 차이  (0) 2015.09.30
intel Advanced-N 6250 드라이버 다운로드  (0) 2015.09.30
개발자와 프로그래머 차이  (0) 2015.09.30
리눅스의 탄생배경 및 역사 (간단)  (0) 2015.09.30
'IT소식&팁' Related Articles more