React 아키텍쳐 패러다임 - 진겸 architecture

Facebook Developer Circle Launch Event 29/11/2017 https://www.facebook.com/groups/DevCS...



...

Posted by 홍반장水 홍반장水

[FB] facebook 공유하기 위한 웹페이지의 meta 정보 작업 Tag


https://developers.facebook.com/docs/sharing/webmasters




meta 정보가 정확해야 공유하기 했을때 미리보기가 잘 나온다. 


이미지가 항상 문제가 되는데, 최소 사이즈가 200x200 픽셀이다. 


크게 나오는 이미지는  최소한 600x315픽셀 이상이어야 한다. 


이미지관련은 아래의 링크에서 확인해보자. 

https://developers.facebook.com/docs/sharing/best-practices#images




공유디버그(캐쉬 삭제, 미리보기 확인)

https://developers.facebook.com/tools/debug/sharing/



=================================

웹 마스터용 공유 가이드

이 문서에서는 데스크톱, 모바일 웹, 모바일 앱 등 공유된 위치와 관계없이 Facebook에 공유하는 웹 호스팅된 콘텐츠를 최적화하는 방법에 대해 설명합니다.

이 문서에서는 다음에 대한 정보를 제공합니다.

오픈 그래프 마크업

대부분의 콘텐츠는 URL로 Facebook에 공유되므로, Facebook에 콘텐츠가 표시되는 방식을 관리하기 위해 오픈 그래프 태그로 웹사이트를 마크업하는 것이 중요합니다.

이러한 태그가 없으면 Facebook 크롤러에서 내부의 경험적 접근법을 사용하여 콘텐츠의 제목, 설명, 미리 보기 이미지에 대해 가장 현실성 높은 추측을 내립니다. Facebook에 게시물이 가장 최적화된 품질로 표시될 수 있도록 오픈 그래프 태그를 사용하여 이 정보를 명시적으로 지정합니다.

다음은 Facebook에 최적화되어 표시되도록 오픈 그래프 태그로 형식화된 콘텐츠의 예시입니다.

마크업 예시

예를 들어, 다음은 og:type="article" 및 여러 추가 속성으로 기사, 뉴스 소식 또는 블로그 게시물을 마크업하는 방법입니다.

<meta property="og:url"                content="http://www.nytimes.com/2015/02/19/arts/international/when-great-minds-dont-think-alike.html" />
<meta property="og:type"               content="article" />
<meta property="og:title"              content="When Great Minds Don’t Think Alike" />
<meta property="og:description"        content="How much does culture influence creative thinking?" />
<meta property="og:image"              content="http://static01.nyt.com/images/2015/02/19/arts/international/19iht-btnumbers19A/19iht-btnumbers19A-facebookJumbo-v2.jpg" />

이 속성에는 사용자가 기사를 공유할 때 특별히 표시할 기사에 대한 설명적인 메타데이터가 포함됩니다.

기본 태그

다음은 모든 콘텐츠 유형에 사용해야 하는 가장 기본적인 메타 태그입니다.

태그설명

og:url

페이지의 표준 URL입니다. 세션 변수, 사용자 식별 매개변수 또는 카운터가 없는 그대로의 URL이어야 합니다. 이 URL의 좋아요 및 공유는 이 URL에서 집계됩니다. 예를 들어, 여러 버전의 페이지에서 좋아요와 공유를 집계하기 위해 모바일 도메인 URL은 표준 URL로 지정된 데스크톱 버전의 URL을 가리켜야 합니다.

og:title

사이트 이름과 같은 브랜드가 없는 기사의 제목입니다.

og:description

콘텐츠의 간략한 설명으로, 대개 2~4개의 문장으로 구성됩니다. 이 설명은 Facebook의 게시물 제목 아래에 표시됩니다.

og:image

사용자가 Facebook에 콘텐츠를 공유할 때 표시되는 이미지의 URL입니다. 자세한 내용은 아래를 참조하고, 고품질 미리 보기 이미지를 지정하는 방법에 대해 알아보려면 모범 사례 가이드를 확인하세요.

fb:app_id

Facebook 도메인 인사이트를 사용하려면 페이지에 앱 ID를 추가해야 합니다. 도메인 인사이트를 사용하면 Facebook에서 회원님의 사이트로 보내는 트래픽의 분석 결과를 볼 수 있습니다. 앱 대시보드에 앱 ID가 있습니다.


