글쓰기 메뉴

페이스북 임베드 URL,
소셜 플러그인 (XFBML) 파싱

임베드 대상 페이스북 콘텐츠는 "포스트", "비디오", "사진" 이렇게 종류별로, 웹과 모바일에서 각각 URL 형식이 조금씩 달라 프로그램으로 이를 처리하기 위해 동일한 형태의 주소가 필요하다.


SDK를 사용해 페북 컨텐츠를 임베드하는 경우 기준이 되는 URL 은 웹용 URL 이다.


# photos
[Web] https://www.facebook.com/misfitskr/photos/a.1491490727759208.1073741829.1484819065093041/1676373025937643/?type=3
[Mobile] https://m.facebook.com/misfitskr/photos/a.1491490727759208.1073741829.1484819065093041/1676373025937643/?type=3&refid=17&_ft_=top_level_post_id.1676373025937643%3Atl_objid.1676373025937643

# post
[Web] https://www.facebook.com/miriya.lee/posts/10207578137913624
[Mobile] https://m.facebook.com/story.php?story_fbid=10207578137913624&id=1295580583&refid=17&_ft_=top_level_post_id.10207578137913624%3Atl_objid.10207578137913624%3Athid.1295580583%3A306061129499414%3A2%3A0%3A1448956799%3A-1465209181969975201

# video
https://www.facebook.com/feedbac/videos/10152616268967035/


뭐, URL은 딱보면 알겠지만 fbid 라는 고유ID만 빼오면 된다. 


모바일에서 포스트에 대한 주소만 URL 파라미터로 처리되어 있고 나머지는 전부 URL Path에 포함되어 있으니 아래와 같은 정규식으로 fbid부터 발라내자


/(?<=\/|fbid=)([0-9]+)(?=\/|&|$)/


정규식은 Ruby 2.x 버전에서만 동작을 확인했지만 look-behind 와 look-ahead 외에 정규식 엔진을 타는 내용이 없기 때문에 동작이 안된다면 그 부분만 수정하자.

사실 효율을 생각한다면 저딴 정규식으로 한방에 fbid 를 뽑는 것 보다 fbid 가 파라미터로 존재하는 케이스를 분리시키고 나머지 정규식도 2회로 나눠 돌리는게 더 좋지만... 귀찮으니 한 줄로 하자.


상식적으로 fbid 만 뽑아내면 될 것 같으나 페북 임베드에 사용되는 URL은 사용자 아이디가 버킷 이름처럼 포함되어 있다. 문제는 모바일 URL에 사용자 아이디-문자-가 없다는 점.


이 문제는 페이스북의 짧은 주소 fb.com 을 사용해 해결할 수 있다. http://fb.com/<fbid>의 형식으로 리퀘스트를 보내면 해당하는 완성된 주소로 리디렉션 시켜준다. - 임베드 코드 생성 시 fb.com 을 그냥 쓸 수 있으면 좋을텐데 안되더라.


curl 로 리디렉션된 최종 URL을 뽑는 코드는 아래와 같다.

curl -Ls -o /dev/null -w %{url_effective} http://fb.com/10207578137913624


내가 쓰는 Typhoeus 에선 아래처럼 최종 URL을 받으면 된다. 

res = Typhoeus.get("http://fb.com/10207578137913624", followlocation: true)
facebook_url = res.effective_url


이렇게 얻은 URL 로 

<div class="fb-post" data-href="{fb-post-url}"></div>


위와 같은 XFBML을 사용해 임베드가 가능하다. 다양한 옵션은 페북 문서 확인.


Javascript SDK 를 사용하는 경우 SDK 가 로드된 후 FB 객체를 initialize 하면서 페이지에 있는 모든 XFBML 을 파싱할 수 있고, 이와 다른 타이밍에 추가적으로 XFBML 을 파싱해야하는 경우는 아래의 코드로 가능하다.

FB.XFBML.parse();


특정 엘레먼트만 파싱하려면

FB.XFBML.parse(document.getElementById('foo'));


jQuery 로 돔을 잡아 파싱하려면

FB.XFBML.parse($("#foo")[0]);


이렇게 파싱하면 컨텐츠가 임베드된다.



어디서 왔지?
[["synd.kr", 12], ["adguard.com", 3], ["www.google.co.kr", 72], ["search.naver.com", 1], ["www.google.com.kh", 1], ["www.google.co.jp", 1], ["www.google.com.au", 1], ["unknown", 924], ["mail.keywordbridge.com", 1], ["www.google.com", 7]]
다른 글들
1 1
Square

