http://blog.whoborn.net 후본 블로그 Sat, 16 May 2015 09:56:47 +0000 ko-KR hourly 1 https://wordpress.org/?v=6.2 http://blog.whoborn.net/wp-content/uploads/sites/9/2015/04/blogfavicon.png http://blog.whoborn.net 32 32 http://blog.whoborn.net/%ed%8e%98%ec%9d%b4%ec%8a%a4%eb%b6%81-%ec%86%8c%ec%85%9c-%ed%94%8c%eb%9f%ac%ea%b7%b8%ec%9d%b8-%ec%84%a4%ec%a0%95-%eb%b0%8f-%ec%82%ac%ec%9a%a9/ whoborn Sat, 16 May 2015 09:56:21 +0000 RealMake face book plugin facebook like button facebook social plugin 페이스북 좋아요 버튼 페이스북 플러그인 http://43.201.136.35/blog-whoborn-net/?p=566 <p>페이스북 개발자 페이지에서 App 생성및 웹페이지에 등록을 해보겠습니다. 우선 https://developers.facebook.com/ 페이스북 개발자 페이지에 들어가서 로그인을 합니다. 메뉴에 My Apps를 클릭합니다. 오른쪽 위 Add a New App을 클릭 합니다. &#160; 오른쪽에 웹사이트를 클릭 합니다. 웹 이름을 넣고 Enter를 누르거나 오른쪽 위에 Skip and Create App ID 를 누르고 이름을 설정합니다. 분류를 넣고 App ID 를 생성합니다. 전 여기까지 하고  Skip 하였습니다. 그럼... <p>페이스북 개발자 페이지에서 App 생성및 웹페이지에 등록을 해보겠습니다.</p> <p>우선</p> <p><a href="https://developers.facebook.com/">https://developers.facebook.com/</a></p> <p>페이스북 개발자 페이지에 들어가서 로그인을 합니다.</p> <p><img decoding="async" loading="lazy" class="alignnone size-full wp-image-567" src="http://blog.whoborn.net/wp-content/uploads/2015/05/capture-20150516-181325.png" alt="capture-20150516-181325" width="710" height="116" srcset="http://blog.whoborn.net/wp-content/uploads/sites/9/2015/05/capture-20150516-181325.png 710w, http://blog.whoborn.net/wp-content/uploads/sites/9/2015/05/capture-20150516-181325-300x49.png 300w" sizes="(max-width: 710px) 100vw, 710px" /></p> <p>메뉴에 My Apps를 클릭합니다.</p> <p><img decoding="async" loading="lazy" class="alignnone size-full wp-image-568" src="http://blog.whoborn.net/wp-content/uploads/2015/05/capture-20150516-181549.png" alt="capture-20150516-181549" width="952" height="112" srcset="http://blog.whoborn.net/wp-content/uploads/sites/9/2015/05/capture-20150516-181549.png 952w, http://blog.whoborn.net/wp-content/uploads/sites/9/2015/05/capture-20150516-181549-300x35.png 300w" sizes="(max-width: 952px) 100vw, 952px" /></p> <p>오른쪽 위 Add a New App을 클릭 합니다.</p> <p>&nbsp;</p> <p><img decoding="async" loading="lazy" class="alignnone size-full wp-image-569" src="http://blog.whoborn.net/wp-content/uploads/2015/05/capture-20150516-181739.png" alt="capture-20150516-181739" width="771" height="425" srcset="http://blog.whoborn.net/wp-content/uploads/sites/9/2015/05/capture-20150516-181739.png 771w, http://blog.whoborn.net/wp-content/uploads/sites/9/2015/05/capture-20150516-181739-300x165.png 300w" sizes="(max-width: 771px) 100vw, 771px" /></p> <p>오른쪽에 웹사이트를 클릭 합니다.</p> <p><img decoding="async" loading="lazy" class="alignnone size-full wp-image-570" src="http://blog.whoborn.net/wp-content/uploads/2015/05/capture-20150516-181930.png" alt="capture-20150516-181930" width="945" height="387" srcset="http://blog.whoborn.net/wp-content/uploads/sites/9/2015/05/capture-20150516-181930.png 945w, http://blog.whoborn.net/wp-content/uploads/sites/9/2015/05/capture-20150516-181930-300x123.png 300w" sizes="(max-width: 945px) 100vw, 945px" /></p> <p>웹 이름을 넣고 Enter를 누르거나 오른쪽 위에 Skip and Create App ID 를 누르고 이름을 설정합니다.</p> <p><img decoding="async" loading="lazy" class="alignnone size-full wp-image-571" src="http://blog.whoborn.net/wp-content/uploads/2015/05/capture-20150516-182247.png" alt="capture-20150516-182247" width="621" height="289" srcset="http://blog.whoborn.net/wp-content/uploads/sites/9/2015/05/capture-20150516-182247.png 621w, http://blog.whoborn.net/wp-content/uploads/sites/9/2015/05/capture-20150516-182247-300x140.png 300w" sizes="(max-width: 621px) 100vw, 621px" /></p> <p>분류를 넣고 App ID 를 생성합니다.</p> <p>전 여기까지 하고  Skip 하였습니다.<img decoding="async" loading="lazy" class="alignnone size-full wp-image-572" src="http://blog.whoborn.net/wp-content/uploads/2015/05/capture-20150516-182630.png" alt="capture-20150516-182630" width="735" height="339" srcset="http://blog.whoborn.net/wp-content/uploads/sites/9/2015/05/capture-20150516-182630.png 735w, http://blog.whoborn.net/wp-content/uploads/sites/9/2015/05/capture-20150516-182630-300x138.png 300w" sizes="(max-width: 735px) 100vw, 735px" /></p> <p>그럼 App ID 와 App Secret 이 생성 됩니다.</p> <p><img decoding="async" loading="lazy" class="alignnone size-full wp-image-573" src="http://blog.whoborn.net/wp-content/uploads/2015/05/capture-20150516-182920.png" alt="capture-20150516-182920" width="960" height="424" srcset="http://blog.whoborn.net/wp-content/uploads/sites/9/2015/05/capture-20150516-182920.png 960w, http://blog.whoborn.net/wp-content/uploads/sites/9/2015/05/capture-20150516-182920-300x133.png 300w" sizes="(max-width: 960px) 100vw, 960px" /></p> <p>왼쪽 메뉴에 Settings 을 누르고 +Add Platform 을 선택 합니다.</p> <p><img decoding="async" loading="lazy" class="alignnone size-full wp-image-574" src="http://blog.whoborn.net/wp-content/uploads/2015/05/capture-20150516-183127.png" alt="capture-20150516-183127" width="685" height="426" srcset="http://blog.whoborn.net/wp-content/uploads/sites/9/2015/05/capture-20150516-183127.png 685w, http://blog.whoborn.net/wp-content/uploads/sites/9/2015/05/capture-20150516-183127-300x187.png 300w" sizes="(max-width: 685px) 100vw, 685px" /></p> <p>웹사이트에 플러그인을 연결하기위헤 Website를 선택합니다.</p> <p><img decoding="async" loading="lazy" class="alignnone size-full wp-image-575" src="http://blog.whoborn.net/wp-content/uploads/2015/05/capture-20150516-183402.png" alt="capture-20150516-183402" width="728" height="325" srcset="http://blog.whoborn.net/wp-content/uploads/sites/9/2015/05/capture-20150516-183402.png 728w, http://blog.whoborn.net/wp-content/uploads/sites/9/2015/05/capture-20150516-183402-300x134.png 300w" sizes="(max-width: 728px) 100vw, 728px" /></p> <p>웹 사이트 모바일 사이트 주소를 넣고 저장을 합니다.</p> <p>그럼 api key 사용 설정이 되었습니다.</p> <p><img decoding="async" loading="lazy" class="alignnone size-full wp-image-576" src="http://blog.whoborn.net/wp-content/uploads/2015/05/capture-20150516-184240.png" alt="capture-20150516-184240" width="943" height="499" srcset="http://blog.whoborn.net/wp-content/uploads/sites/9/2015/05/capture-20150516-184240.png 943w, http://blog.whoborn.net/wp-content/uploads/sites/9/2015/05/capture-20150516-184240-300x159.png 300w" sizes="(max-width: 943px) 100vw, 943px" /></p> <p>그리고 메뉴에서 Doc &#8211; Social plugins을 선택 합니다.</p> <p>그 중 사용할 플러그인을 선택 합니다.</p> <p>전 좋아요 버튼을 사용하겠습니다.</p> <p><img decoding="async" loading="lazy" class="alignnone size-full wp-image-577" src="http://blog.whoborn.net/wp-content/uploads/2015/05/capture-20150516-184824.png" alt="capture-20150516-184824" width="935" height="378" srcset="http://blog.whoborn.net/wp-content/uploads/sites/9/2015/05/capture-20150516-184824.png 935w, http://blog.whoborn.net/wp-content/uploads/sites/9/2015/05/capture-20150516-184824-300x121.png 300w" sizes="(max-width: 935px) 100vw, 935px" /></p> <p>URL , Width, Layout, Action Type 을 설정 하고  Get Code를 선택합니다.</p> <p>&nbsp;</p> <p><img decoding="async" loading="lazy" class="alignnone size-full wp-image-578" src="http://blog.whoborn.net/wp-content/uploads/2015/05/capture-20150516-185138.png" alt="capture-20150516-185138" width="725" height="639" srcset="http://blog.whoborn.net/wp-content/uploads/sites/9/2015/05/capture-20150516-185138.png 725w, http://blog.whoborn.net/wp-content/uploads/sites/9/2015/05/capture-20150516-185138-300x264.png 300w" sizes="(max-width: 725px) 100vw, 725px" /></p> <p>그럼 코드가 생성되고 코드를 사용할 웹에 넣으면 해당 플러그인을 사용 할 수 있습니다.</p> <p>이런 방식으로, 댓글 달기, 포스트 가져오기,  추천하기 등 원하는 페이스북 플러그인을 사용 할 수 있습니다.</p>The post <a href="http://blog.whoborn.net/%ed%8e%98%ec%9d%b4%ec%8a%a4%eb%b6%81-%ec%86%8c%ec%85%9c-%ed%94%8c%eb%9f%ac%ea%b7%b8%ec%9d%b8-%ec%84%a4%ec%a0%95-%eb%b0%8f-%ec%82%ac%ec%9a%a9/">페이스북 소셜 플러그인 설정 및 사용</a> first appeared on <a href="http://blog.whoborn.net">Whoborn Blog</a>.