콘텐츠 배포를 늘리고 참여를 높이기 위해 다음 두 개의 태그를 추가할 수도 있습니다.

태그설명

og:type

콘텐츠의 미디어 유형입니다. 이 태그는 뉴스피드에 콘텐츠가 표시되는 방식에 영향을 줍니다. 유형을 지정하지 않는 경우 기본값은 website입니다. 각 URL은 단일 개체여야 하므로, 여러 og:type 값은 가능하지 않습니다. 모든 개체 유형은 개체 유형 참조에서 확인할 수 있습니다.

og:locale

리소스의 언어입니다. 기본값은 en_US입니다. 다른 언어로 번역 기능을 사용할 수 있으면 og:locale:alternate도 사용할 수 있습니다. 현지화에 대한 문서에서 지원되는 언어에 대해 알아보세요.


모든 표준 개체 속성은 개체 속성 참조에서 확인할 수 있습니다.

마크업 테스트

Facebook 크롤러에 마크업이 표시되는 방식을 보려면 공유 디버거에 URL을 입력합니다. 오류나 경고 외에도 크롤러가 스크랩하는 메타 태그가 표시됩니다.

디버거에서는 페이지의 스크랩도 트리거하므로, HTML에 오류가 있는 경우 디버거를 사용하여 콘텐츠를 업데이트할 수 있습니다. 자세한 내용은 개체 업데이트를 참조하세요.

미디어 콘텐츠 유형

콘텐츠에 오디오, 동영상 또는 위치 정보가 포함된 경우 마크업을 추가할 수 있습니다. 모든 표준 개체 속성은 개체 유형 참조를 확인하세요.

동영상

모든 콘텐츠 유형에 대해 og:video를 사용할 수 있습니다. 이 섹션에서는 추가 태그를 사용하여 Facebook에서 동영상의 모양을 최적화하는 방법을 설명합니다. Facebook에서는 mp4와 Flash 동영상을 모두 지원합니다.

og:video:url과 og:video:secure_url 태그 모두에 보안 URL을 사용하여 동영상을 뉴스피드에서 즉시 재생할 수 있게 만듭니다. 다양한 요인에 따라 동영상이 즉시 재생되지 않을 수도 있습니다.

메타 태그설명

og:video

동영상의 URL입니다. 뉴스피드에서 즉시 동영상을 재생하려면 가능한 한 https:// URL을 사용해야 합니다.

og:video:url

og:video URL입니다.

og:video:secure_url

동영상의 보안 URL입니다. og:video에 보안 URL을 설정한 경우에도 이 URL을 포함합니다.

og:video:type

동영상의 MIME 유형입니다. application/x-shockwave-flash 또는 video/mp4입니다.

og:video:width

픽셀 단위로 된 동영상의 너비입니다. 동영상의 필수 속성입니다.

og:video:height

픽셀 단위로 된 동영상의 높이입니다. 동영상의 필수 속성입니다.

og:image

뉴스피드에서 고품질 미리 보기를 위한 이미지를 지정합니다.


이미지

두 개 이상의 이미지를 포함하는 콘텐츠에 이 속성 세트를 사용합니다. og:image를 가장 효율적으로 사용하는 방법에 대한 가이드는 공유 모범 사례를 참조하세요.

메타 태그설명

og:image

이미지의 URL입니다. 이미지를 게시한 다음 업데이트하려면 새 이미지에 대해 새 URL을 사용합니다. 이미지는 URL을 기반으로 캐싱되며 URL이 변경되는 경우가 아니면 업데이트되지 않습니다.

og:image:url

og:image URL입니다.

og:image:secure_url

이미지의 https:// URL입니다.

og:image:type

이미지의 MIME 유형입니다. image/jpegimage/gifimage/png 중 하나입니다.

og:image:width

픽셀 단위의 이미지 너비입니다. 이미지를 처음 공유할 때 올바르게 읽어들일 수 있도록 이미지의 높이와 너비를 지정합니다.

og:image:height

픽셀 단위의 이미지 높이입니다. 이미지를 처음 공유할 때 올바르게 읽어들일 수 있도록 이미지의 높이와 너비를 지정합니다.





...

Posted by 홍반장水 홍반장水

[FACEBOOK UI] github - facebook UI material



https://github.com/nekomy/nekomy-platform


An open source LMS (eLearning platform) for MOOCs and online courses (like Tutellus.com or Udemy.com with extra features). Tech stack includes PWA & SPA with Facebook's React, Google's Firebase, Slack API and Material UI 