SSL 인증서 설치 및 적용
스마트폰 ssh 접속으로 5분만에 완료?!!?!
그것도 무료??!!?!??!

이건 누구의 얘기도 아닌 제 얘기. 제가 씬디에 https 를 적용하기 않고 버틸 수 있던 합리적(!) 이유들.

하지만 계속 눈에 밟히는....
그리고 괜시리 갖고 싶은 녹색 자물쇠
그리고 오늘.. Let's encrypt 와 EFF 의 Certbot 으로 인증비용없이 뻥안치고 스마트폰으로 5분만에 SSL 도입 끝.
물론 후속 설정들과 이미지, 외부 소스 등에 대한 url 점검과 설정이 필요했지만 이건 레알 신세계.
근데 이거 나만 몰랐어???
불과 몇달전에도 클라한테 인증서 구매시키고 서버세팅했었는데???
블로그 참 열심히 하시는 존경스러운 outsider 님이 2015년에 베타를 경험했던 포스팅은 여기.
이후 EFF 에서 Certbot 에 Apache, Nginx 등의 소프트웨어와 서버 OS 를 플러그인으로 개발하면서 지금은 서버설정까지 Certbot 이 완료시켜주고 있음.
설치는 EFF Certbot 페이지에 가서 자신의 서버와 웹서버를 선택하면 나오는 메뉴얼대로 (대략 5 ~ 7 커맨드) 하면 끝.
난 심지어 지하철에서 스마트폰으로 ssh 연결해서 설정 끝냈음. ㅇㅇ
내 케이스는 nginx / ubunt 14.04 LTS 로 실제 설치 커맨드 히스토리는 아래와 같음. 아래가 전부임.
이렇게 하면 1) 이메일 주소 입력하세요. 2) 이메일 수신 OK? 3) (서버레벨에서 확인된 도메인 중) 어떤 도메인 쓸꺼임? 4) https 만 씀? 80도 같이 씀? 이렇게 4개 물어보고 답하면 된다.
이후에 nginx 에서 http 접속을 https 로 리디렉션 시키던지 Rails 에서 모든 연결에 ssl 을 적용하는 등의 설정을 하면 됨. 이건 별도의 글로 작성.
이제 Let's encrypt 라는 회사를 살짝 알아보자.
리눅스 재단 (Linux Foumdation) 과의 협력프로젝트라고 사이트 상단에 '이미지'가 박혀있는데 어떤 관계인지는 확인하지 못했다.
ISRG 라는 캘리포니아의 기업에서 "HTTP" 보안이 기업들과 사용자들의 비용절감에 직간접적인 도움이 된다는 생각으로 시작했다고한다.
기본적으로 ACME (인증관리자동화환경) 을 보고 있고 실제로 해당 목적을 훌륭하게 수행하는 솔루션이 있다. letsencrypt 에서 개발하다가 현재는 EFF 에서 개발하고 있으며 패키지이름은 Certbot. 인증절차 및 인증서 설치 이후 갱신을 "명령어 하나로" 처리해준다.
SSL CA 로 중요한것은 얼마나 많은 주효한 클라이언트가 이를 인증된 CA 로 받아들이는가 하는 부분인데 해당 목록은 이곳 링크에서 확인할 수 있고 파폭 2.0+, 크롬, 익스 XP3+, 엣지, 안드 2.3.6+, 맥 사파리 4.0+, iOS 사파리 3.1+ 등등 그냥 믿고 사용해도 되는 수준이다.
또 하나는 letsencrypt 의 생존력인데.. 인증서가 무료다보니 기업의 유지가능성도 살펴보는게 좋겠다.
기업 스폰과 기부금으로 운영되는 것으로 보이며 공식홈페이지에서 스폰서들은 소개하고 있다.
문서상으로 년간 30만불(3년유지) 또는 35만불을 지원하는 플래티넘 스폰서는 mozilla, Akamai, SISCO, EFF, OVH, chrome 등의 6개사이고 그 외 IdenTrust,  포드재단, 페이스북, 디지털오션, 볼터, 쇼피파이 등 다수의 스폰서들이 있다.
역시나 결론은 그냥 믿고 쓰면 되겠군이라는 결론 ㅋㅋ
EFF 는 Electronic Frontier Foundation 의 약자로 한국위키 이름이 "전자 프런티어 재단" 이다.

