• 워드프레스-페이스북 연동: 소셜 퍼블리싱 (2)

    이전 글 ‘워드프레스-페이스북 연동: 소셜 퍼블리싱 (1)’에 이어서 설명 하겠습니다. 이전 글에 포함된 앱 설정 페이지에서 다시 [제출] 링크를 누르면 다음과 같은 페이지가 나타납니다. 위 그림에서 오픈 그래프 인증 1단계로서 ‘Provide trigger steps’인 것을 확인할 수 있습니다. 계속 진행을 위해서는 추가 코드가 필요하며, 그 코드를 얻기 위해서는 다음과 같이 Graph API Explorer 페이지로 이동합니다. 위 그림의 우측 상단 부근에 있는 [액세스 토큰 얻기] 버튼을 클릭하면 다음과 같이 ‘Select Permissions’ 팝업 창이 나타납니다. 위 그림의 ‘Select Permissions’ 팝업 창에서 ‘User Data Permissions’, ‘Friends Data Permissions’, ‘Extended Permissions’ 설정을 할 수 있는 것을 확인할 수 있습니다. 우리가 필요한 것은 워드프레스에서 페이스북으로 글 또는 페이지를 전달하는 것이기 때문에 ‘publish_actions’ 항목이 체크된 것을 확인한 다음, [Get Access Token] 버튼을 누릅니다. 그러면 다음과 같이 액세스 토큰 값을 확인할 수 있습니다. 위 그림의 […]

  • 워드프레스-페이스북 연동: 소셜 퍼블리싱 (1)

    소셜 퍼블리싱은 워드프레스에서 작성한 글이나 페이지를 페이스북의 타임라인이나 페이지로 전달하는 것을 의미합니다. 소셜 퍼블리싱 기능을 사용하기 위해서는 다음과 같이 추가 설정을 해 주어야 합니다. Step 1. 페이스북 앱 페이지 방문 페이스북에 로그인한 상태에서 다음과 같이 앱 페이지 https://developers.facebook.com/apps 페이지를 방문합니다. 위 그림의 가운데 부근에 있는 ‘Open Graph’에서 액션 추가를 위해 ‘시작하기’ 버튼을 누릅니다. 그러면 다음과 같이 오픈 그래프 페이지가 나타납니다. 위 그림에서 ‘People can’ 옆 텍스트 필드(Text Field)에 ‘publish’를 ‘a’ 옆 텍스트 필드에 ‘article’을 입력한 다음, [시작하기] 버튼을 누릅니다. 그러면 다음과 같이 Open Graph 대시보드 페이지가 나타납니다. 위 그림의 우측 상단 부근에 있는 ‘제출’ 링크를 누릅니다. 그러면 다음과 같은 에러 창이 나타납니다. 위 그림에서 ‘Publishing Actions’와 ‘Missing App Logo and Icon’의 2가지 에러를 확인할 수 있습니다. 먼저, ‘Missing App Logo and Icon’ 에러는 앱 페이지에서 로고와 […]

  • 워드프레스-페이스북 연동: 페이스북 앱 설정

    지난 글에서 페이스북 앱을 생성하는 방법을 살펴 보았고, 이번 글에서는 페이스북 앱을 설정하는 방법을 살펴 보도록 하겠습니다. Step 2. 페이스북 앱 설정 자신의 워드프레스와 페이스북을 연결하기 위한 앱 설정 페이지는 다음과 같습니다. 위 그림에서 자신의 워드프레스 사이트와 페이스북 연결을 위한 앱 설정은 ‘기본 정보’, ‘Website with Facebook Login’, ‘Mobile Web’ 세 군데입니다. ‘기본 설정’에서는 Display Name, Namespace, 연락 이메일, App Domains, 카테고리, Hosting URL, Sandbox Mode를 설정할 수 있습니다. Display Name은 앱 이름에 해당하고, Namespace는 사용자 정의 Open Graph actions과 objects 그리고 페이스북 상에 자신의 앱 URL을 정의하는데 사용합니다. 연락 이메일은 앱과 관련하여 연락을 할 수 있는 이메일을, App Domains는 도메인 및 서브 도메인에 auth를 가능하게 합니다. 카테고리는 앱의 기능을 설명하는 카테고리를, Hosting URL은 페이스북 파트너 중 한 곳으로부터 부여 받은 URL을, Sandbox Mode는 활성화를 체크하면 앱 개발자들만의 앱을 사용할 수 있습니다. ‘기본 선택’에서는 […]

  • 워드프레스-페이스북 연동: 페이스북 앱 생성

    페이스북 앱 생성 과정은 다음과 같습니다. Step 1. 페이스북 앱 생성 https://developers.facebook.com/apps 페이지로 이동합니다. 페이스북 로그인이 되어 있지 않다면 다음과 같은 로그인 창이 나타납니다. 위 그림에서 자신의 페이스북 계정으로 로그인 합니다. 로그인 후, Facebook 화면은 다음과 같습니다. 위 그림의 경우는 기존 페이스북 앱 페이지에 해당하며, 새 앱을 만들기 위해서는 그림 2의 우측 상단에 위치한 [새 앱 만들기] 버튼을 누릅니다. 그러면 다음과 같이 ‘새 앱 만들기’ 팝업 창이 나타납니다. 위 그림에서 새 앱을 만들기 위해 App Name, App Namespace, Web Hosting 정보가 필요함을 확인할 수 있습니다. App Name은 앱 이름에 해당하고, 3 chars 이상 32 chars 이하의 이름이 가능합니다. 만약 트레이드마크 된 이름이나 권리를 침해한 이름을 사용할 경우, 강제 삭제될 수 있으니 신중하게 이름을 정해야 합니다. App Namespace는 사용자 정의 Open Graph actions와 페이스북 상의 앱 URL을 정의하는데 사용합니다. 이는 […]

  • 윈도우 환경에 워드프레스 설치 – 워드프레스 설치

    워드프레스 설치 과정은 다음과 같습니다. 단계 1. 워드프레스 압축 해제 워드프레스 한국어 사이트(http://ko.wordpress.org/)를 방문해서 최선 버전인 워드프레스 3.4 한글 버전을 다운로드 받습니다. 다운 완료 후 ZIP 프로그램으로 압축 해제합니다. 압축 해제된 파일들을 워드프레스 설치 디렉토리인 D:\wamp\www\wp로 이동합니다. 이동 완료된 결과는 다음과 같습니다. 단계 2. 설치 시작 워드프레스 설치 스크립트를 실행하기 위해 웹브라우저 주소창에서 http://localhost/wp를 입력합니다. 워드프레스 설치 시작 페이지는 다음과 같습니다. 위 그림의 에러는 아직 wp-config.php 파일이 생성되지 않아 발생한 에러입니다. wp-config.php 파일을 생성하기 위해 [Create a Configuration File] 버튼을 클릭합니다. 그러면 다음과 같이 환경 설정 파일 생성 페이지를 볼 수 있습니다. 위 그림에서 환경 설정 파일 생성에 필요한 항목으로써 데이터베이스 이름, 데이터베이스 사용자 이름, 데이터베이스 비밀번호, 데이터베이스 호스트, 테이블 접두어(하나의 데이터베이스에서 하나 이상의 워드프레스를 운영하고자 할 경우)가 필요하다는 것을 확인할 수 있습니다. 설치 진행을 위해 [Let’s go!] […]

  • 윈도우 환경에 워드프레스 설치 – APM Setup 설치 방법

    윈도우 환경에서 워드프레스를 설치하기 위해서는 APM 이라는 프로그램을 설치해야 합니다. APM은 웹서버인 Apache, 서버사이드 스크립트 언어인 PHP, 데이터베이스 프로그램인 MySQL을 의미합니다. 윈도우 계열 서버에서는 IIS(Internet Information Server)라는 웹서버 프로그램이 내장되어 있지만, 이 포스트에서는 IIS 대신 아파치 서버를 활용하여 워드프레스 설치를 진행하도록 합니다. 일반 사용자가 APM을 일일이 설치하기란 쉬운 일이 아닙니다. 그래서 윈도우 환경에서 APM을 자동 설치해주는 유용한 프로그램들이 있으며, 대표적으로 XAMPP, WAMPServer, APM Setup이 있습니다. 이 세 가지 프로그램 모두 윈도우 환경에서 사용하기에 유용한 프로그램이지만, 이 포스트에서는 APM Setup 프로그램을 이용한 APM 설치를 설명 하도록 합니다. 설치 과정은 다음과 같습니다. Step 1. APMSetup 프로그램 다운로드 APM Setup 사이트를 방문하여 최신 APMSetup 프로그램을 다운로드 받습니다. 위 그림의 상단 메뉴 중 [다운로드] 메뉴를 누르면 다음과 같이 APM Setup 프로그램을 다운로드 받을 수 있는 페이지로 이동합니다. 위 그림의 좌측 하단에 위치한 [Mirror DOWNLOAD] […]

  • 윈도우 환경에 워드프레스 설치 – WampServer 환경 설정

    이 글에서는 WampServer 설치 이후 워드프레스 설치를 위한 환경 설정 방법을 살펴 보도록 하겠습니다. 먼저, Apache의 DocumentRoot 위치를 확인해 보겠습니다. 이 정보는 다음과 같이 httpd.conf 파일에서 확인할 수 있습니다. http.conf 파일을 연 다음, ‘DocumentRoot’를 찾습니다. WampServer 설치 과정을 그대로 따라 하였다면, 다음과 같은 결과를 얻을 수 있을 것입니다. 위 그림에서 DocumentRoot가 ‘D:\wamp\’로 설정된 것을 확인할 수 있습니다. DocumentRoot는 Client로부터의 서비스 요청에 응답하는 HTML 파일들을 저장해 놓는 디렉토리를 지정해주는 지시자로서, DocumentRoot의 default 디렉토리는 ‘D:\wamp\www\’ 입니다. 워드프레스를 설치할 때 워드프레스가 위치할 디렉토리는 DocumentRoot 아래가 되겠습니다. 다음으로, Apache의 mod_rewrite 모듈을 enable 하겠습니다. mod_rewrite는 Apache 모듈의 한 종류이며, 서버 request를 정해진 rule에 의해 다른 URL 또는 file로 보내는 역할을 담당합니다. WampServer를 설치하면 mod_rewrite 모듈은 기본으로 disable 되어 있습니다. 이를 enable하는 쉬운 방법은 다음과 같이 WampServer를 이용하는 것입니다. 위 그림에서 mod_rewrite 모듈에 해당하는 rewrite_module이 […]

  • 워드프레스-페이스북 연동: Facebook 플러그인 설치 및 설정

    Facebook은 워드프레스와 페이스북을 쉽게 연동할 수 있도록 페이스북에서 직접 개발해서 배포하고 있는 플러그인입니다. 기존에는 워드프레스와 페이스북을 연동하기 위해서 여러 개의 플러그인을 조합해서 사용해야 했는데, 이 플러그인의 등장으로 복수 개 플러그인을 조합하지 않고도 원하는 대부분의 기능을 구현할 수 있게 되었습니다. 워드프레스와 페이스북을 연동할 필요가 있는 사람들에게 유용한 플러그인이라고 할 수 있습니다. 플러그인 설치 및 활성화 “워드프레스 사이트 관리자 > 플러그인 > 플러그인 추가하기”에서 facebook 키워드로 검색을 합니다. 검색 결과는 다음과 같습니다. 위 그림의 검색 결과 중 가장 상단에 위치한 ‘Facebook’이 설치하려고 하는 플러그인이며, 설치를 위해 ‘지금 설치하기’ 링크를 누릅니다. 그러면 다음과 같은 팝업 창이 나타납니다. 위 그림에서 [확인] 버튼은 플러그인을 설치할 때, [취소] 버튼은 플러그인 설치를 취소할 때 누릅니다. 플러그인 설치를 위해 [확인] 버튼을 누릅니다. 그러면 정상적인 경우 다음과 같이 플러그인 설치 완료 화면을 볼 수 있습니다. 위 그림에서 ‘플러그인 […]

  • 워드프레스-페이스북 연동: Facebook 도입

    위키피디아에는 페이스북을 다음과 같이 정의하고 있습니다. 페이스북은 2012년 8월 기준, 전 세계 9억 명 이상의 유저가 활동 중인 세계 최대의 소셜 네트워크 서비스입니다. 이 서비스는 사람들이 친구들과 대화하고 정보를 교환할 수 있도록 도와줍니다. 2004년 마크 저커버거에 의해 서비스가 시작 되었고, 2012년 6월 IPO를 신청 하였습니다. – 위키피디아 인용 세계 최대의 소셜 네트워크 서비스인 페이스북과 자신의 워드프레스를 연동하는 방법에는 여러 가지가 있을 수 있습니다. 보통, 페이스북 관련해서 플러그인이 제공되는데, 종류가 워낙 많아 어떤 플러그인이 어떤 기능을 제공하는지 파악하는 것이 더 어렵습니다. 그래서인지 최근 페이스북에서 공식적으로 워드프레스 전용 플러그인을 개발해서 배포하기 시작하였고, 그 이후 기존 쓸만한 페이스북 관련 플러그인이 하나씩 사리지고 있고 대신 페이스북 공식 플러그인을 사용하는 분위기입니다. 그 플러그인 이름은 Facebook이며, 이 플러그인 하나로 워드프레스와 페이스북 연결을 위해 여러 개 플러그인을 조합해서 사용하던 기존 방식을 벗어나게 되었습니다. 자신의 워드프레스와 페이스북을 연동하는 방법을 Facebook 플러그인 […]

  • 워드프레스 에디터인 tinymce 고급 활용 방법

    워드프레스의 기본 에디터는 tinymce입니다. 기본에 포함된 tinymce만으로는 국내의 스마트한 위지윅 에디터에 익숙한 국내 사용자에게 어필할 수 없습니다. 그래서 최대한 국내 사용자 눈높이에 맞도록 설정을 해 줘야 합니다. 몇 가지 설정 방법을 알아 보겠습니다. 1) 워드프레스 에디터에 기능 아이콘 추가 방법 워드프레스 2.9 버전의 기본 tinymce 모습은 다음과 같습니다. 위 그림을 보면 가장 기본에 해당하는 폰트 설정, 폰트 사이즈 등이 보이지 않습니다. 따라서 폰트 설정, 폰트 사이즈 등 기능 아이콘을 손쉽게 추가할 수 있는 TinyMCE Advanced 플러그인을 활용해서 자신의 용도에 맞는 기능 아이콘을 추가하도록 합니다. 2) 워드프레스 에디터에 한글 폰트 추가 방법 tinymce에 기본으로 포함된 Font family에는 Arial, Courier, Georgia, Tahoma, Terminal 등이 있습니다. 하지만 안타깝게도 한글 폰트는 기본으로 포함되어 있지 않습니다. 한글 폰트는 이 글에서 소개한 방법을 따라 설정했더니, 다음과 같이 ‘굴림체’, ‘돋움체’, ‘궁서체’, ‘바탕체’를 추가할 수 있었습니다. […]

112345/5다음
위로이동