https://github.com/danivegamx/facebook-material


This is a UI version of the main Facebook timeline, using Polymer and webcomponents. The main idea is to make a visual substitution of the react.js view-controllers with the Material Design concept.





...

Posted by 홍반장水 홍반장水

빠른 시작: JavaScript용 Facebook SDK

https://developers.facebook.com/docs/javascript/quickstart



JavaScript용 Facebook SDK의 다양한 클라이언트 측 기능 세트로 다음을 수행할 수 있습니다.

  • 사이트에서 좋아요 버튼과 기타 소셜 플러그인을 사용할 수 있습니다.
  • 사이트에 가입을 꺼리는 요인을 저하시키기 위해 Facebook 로그인을 사용할 수 있습니다.
  • Facebook의 그래프 API를 쉽게 호출할 수 있습니다.
  • 소식 공유와 같은 다양한 액션을 수행할 수 있는 대화 상자를 실행할 수 있습니다.
  • Facebook에서 게임 또는 앱 탭을 빌드할 때 쉽게 통신할 수 있습니다.

SDK, 소셜 플러그인 및 대화 상자는 데스크톱과 모바일 웹 브라우저 모두에서 작동합니다.

이 빠른 시작에서는 SDK 설정 방법을 보여주고 몇 가지 기본 그래프 API를 호출하는 방법을 익혀봅니다. 아직 설정하지 않은 경우 JavaScript 테스트 콘솔을 통해 모든 SDK 메서드를 사용해보고 몇 가지 예제를 살펴볼 수 있습니다. 설정 단계를 건너뛰고 이 빠른 시작의 나머지 부분만 콘솔에서 테스트해볼 수도 있습니다.

기본 설정

JavaScript용 Facebook SDK에는 다운로드하거나 설치해야 하는 독립실행형 파일이 없습니다. 대신 SDK를 페이지에 비동기식으로 읽어들일 HTML에 간단한 JavaScript 정규식을 포함하기만 하면 됩니다. 비동기식으로 읽어들이면 페이지의 다른 요소를 읽어들이는 것을 차단하지 않습니다.

다음 픽셀 코드는 옵션이 가장 일반적인 기본값으로 설정되는 기본 SDK 버전을 제공합니다. 읽어들일 각 페이지의 <body> 태그를 연 다음 바로 삽입해야 합니다.