뭔가 틀리진 않았지만 우습달까?
EFF 는 '디지털 월드' 에서 사용자들의 자유를 지키기 위해 1990년 설립된 비영리 재단으로 블루 리본 캠페인도 여기서 시작했다고 한다.
물리적으로는 관계되기 힘든 연결고리 없는 사람들과 조직이 어느날 나에게 직접적으로 혜택을 주는 일들이 많아지는게 참 재밌고 고마울 뿐이다.

진짜 고마우면 Donate! 
Support Let's encrypt
Support EFF Certbot
2 1
Square

씬디 시즌투를 시작한다

시즌1이라는게 없었는데 시즌2를 시작한다니 놀랍군.
어쨋든 시즌2는 다음과 같이 요약됨.
숨겨진 감성이든
누군갈 욕을하든
알게된 지식이든
맛있는 사진이든
자꾸쓰면 잘써진다.
잘쓰려면 자꾸쓰자.
글쓰기는 잔근육빨.
0 0

Rails 모든 연결 SSL 로 변경하기 + Nginx Redirect

Let's encrypt 와 EFF 그리고 여러 스폰서들과 개인기부자들 덕분에 간단하게 SSL 을 적용했으니 이제 모든 http 연결을 ssl 로 돌려보자.
Rails 에서는 Controller 단위에서 force_ssl 을 사용할 수도 있고 보다 와이드하게 전체 설정에서 다룰 수도 있다.
씬디는 https 변경에 다른 별 이슈가 없기때문에 config/environments/production.rb 에 force_ssl 을 설정했다.
이렇게 설정하면 route 룰을 포함해 모두 ssl 연결로 변경된다.
NginX 나 Apache 등을 리버스 프락시로 구성하여 백단에 서버들에게 넘겨준다면 다음의 헤더를 반드시 포함시켜야한다.
Rack 서버는 1) 443 포트로 연결되었는지 2) ENV['HTTPS'] 값이 "on" 인지 3) X-Forwarded-Proto 헤더가 "HTTPS" 인지 3 가지를 보고 판단하기 때문에 리버스 프락시 뒤에 있는 puma 나 unicorn 등은 443 포트가 아닌 다른 포트나 유닉스소켓으로 통신하기 때문에 HTTPS 연결인지 확인하지 못하고 계속 리디렉션 시키게 된다.
NginX 나 Apache 단에서 301 리디렉션으로 연결 프로토콜을 변경할 수도 있겠다.
80 포트를 수신하는 서버 설정을 넣고 해당 설정에서는 http 를 https 로 변경하여 리디렉션시키면 443 을 리스닝하고 있는 아래의 설정이 요청을 수신하게 된다. 
끝.
0 0
Square

업데이트

프레임워크 버전이 너무 올라가서 나중에 따라가려면 대형 공사가 될까 걱정되어 프레임워크 버전업. 하지만 이미 큰 공사였음. 아 힘들어.
텍스트 에디터도 자잘한 오류들이 많이 보여서 코드 정리 및 라이브러리들 일부 업데이트. 완전 힘듬.
별로 테스트 해볼 시간은 없어서 대충 동작되는 것 같아서 서버에 적용.
오류나면? 알려주삼.
0 0

아우 나 돌머리...

아 된장. 원래 소스나 프레임워크 업뎃이 목적이 아니였고.. 글 상세 페이지 하단에 나오는 연관글들 로직 수정하려고 했던건데... 초반에 글이 너무 없어서(지금도 적지만) 최신글 몇개를 박아넣었는데 그게 아직도 살아있어서 없애려는 목적이였는데...
코드를 여는순간 매직!!!! 뻘짓만 드럽게했네.
0 0

미니멀리즘

인테리어나 삶의 방식이 아니라 소프트웨어나 서비스라면 사실 사용자에게 "미니멀리즘" 이 느껴지게 하기위해 물밑에서 엄청난 발장구를 쳐야겠지.
사용자는 아무것도 선택하지않고 (그랬다고 알고있고) 항상 재밌어야할테니까..
0 0
Square

바다

가고 싶다
가서 보고 싶다
가슴이 시원해진다던대.
0 0
Square

먼지

내가 먼지지.
왜 있는지.
뭘 하는지.
뭐든 먼지같지.