타운광장토픽게시판

oEmbed 애드온 수정(페이스북)

jbl_ref
조회 수 545
크게 작게 댓글로 가기
크게 작게 위로 아래로 댓글로 가기

xe의 애드온 oEmbed를 사용하는데 embed하던 SNS부류중에
facebook만은 작동하지 않아서 

레이아웃에 facebook developcenter에서 말하는 SDK(?)를 박아넣고

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.2";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>


그리고는 https://developers.facebook.com/docs/plugins/embedded-posts 의 코드제너레이터를 통해 임베드해왔습니다. --;
당연히 관리자인 저만 facebook을 포스트 카드째로 퍼올수 있겠지요? ㅎㅎ (저희 사용자들은 HTML도 잘 몰라요. 게다가 일반회원 권한으로 글을 작성하면, 페북이 제공하는 소스가 게시판에서는 자동 삭제되더라고요. 텍스트만 남고.)

그러던 중 기븐님의 https://xetown.com/lakepark/73059 이 팁을 보고 늘 못마땅히 여기던 유튜브 화면비율문제를 해결하면서 facebook부분도 찾아보았습니다.  jquery.oembed.js 에서요. 

 

맨첫줄에 그냥 2009로 시작하길래....오오 이것이 2009년에 작성된 것이렸다? 라는 막연한? 추측을 하며 
그리하여 구글링을 했더니 https://github.com/nfl/jquery-oembed-all