<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId            : 'your-app-id',
      autoLogAppEvents : true,
      xfbml            : true,
      version          : 'v2.10'
    });
    FB.AppEvents.logPageView();
  };

  (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";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
</script>
    

이 코드는 SDK를 읽어들인 다음 초기화합니다. 직접 만든 Facebook 앱의 ID로 your-app-id 값을 대체해야 합니다. 앱 ID는 앱 대시보드에서 찾을 수 있습니다.




...

Posted by 홍반장水 홍반장水

Chatfuel - Setup Free Facebook Messenger Bot In 14 Minutes





...

Posted by 홍반장水 홍반장水

[Chatbot] Chatfuel - Build a Facebook bot without coding


https://chatfuel.com/


개인이 직접 페이스북 메신저 챗봇을 만들 수 있는 챗봇 빌더, 


역시 챗봇은 기술이 아니라 컨텐츠가 쟁점. 


10분만에 Chatful을 이용하여 챗봇 만들기


Learn how to create a chatbot with AI navigation just in 10 minutes using Chatfuel.


Visit us here: https://chatfuel.com/


Chatfuel — the intuitive bot builder with AI navigation. Use it to create your own chatbot without any coding skills. 



...

Posted by 홍반장水 홍반장水

페이스북 동영상 서비스 신기하네.

사진 선택 기준이 무엇인지 궁금하군.

 

회원님을 주인공으로 한 동영상이 준비되었습니다.

확인해보세요: https://facebook.com/lookback/ #FacebookIs10

 

나의 동영상 : https://www.facebook.com/photo.php?v=749584681721280&l=6980629428597944331

Posted by 홍반장水 홍반장水

RocksDB: Persistent key-value store for fast storage http://ow.ly/2BzPfY

 

RocksDB: Persistent key-value store for fast storage

Embedded key-value store for fast storage

rocksdb

Homepage: http://rocksdb.org/
GitHub: https://github.com/facebook/rocksdb
Docs: http://rocksdb.org/overview.html

 

 

The rocksdb library provides a persistent key value store. Keys and values are arbitrary byte arrays. The keys are ordered within the key value store according to a user-specified comparator function.

The library is maintained by the Facebook Database Engineering Team, and is based on leveldb, by Sanjay Ghemawat and Jeff Dean at Google.

This overview gives some simple examples of how RocksDB is used. For the story of why RocksDB was created in the first place, see Dhruba Borthakur's introductory talk from the Data @ Scale 2013 conference.

 

 

 

Posted by 홍반장水 홍반장水

[SNS] facebook에 url공유를 했는데, 자꾸 이전정보가 나온다면?

페이지를 찾지 못한다면?

 

그건 페이스북에 해당 url에 대한 cache가 남아있어서이다.

 

아래 url로 들어가서 원하는 url을 입력하고 테스트 해보면 확인 가능하고, cache도 지워진다.

 

 

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

 

 

 

 

 

Posted by 홍반장水 홍반장水

[출처]

http://www.imaso.co.kr/?doc=bbs/gnuboard.php&bo_table=article&wr_id=41825
http://www.imaso.co.kr/?doc=bbs/gnuboard.php&bo_table=article&wr_id=42062

 

[마소연재] 페이스북 웹앱 만들기

 

1회 : 2013.01 | 페이스북 앱 기본 설정

2회 : 2013.02 | 페이스북 PHP/자바스클비트 SDK 사용

3회 : 2013.03 | 페이스북 웹앱 완성 및 광고 설정

 

 

1.페이스북 개발자 페이지에 접속 - http://developers.facebook.com/

 

2.페이스북 개발자 등록

  : 페이지 상단의 "APP" 메뉴를 선택하면 등록된 정보를 볼 수 있다.

 

3.페이스북 앱 생성

  : "새 앱 만들기" 버튼을 선택하고, "계속하기"를 누르면 헤로쿠(Heroku)와 관련된 기본적인 설정 페이지가

      보인다. 헤로쿠를 사용하지 않느다고 선택하면 바로 앱설정 페이지로 넘어간다.

     헤로쿠 호스팅 설정 페이지에서는 서버사이드 개발에 사용할 언어 설정과 이메일 주소를 입력한다.

     서버사이드 개발언어로는 PHP를 사용하고, 이메일 주소에는 사용 중인 헤로쿠 계정이있다면

     헤로쿠 계정을 적고 계정이 없는 경우에는 헤로쿠에서 사용할 이메일 주소를 입력하면

     해당 이메일주소로 회원가입 메일이 온다.

 

     * 헤로쿠 : PaaS기반의 클라우드 서비스 플랫폼이다. 별도 호스팅 절차없이 페이스북 앱을

                     PHP,Ruby,Node.js,Python으로 개발할 수 있다.

 

# 새 앱 만들기 옵션 

 App Name

 3~32 글자 제한이며 외부에 노출될 때 보이는 앱의 제목이다.

 App Namespace

 앱의고유 ID로 앱으로 접속 시 고유 URL 주소로 사용된다.

선택사항이지만 캔버스 앱에서 URL로 쓰이므로 처음부터 설정하는 쪽이 편하다.

 Locale

 앱에서 사용할 언어를 선택한다.

특정 조건에서는 보이지 않기도 하지만 앱 설정에서 다시 설정할 수 있으니

걱정하지 말자.

 Web Hosting

 웹호스팅 서비스 헤로쿠를 사용할 것인지 묻는 항목이다.

헤로쿠를 사용하면 기본적으로 URL 설정과 SSL을 바로 제공하므로 서버 셋팅에 큰 시간을 들일 필요가 없다.

 

======================================================================================================

1.페이지 생성

  : 페이지 생성 주소 - http://www.facebook.com/pages/create.php

    * 페이지 탭 앱 등록방법 : http://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&next=YOUR_URL

 

헤로쿠를 사용하면 페이스북 웹앱 개발이 빠른 이유 

  •  페이스북 앱에서 헤로쿠 연동을 처음부터 제공해주기 때문에 서버 구성에 드는 시간이 최소화된다.
  • 페이스북 앱에서 권장하는 SSL 설정을 바로 제공해죽 때문에 많은 비용과 시가니 소모되는 SSL 설정 작업을 적용 시간과 비용으로 구축 할 수 있다.
  • 페이스북 앱을 만드는 데 필요한 PHP, javascript 등의 좋은 예제 코드를 기본 페이지를 통해 제공한다. 해당 코드들은 향후 페이스북 앱 개발에 있어 많은 도움이 된다.

 

* 헤로쿠 개발 구축 환경

헤로쿠 툴밸트를 사용해 계정 로그인용 인증키를 받고, 이를 사용해 소스를 관리하고 배포할 수 있다. (윈도우용 헤로쿠 인스톨러에는 Git가 포함돼있다. )

 기존 Git을 설치해 사용하고 있었다면 Git 설치 옵션을 제히하고 설치해야 한다.

 만약 Git를 다시 설치한다면 기존의 모든 설정이 초기화되고 SSH키값이 모두 사라진다.

 

 헤로쿠 툴밸트를 모두 설치했다면 커맨드라인에 'herokulogin'을 입력하고 헤로쿠 계정으로 로그인할 수 있다.

그 후 Git를 통해 소스를 다운로드 할 수 있다.

설정이 모두 정상적으로 이루어 졌는지 확인하기 위해 다운로드한 소스중에서 index.php 파일을 수정해보자.

바꾸고 Commit후에 Push하면 페이스북 앱에 바로 적용된다.

Git의  master branch의 최신 데이터로 앱을 배포한다는 것을 알 수 있다.

 

 

* 헤로쿠 개발환경 개선

 로컬PC에서 웹서버를 설치하고 PHP를 구동하자 - www.apmsetup.com

 로컬서버의 루트폴더에 Git로 헤로쿠에서 받아온 파일을 넣는다.

 http://localhost  로  구동시 설정 문제가 있다.

 

1. 페이스북 PHP SDK 사용에 필요한 '/sdk' 폴더가 없다.

   - Facebook SDK for PHP를 페이스북 개발자 페이지에서 다운로드하고,

      로컬 테스트 서버 환경의 웹 루트 하우에 '/sdk/src/facebook.php' 가 위치하도록 설치한다.

 

2. cURL 기능이 필요하다.

   - PHP에 cURL 기능이 있는지 phpinfo()로 확인하고 없으면 설치한다.

 

3.App ID, App Secret Code가 없다.

   - /Appinfo.php 파일에서는 App ID와 App Secret Code의 설정에 getenv() 함수를 사용하고 있다.

     이와 같은 헤로쿠 서버의 정보는 http://phpinfo.herokuapp.com 을 통해 확인할 수 있다.

 

로컬 테스트 서버 환경에 설치된 아파치에도 헤로쿠와 동일하게 App ID와 App Secret Code를 설정하기 위해 httpd.conf 파일 아래에 다음의 텍스트를 추가한다.

 

<VirtualHost *:80>

DocumentRoot (설치경로)

ServerName 127.0.0.1

SetEnv FACEBOOK_APP_ID (APP_ID)

SetEnv FACEBOOK_SECRET (SECRET)

</VirtualHost>

 

이렇게 마치면 로컬 서버 환경에서도 헤로쿠와 동일한 페이지가 출력된다. 하지만 페이스북앱의 도메인 퍼미션 때문에 로그인 버튼이 동작하지 않는다. 이를 해결하기 위해서는 페이스북 앱 설정 페이지에 있는 'Website with facebook login'에 http://127.0.0.1 을 추가해 로컬 테스트 서버 환경에 접근 권한을 주면 된다.

 

마지막으로 로컬 서버에서 개발한 것을 Git에 커밋하고 Push할 때 '/sdk' 폴더를 포함시키지 않도록 주의해야 한다. 헤로쿠 서버의 '/sdk' 폴더 내의 내용을 최신 페이스북 PHP SDK 로 관리해주기 때문이다. 또한 로컬 환경에서 동작했던 값이 그래도 헤로쿠 환경에 적용될 수 있도록 버전(PHP의 경우 'phpinfo()'한수로 확인 가능)관리에 신경 쓰자.

 

** 마소지 2013.01 참고 **

 

 

* 페이스북 자바스크립트 SDK

 : http://developers.facebook.com/docs/reference/javascript/

 

* 페이스북 Dialog

 : http://developers.facebook.com/docs/reference/dialogs/

 

* 페이스북 FQL(Facebook Query Language)

 : http://developers.facebook.com/docs/reference/fql/

 

* 페이스북 그래프 API

 : http://developers.facebook.com/docs/reference/api/

 

* Facebook SDK for PHP

 : http://developers.facebook.com/docs/reference/php/

 

 

 

 

 

 

 

 

 

 

 

 

Posted by 홍반장水 홍반장水