오늘은 PC(윈도우 혹은 맥 OS)에서 페이스북 동영상을 티스토리 본문이나 웹페이지에 올리는 방법을 소개해드릴까 합니다. 참고로 네이버 블로그는 유튜브는 가능한데 페이스북은 지원하질 않더군요.


    평소 유튜브의 영상을 아이프레임 소스로 긁어와 블로그나 웹페이지에 잘 붙이셨던 분들이라면 제가 오늘 소개해드릴 방법도 큰 어려움이 없이 사용하실 수 있을것 같은데요. 페이스북도 유튜브처럼 동영상을 소스코드로 공유하는걸 지원하기 때문입니다.



    페이스북 동영상 > 퍼가기


    페이스북에 올라온 동영상을 소스코드로 퍼가기 위해서는 다음과 같은 과정이 필요합니다. 우선 본인 프로필 혹은 페이스북 페이지에 올라온 동영상 포스팅의 상단 우측에 있는 화살표를 눌러줍니다. 여러 기능 버튼들 중 퍼가기 버튼을 누르면 소스코드를 보여주는 팝업창이 보여지는데요.


    본인 프로필과 페이지외에도 그룹, 페이스북 친구의 전체공개 동영상은 퍼가기 버튼이 노출되지만 친구공개된 동영상에는 이 퍼가기 버튼을 지원하지 않는것 같습니다.



    소스코드 확인 / 게시물 포함 여부 선택


    퍼가기 버튼을 누르면 동영상 퍼가기라는 창이 뜨는데요. 상단에 있는 인풋박스에 동영상에 대한 아이프레임 소스코드가 적혀있고, 이를 드래그해서 복사 및 잘라내기를 해주면 됩니다. 동영상의 재생전 대표사진을 보고 싶다면 '미리보기 표시'라는 텍스트를 눌러주면 되고요.




    여기에 해당 동영상에 함께 적힌 텍스트나 좋아요, 댓글수, 공유수, 동영상을 올린 사람 혹인 페이지의 정보까지 확인하고 싶다면 상단 우측의 'Include full post'의 체크박스를 눌러주면 됩니다. 여기에 '세부 설정'이라는 텍스트 버튼을 누르면 페이스북 동영상을 웹페이지에 올리는걸 조금 더 상세하게 설정 가능하게 해주는데요.


    세부설정 > 동영상 가로사이즈 변경 / 게시물 포함 여부 선택



    앞서 세부 설정을 누르면 개발자를 위한 페이스북 소셜플러그인 지원 웹사이트로 이동합니다. 여기서 앞서 퍼갈 영상의 가로사이즈와 전체 게시물(텍스트, 댓글수, 좋아요수, 공유수 등) 포함 여부를 선택합니다. 본인 블로그 본문이나 웹페이지 사이드바 디자인에 맞춰 가로사이즈의 픽셀을 입력해주면 되는데요.

    참고로 저는 가로사이즈(width)를 블로그 본문에 맞춰 800픽셀로 입력하였고요. 그에 맞춰 자동으로 세로사이즈 (height)이 573픽셀로 지정되었습니다.

    단 저처럼 반응형 스킨을 쓰는 티스토리 블로그나 웹사이트는 블로그 본문이나 그 근처에 동영상을 붙일 예정이라면 모바일웹이라는 환경을 감안해 가로사이즈를 100퍼센트로 수정하는 것이 좋을 것으로 보입니다. 세로사이즈의 값은 그대로 유지하고요.

    ※세로사이즈를 573 픽셀로 지정하니 모바일에서는 세로사이즈 공백이 생겼습니다.



    모든 셋팅이 완료되었다면 하단 좌측에 있는 코드받기 버튼을 누릅니다. 팝업창으로 자바스크립트 SDK, 아이프레임 탭으로 나뉘어 소스코드를 제공하는데요. 여기서 아이프레임 탭을 선택하고 2단계에 있는 코드를 드래그해서 복사한 후, 원하는 웹페이지의 위치에 붙여넣기하면 됩니다.


    참고로 티스토리, 네이버 블로그 본문이라면 '에디터 쓰기 창'에서 'HTML 쓰기 창'으로 변경해주어야 하고요. 웹사이트를 운영하고 계신분들이라면 소스코드 편집기에서 이 소스를 추가해주시면 됩니다.


    저의 경우 이 글을 쓰고 있는 블로그 본문과 본문 하단에 페이스북 동영상을 붙여봤는데 정상적으로 노출 및 재생이 가능하더군요. 그 결과물은 하단의 동영상을 통해 확인하실 수 있습니다.



    결과물


    위와 같이 페이스북 페이지에 올린 동영상(전체 게시물 제외)을 제 블로그 본문에 붙여보았는데요. 전체 게시물을 포함하면 블로그 본문에는 잘 올라가질 않더군요. height 값을 잘 조정하면 나옵니다.


    아직 네이버 블로그나 포스트에선 이 소스코드를 지원하지 않지만, SNS사진을 첨부하는 기능 살펴보니 조만간 (개인 동영상에 한해선) 쉽게 긁어오지 않을까 생각됩니다.




    신고






    Posted by 모바노