이런걸 찾았어요. (https://github.com/starfishmod/jquery-oembed-all, 얘보다는 위의것이 최근것 같아서 --; 깃헙 잘 모릅니다. xetown 레벨1이 알리가... --;)

 

내용을 들여다보니 페이스북 관련부분이 적어도 xe 애드온의 jquery.oembed.js 내용보다는 최신것이 분명해보여서
그부분을 카피하여 애드온의 해당 화일에서 페이스북 부분을 찾아 수정을 했습니다.
(물론 xetown에서 추천해주신 http://jscompress.com 을 통해 minify도 해서  jquery.oembed.min.js도 덮었습니다.)

 

 

시험삼아 레이아웃에 박았던 위의 스크립트를 다 없애고 게시글과 댓글에 페이스북 포스트 주소만 홀랑 넣으니까 오~임베드 잘되네요. 으흐흐흐
저는 어려운거 모르고요...혹시나 도움이 되실 분이 계실까해서 공유해봅니다. 커뮤니티 유저들이 편리하게 사용하게 할수 있는 tip은 되지 않을까 싶어서 창피하지만 적어봅니다.
 

뻘 : oEmbed 단점은...느리다는 것 ...정도...흡. ㅠㅠ
뻘2: 여러가지를 퍼오면 화면 로딩이 더욱 느려진다는 것... ㅠㅠㅠ

TAG •
위로 아래로
댓글 6
  • ?
    잘 이해가 안되는데 혹시 기본 oEmbed로는 페이스북이 안되는데 최신버전을 사용하니까 되더라는 말씀이신가요?

    전 페이스북도 잘 되던 거 같아서...;;

    어느 부분을 수정해야 하는지 내용 추가해 주실 수 있나요?

    (참고로 저도 예전에 저 글 쓰기 전에 이리저리 뒤지다가 최신버전을 찾아내긴 했는데, 확인해보니까 xe팀에서 따로 수정해놓은 내용들도 있는거 같아서 그냥 그대로 덮어씌우면 안 될거 같더군요. 일일히 하나하나 비교해서 수정하려다가 노가다가 심해서 포기했습니다)
  • ? profile

    예. 저는 작년부터 oEmbed를 사용했는데 페이스북은 작동하지 않더라구요.
    그리고 oEmbed말고 페이스북측 방식대로 퍼오는 것도 관리자(최고권한)아이디만 소스가 먹히구요.

            new $.fn.oembed.OEmbedProvider("facebook", "rich", ["facebook.com"], null
            , {templateRegex: /.*\/([^\/]+)\/([^\/]+).*/,
                template: function (url) {
                    // adding script directly to DOM to make sure that it is loaded correctly.
                    if (!$.fn.oembed.facebokScriptHasBeenAdded) {
                        $('<div id="fb-root"></div>').appendTo('body');
                        var script = document.createElement('script');
                        script.type = 'text/javascript';
                        script.text = '(function(d, s, id) {var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) return;js = d.createElement(s); js.id = id;js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.0";fjs.parentNode.insertBefore(js, fjs);}(document, "script", "facebook-jssdk"));';
                        document.body.appendChild(script);
                        $.fn.oembed.facebokScriptHasBeenAdded = true;
                    }

                    // returning template with url of facebook post.
                    return '<div class="fb-post" data-href="' + url + '" data-width="520"><div class="fb-xfbml-parse-ignore"><a href="' + url + '"></div></div>';

                }
            }),
        /*
         // Saving old implementation of Facebook in case we will need it as example in the future.
         new $.fn.oembed.OEmbedProvider("facebook", "rich", ["facebook.com/(people/[^\\/]+/\\d+|[^\\/]+$)"], "https://graph.facebook.com/$2$3/?callback=?"
         ,{templateRegex:/.*facebook.com\/(people\/[^\/]+\/(\d+).*|([^\/]+$))/,
         templateData : function(data){ if(!data.id)return false;
         var out =  '<div class="oembedall-facebook1"><div class="oembedall-facebook2"><a href="http://www.facebook.com/">facebook</a> ';
         if(data.from) out += '<a href="http://www.facebook.com/'+data.from.id+'">'+data.from.name+'</a>';
         else if(data.link) out += '<a href="'+data.link+'">'+data.name+'</a>';
         else if(data.username) out += '<a href="http://www.facebook.com/'+data.username+'">'+data.name+'</a>';
         else out += '<a href="http://www.facebook.com/'+data.id+'">'+data.name+'</a>';
         out += '</div><div class="oembedall-facebookBody"><div class="contents">';
         if(data.picture) out += '<a href="'+data.link+'"><img src="'+data.picture+'"></a>';
         else out += '<img src="https://graph.facebook.com/'+data.id+'/picture">';
         if(data.from) out += '<a href="'+data.link+'">'+data.name+'</a>';
         if(data.founded) out += 'Founded: <strong>'+data.founded+'</strong><br>';
         if(data.category) out += 'Category: <strong>'+data.category+'</strong><br>';
         if(data.website) out += 'Website: <strong><a href="'+data.website+'">'+data.website+'</a></strong><br>';
         if(data.gender) out += 'Gender: <strong>'+data.gender+'</strong><br>';
         if(data.description) out += data.description + '<br>';
         out += '</div></div>';
         return out;
         }
         }),
         */

    주석처리로 기존방식것을 남겨두었길래 그대로 퍼왔습니다.
    현재 우리가 사용하는 xe oEmbed 애드온의 소스는 주석처리된 것과 동일하더라고요.

  • profile ?
    혹시 embed/iframe 태그가 관리자 계정으로만 된다는 말씀이라면 설정에서 화이트리스트에 등록시켜주면 됩니다(설정-일반-embed filter)
  • ? profile
    아뇨 그 관리자-설정-일반의 화이트리스트 등록말구요.
    페북이 제공하는 공유 코드요. 그게 xe게시물로서는 최고관리자만 허용되기 때문에 제가 oembed 애드온 수정을 고민했던 거였어요.
  • profile ?
    그렇군요. 사실 페이스북을 안 써서 모르겠네요. 일단 올려주신 부분부터 수정해놔야겠네요
  • profile

    이거(https://github.com/nfl/jquery-oembed-all) 다시금 유심히 보니까요. xe의 기존것과 비교해서 말이지요.
    oEmbed provider들의 변경코드 업데이트도 반영되어있지만 이전에 없던 것들도 추가가 되어있구요.(vine등등)
    무엇보다 OGP(오픈그라프, og메타정보등으로 임베드하는) 방식도 반영되어있네요.

    그래서 min.js, min.css화일을 만들어서 그냥 XE것에 덮어버렸더니
    정말 og정보를 제대로 뿌려주는 블로그들이나 기사들까지도 카드형태로 임베드 되는데요? 오오옹. (페이스북이 그렇듯이 말입니다)