1. 워드프레스 설치

기존 워드프레스와 같은 방식으로 설치.
워드프레스 설치는 매우 간단한 내용이므로 설명 생략한다.

2. 워드프레스 뮤 세팅

wp-config.php 파일을 열고, 소스 삽입.

define('WP_ALLOW_MULTISITE', true);

3. 관리자 패널에서 “Network Setup”

소스 삽입 후 관리자 패널로 가면, 왼쪽 메뉴 중 “Tools”에 “Network Setup”이라는 메뉴가 생성된다. 이 메뉴에서 몇 가지 설정을 해줘야 한다.

첫 번째로 할 일은 하위 사이트(하위 블로그)들을 “Sub-domain” 방식으로 생성할 것인지, “Sub-directoy” 방식으로 생성할 것인지를 선택해야 한다. 사이트 생성 방식은 일단 선택하면 변경이 불가능하니 사이트 성격에 맞게 신중하게 고려하도록 한다.

어떤 방식을 사용하든 두 가지 모두 사용가능 하지만, 몇 가지 다른 점들이 있다.

1) Sub-domain 방식
사이트 별로 주소 앞에 구분을 해주는 방식이다. 예를 들어 최상위 사이트가 webactually.com 일 때, site1.webactually.com과 site2.webactually.com 처럼 구분을 두어 사이트를 구분할 수 있다.

대개는 이 방법을 선호하는 경우가 많지만 주의해야 할 사항이 있다. 보통 도메인 제공 업체에서 최대 3~5개 까지의 서브 도메인 설정만 무료로 제공한다. 하지만 도메인이 3~5개가 넘는 경우는 서브 도메인 당 비용(많이 비싸지는 않다. 약 5,000원~10,000원 정도)이 추가된다.

사이트를 Sub-domain 방식으로 세팅할 때에는 이러한 비용을 감안해 다중 블로그가 몇 개나 추가가 될 것인지 파악한 후 선택하는 것이 좋다.

2) Sub-directory 방식
사이트 주소 뒤에 디렉토리처럼 구분하는 방식이다. 예를 들어 최상위 사이트가 webactually.com 이라면, webactually.com/site1, webactually.com/site2 이런 식으로 사이트 주소 뒤에 ‘/’와 함께 붙여서 사이트를 구분한다. 이 방식은 Sub-domain과 달리, 비용과 상관없이 무한대로 자유롭게 생성할 수 있다.

4. 설정사항 저장

사이트 생성방식을 Sub-domain이나 Sub-directory 중에서 선택하면 다음 단계로 넘어가 몇 가지 설정을 더 해야한다.

1) blogs.dir 폴더 생성
wp-content 폴더 바로 아래 blogs.dir 폴더를 생성한 후, 퍼미션을 777로 바꿔준다. 이 폴더에는 나중에 블로그 별 미디어 콘텐츠가 올라간다.

2) wp-config.php 파일에 소스 삽입
워드프레스 관리자 패널에서 제공하는 소스를 wp-config.php 파일에 삽입한다.

define( 'MULTISITE', true );
define( 'SUBDOMAIN_INSTALL', false );
$base = '/';
define( 'DOMAIN_CURRENT_SITE', 'templateactually.com' );
define( 'PATH_CURRENT_SITE', '/' );
define( 'SITE_ID_CURRENT_SITE', 1 );
define( 'BLOG_ID_CURRENT_SITE', 1 );

3) .htaccess 파일 생성 or 수정.
.htaccess 파일은 워드프레스를 설치할 때 자동으로 생성되기도 하지만, 그렇지 않은 경우도 있어서 반드시 확인 후 생성하거나 수정해야 한다. 만약 .htaccess 파일을 제대로 수정하지 않으면 403에러가 발생할 수 있다.

RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]

# uploaded files
RewriteRule ^([_0-9a-zA-Z-]+/)?files/(.+) wp-includes/ms-files.php?file=$2 [L]

# add a trailing slash to /wp-admin
RewriteRule ^([_0-9a-zA-Z-]+/)?wp-admin$ $1wp-admin/ [R=301,L]

RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]
RewriteRule  ^[_0-9a-zA-Z-]+/(wp-(content|admin|includes).*) $1 [L]
RewriteRule  ^[_0-9a-zA-Z-]+/(.*\.php)$ $1 [L]
RewriteRule . index.php [L]

5. “Network Admin” 관리자 패널

모든 설정사항을 저장한 후 워드프레스 어드민에 다시 로그인하면  ”Network Admin” 이라는 메뉴가 생성된다.

6. 서브 사이트 생성하기

“Network Admin” 어드민 화면의 왼쪽 메뉴에서 ”Sites > Add New” 메뉴를 이용해 새로운 서브 사이트를 생성한다.

1) Site Address
서브 사이트의 유니크한 이름을 입력한다. 사이트 이름은 나중에 수정할 수 있다.

2) Site Title
서브 사이트를 대표하는 타이틀을 입력한다.

3) Admin Email
서브 사이트를 관리할 관리자의 이메일 주소를 입력한다.
꼭 최고 관리자의 이메일 주소가 아니어도 된다. 최상위 사이트에 존재하는 아무 회원의 이메일로도 가능하다. 이 곳에 등록된 회원은 이 서브 사이트의 관리자 권한을 자동으로 갖는다.

7. 서브 사이트 관리

“Network Admin” 어드민 화면의 왼쪽 메뉴 중 ”Sites > All Sites” 메뉴를 이용하면, 현재 생성된 서브 사이트들의 기본 정보 및 서브 사이트에 가입되어 있는 사용자 등을 확인할 수 있다.

Tip: 기본적으로 서브사이트에 사용자로 등록이 되려면 최상위 사이트에 사용자로 이미 등록되어 있어야 한다. 그래야 각 서브 사이트별로 사용자를 추가할 수 있다.

8. 설정 완료된 서브 사이트

《워드프레스 제대로 파기(원제 DIGGING INTO WORDPRESS)》를 국내 독자에게 소개하기까지 정말 우여곡절이 많았다. 해외에서조차 원서가 정식으로 발간되기 전이었고 PDF 버전으로만 나온 터라 국내에서 정식 도서로 출판하는 것은 저자나 우리에게나 적지 않은 부담이었다. 하지만 전세계적으로 인정받는 좋은 정보를 국내 독자에게 소개하고 싶은 마음이 앞서 과감히 작업을 진행했고, 1년 여 준비한 책이 드디어 빛을 보게되었다.

《워드프레스 제대로 파기》는 국내에 워드프레스와 관련된 볼 만한 매뉴얼이나 활용서 하나 없어서 그 동안 웹액츄얼리에 수없이 문의 메일을 보내고 워드프레스에 궁금증을 가졌던 사람들을 위한 책이다. ‘워드프레스’라는 말에 이끌려 이 책을 들고 있는 독자라면 이미 워드프레스의 장점과 무한한 가능성에 매료되어 있을 것이다. 그리고 이 책이 좀 더 제대로 지식을 쌓고 활용하고 싶은 목마름을 달래줄 단비가 되어 줄 것이라고 생각한다.

전세계적으로 워드프레스를 활용한 블로그나 웹사이트가 해마다 가파른 속도로 늘고 있다. 한 설문조사에 따르면 현재 웹사이트의 약 20%가 워드프레스를 CMS로 사용하고 있다고 한다. 워드프레스의 짧은 역사를 감안하면 가히 폭발적인 추세다.

워드프레스를 이용한 대형 유명 글로벌 사이트도 무수히 많다. 뉴욕타임즈, CNN 방송, 텔레그래프 통신사, <PEOPLE>지, 플레이스테이션 게임사이트 등을 방문하면 그 차별성을 직접 확인해볼 수 있다.

최근 몇 년 사이 국내에서도 많은 기업이나 개인이 워드프레스를 기반으로 한 웹사이트 제작에 관심을 가지고 활용하는 사례가 늘고 있다는 반가운 소식이 전해지고 있다. 워드프레스의 장점인 웹사이트 제작의 확장성과 뛰어난 콘텐츠 유지 관리 능력에 주목하기 시작해 삼성과 LG, CJ를 포함한 대기업들도 워드프레스를 이용한 웹사이트로 속속 대체하고 있다.

왜 워드프레스인가? 그 이유야 셀 수 없이 많지만 몇가지로 요약하자면, 워드프레스는 웹사이트의 콘텐츠를 쉽게 만들고 관리할 수 있다. 워드프레스를 대체할 훌륭한 툴은 찾아보면 얼마든지 있다고 반문하는 사람도 있을 것이다. 그에 대한 대답은 간단하다. 워드프레스에는 끝없는 가능성과 잠재력이 있다! 무엇을, 어떤식으로 상상하든 워드프레스는 그것을 스마트하고 올바르게 작업할 수 있도록 안내할 것이다.

《워드프레스 제대로 파기》는 워드프레스의 메뉴나 기능, 또는 코드 설명을 장황하게 늘어놓은 기술 요약서가 아니다. 물고기를 잡아주는 것이 아니라 물고기잡는 법을 알려주는 것! 이것이 이 책의 궁극적인 목표다.

세계를 통틀어 이 책의 저자인 제프 스타(Jeff Starr)와 크리스 코이어(Chris Coyier) 만큼 워드프레스를 뼛속 깊이 이해하고 제대로 활용할 수 있는 팁과 노하우를 알려주는 개발자는 흔치 않다. 그것도 유쾌하고 명쾌한 방법으로 말이다.

저자들은 그 동안 수많은 워드프레스를 구축하면서 쌓아온 노하우를 이용해 워드프레스 기반 사이트를 운영하면서 마주칠 수 있는 코드를 다루는 변주 기법을 알려준다. 사용자를 매료시킬 수 있는 아름다운 웹사이트를 연주하는 것은 이제 이 변주 기법을 익히는 독자의 손끝에 달려 있다. 이 책에 나온 풍부한 예제와 저자들의 말을 기억하면서 끊임없이 연습해 보자. 책을 읽는 독자에게는 워드프레스 제작 스킬을 제공하고 사용자에게는 더 나은 사용성을 경험하게 해줄 것이다.

마지막으로 두 저자가 운영하는 블로그(digwp.com)를 방문하면 지금도 끊임없이 업데이트되고 진화되고 있는 워드프레스에 관한 최신 정보를 얻을 수 있다. 워드프레스 관련 핵심 정보를 소개한 웹액츄얼리(www.webactually.com)의 알찬 정보 또한 놓치지 않기를 바란다.

웹액츄얼리팀

주요 변경 사항

1. 웰컴 화면
워드프레스 3.3버전을 설치하면 새롭게 업데이트된 웰컴 화면을 만날 수 있다. 웰컴 화면은 세 개의 탭인 What’s New, Credits, Freedoms 로 구분되어 있다.

2. Feature pointers
이제부터 워드프레스에 최신 기능이 추가되면 Feature pointers가 알려준다.

3. 개선된 도움말 기능
도움이 필요한 상황이 되면 3번째 칼럼에 있는 영역에 도움말 제목이 노출된다. 이를 클릭하면 자세한 정보를 볼 수 있다. 꼭 클릭해 보자. 생각보다 매우 유용할 것이다. 또한, 3.3버전에서는 새로운 API 로 도움말 화면을 개선시켜 사용자 상황에 맞는 적절한 도움말을 보여준다.

4. 드래그 앤 드롭 미디어 업로더 (구 버전 IE제외)
여러 개의 파일을 쉽게, 한꺼번에 업로드 할 수 있다. 어드민 화면> 미디어> 파일 올리기 메뉴를 클릭하면 미디어 내비게이션을 볼 수 있다. 업로드할 파일들을 선택하고 ‘Drop files here’ 영역에 마우스로 드래그만 하면 쉽게 업로드 할 수 있다. 물론 이전처럼 ‘파일 선택’ 버튼을 클릭해 여러 파일을 업로드하는 것도 가능하다.

5. 플라이아웃(Flyout) 대시보드 메뉴
클릭 한 번에 원하는 화면으로 갈 수 있는 플라이아웃 메뉴를 제공한다. 이전 버전에서는 원하는 화면에 도달하려면 두 번의 클릭이 필요했다. 3.3버전에서는 플라이아웃으로 인해 클릭 한 번이면 해결된다.

6. 새로운 툴바 등장
어드민 바와 어드민 헤더 기능을 결합시킨 새로운 툴바가 등장했다. 이 툴바는 워드프레스 어드민의 프런트 엔드와 백 엔드 화면에서 항상 볼 수 있다. 좀더 진하고 날렵한 디자인의 새로운 툴바는 워드프레스 렉시콘을 좌측에 보여준다.


(상단 이미지: 3.3버전의 새로운 툴바 / 하단 이미지: 3.2버전의 툴바)

7. 아이패드를 비롯한 태블릿을 지원하는 반응형 웹디자인 화면
워드프레스 대시보드는 완벽한 반응형 디자인을 지원하진 않지만, 아이패드와 다양한 태블릿 사이즈 화면에 최척화되어 있다.

8. 개선된 동시 수정 기능
포스트 한 개에 여러 사용자가 동시에 수정하고 있을 때, 경고 메시지가 뜨며 수정이 멈출 때까지 포스트 내용을 수정할 수 없는 잠금 기능이 제공된다.

9. 향상된 고유주소
포스트 이름으로 된 고유주소를 쉽고 간단하게 선택하거나 직접 작성할 수 있다. 날짜, 이름, 숫자를 사용한 간단한 고유주소를 추천해줄 뿐만 아니라 사용자가 직접 입력할 수도 있게 해준다. 이젠 성능에 대한 패널티없이 고유주소를 사용할 수 있게 되었다.

10. 빠른 편집 메뉴에 포스트 형식 추가
이전 버전에서는 포스트 형식을 빠른 편집 메뉴에서 수정할 수 없었다. 새로운 버전에서는 포스트 형식을 수정할 수 있게 되어 포스트 수정이 전보다 빨라졌다

11. 그 외 추가된 기능들

• Tumblr (텀블러) 가져오기
• 에디터API 성능 향상 (wp_editor)
• jQuery 1.7.1 과 jQuery UI 1.8.16
• 더 똑똑해진 위젯 : 테마를 전환할 때 위젯 손실 방지
• is_main_query() 함수와 WP_Query 메서드 기능 추가
• 포스트 슬러그에서 몇 가지 이상한 문자 제거
• 향상된 메타 데이터 API
• 그 외 성능 향상 및 수 백 개의 버그 수정
• 워드프레스 3.3 을 위한 주목할만한 플러그인 공개

더 자세한 정보는 워드프레스 Codex 참고
http://codex.wordpress.org/Version_3.3

미국 지디넷은 지난 10일 IT미디어 기가옴의 ‘로드맵2011서밋’에 참석한 매트 물렌웨그 워드프레스닷컴 창립자 발언을 인용해 이같이 보도했다.

당시 스스로를 ‘오픈소스 히피’라고 묘사한 물렌웨그 창립자는 “(기업들이) 윤리적, 철학적으로 소프트웨어만이 아닌 모든 것이 오픈소스화해야 한다”고 주장했다.

매트 물렌웨그 워드프레스 창립자

이어 “오픈소스 진영에서 상업적 측면도 챙길 수 있는 직원 수천명짜리 대기업 사례를 찾기가 쉽지 않다”면서도 “지난 8년반, 오픈소스 진영에서 옳은 일을 해온 지난 8년반 동안 워드프레스 사업을 일으켜 왔다”고 말했다.

워드프레스닷컴은 오픈소스 기반의 인기 콘텐츠 관리 시스템(CMS) ‘워드프레스’를 개발, 제공하고 이를 기반한 블로그서비스도 제공하는 기업이다. 6천500만개 이상의 웹사이트가 워드프레스 기반이며, 그 절반이 이 회사의 호스팅서비스로 돌아간다.

물렌웨그는 “내 목표중 하나는 ‘콘텐츠 발행을 민주화’함으로써 여기에 워드프레스 커뮤니티가 근본적으로 바른 일을 했음을 보이는 것”이라며 언젠가 현실화되길 바란다고 덧붙였다.

미국 지디넷 블로거 레이첼 킹은 워드프레스가 이미 엔터프라이즈 세계에도 단지 콘텐츠 발행 부문에 작용한 것 이외에 더 흥미로운 영향들을 더 많이 끼쳤다고 평햇다.

물렌웨그는 “내게 가장 흥미로운 트렌드는 엔터프라이즈 소프트웨어가 언제나 형편없긴 했으나 이제 사람들이 그것에 대해 더 많이 불평중이라는 점”이라고 말했다.

예를 들어 직원들이 어떤 작업을 할 때 워드프레스같은 오픈소스 툴로 하면 10초만에 끝낼 수 있는데, 오랫동안 방치돼온 기업용CMS에서는 10분씩 걸리는 비효율을 왜 감수해야 하냐고 물어온다는 것이다.

이런 불만은 웹사이트를 갖고 싶긴 하지만 주말과 저녁을 웹사이트 작업에 골머리를 앓으며 보내고 싶지 않은, 소규모 사업 운영자들이나 친구들로부터 많이 들을 수 있을 것입니다.

웹사이트를 운영하는 방법부터 찾아본 사람들은 이런 불만을 얘기합니다. 심지어 어디서부터 시작해야 할지 몰라 아직도 고민하는 사람들도 많습니다. 하지만 희망은 있습니다.

워드프레스로 구출받자

워드프레스는 가장 인기있는 블로그 툴 중 하나입니다. 하지만 여기서 많은 사람들이 모르는 점이 있습니다. 워드프레스는 단순한 블로그를 넘어서서 강력한 콘텐츠 운영 시스템(CMS)으로 사용할 수 있다는 것입니다. 워드프레스를 사용하면 블로그와 웹사이트를 모두 제작할 수 있습니다.

이 글은 왜 워드프레스가 소규모 웹사이트에게 좋은 선택인지 살펴보고, 소규모 비즈니스를 위한 워드프레스 설치 및 설정 방법 그리고 사용 방법에 대해 알아볼 것입니다.

웹 콘텐츠 운영 시스템(Web Content Management Systems)

콘텐츠 운영 시스템은 웹 페이지 생성과 업데이트 관리를 도와주는 툴입니다.

저는 1998년 Interwoven이라고 불리는 실리콘 밸리의 초창기 멤버였습니다. Interwoven은 Ford Motor, FedEx, Cisco와 같은 대기업과 더불어 수천 개의 대·소형 기업에 웹 콘텐츠 운영 솔루션을 제공하는 회사였습니다.

저는 그곳에서 Fortune 100부터 그보다 작은 기업들에 이르기까지, 수백개의 회사와 협업하며 웹 사이트 아키텍쳐를 개발했습니다. 그동안 웹 콘텐츠 운영에 대해 많은 것을 배울 수 있었습니다.

그 당시 웹은 폭발적으로 성장하고 있었고, 콘텐츠 양과 종류가 늘어나면서 이를 운영하기 위한 어마어마한 요구가 있었습니다. 그때 우리가 판매한 소프트웨어만 해도 수천만 달러어치에 달합니다.

워드프레스를 웹사이트로 사용하기

오늘날 워드프레스는 놀라울만큼 강력한 무료 콘텐츠 운영 시스템으로 활용되고 있습니다. 워드프레스는 간편한 웹사이트 운영 방법을 찾고 있는 중소 비즈니스에게 맞는 강점을 많이 지니고 있습니다.

워드프레스의 디자인은 블로그를 위한 플랫폼으로 제작됐지만, 꼭 블로그 툴로 사용하지 않아도 됩니다. ‘블로그’를 사용하던 안하던 약간 손을 보면 워드프레스를 통해 자신의 웹사이트를 운영하도록 사용할 수 있습니다. 워드프레스가 블로그 플랫폼으로 디자인되었단 사실은 몇가지 강력한 장점을 동시에 제공해줍니다.

워드프레스는 콘텐츠 생성과 수정을 손쉽게 최적화할 수 있습니다. 구글과 같은 검색 엔진 순위에 오르려면 신선하고 독창적인 콘텐츠가 필요합니다. 웹사이트를 새로운 기사 또는 뉴스레터로 업데이트할 때는 당신을 방해할 수 없는 시스템이 필요합니다. 그렇다면 워드프레스는 왜 좋은 선택일까요?

소규모 비즈니스 웹사이트에 워드프레스를 사용하는 5가지 이유

1. 검색 엔진 최적화(SEO)
   워드프레스는 검색 엔진 최적화(SEO)를 훌륭하게 바로 제공해줍니다. 몇 가지 설정 작업이 필요하지만, 워드프레스가 제공하는 많은 검색 엔진 최적화(SEO)가 가져다주는 장점을 무료로 얻을 수 있습니다. 실제로 구글의 맷 커트(Matt Cutts)는 다음 비디오를 통해 ‘워드프레스는 검색 엔진 최적화(SEO)가 잘 되도록 만들어졌다.’고 얘기합니다.
2. 콘텐츠
   HTML을 몰라도 웹사이트에 콘텐츠를 쉽게 업데이트할 수 있습니다. 드림위버와 같은 복잡한 HTML편집툴을 어떻게 사용하는지 배우기가 어렵다구요? 웹 사이트에 약간의 수정을 할 때마다 매번 웹마스터에게 ‘요청하기’가 싫다고요? 이제 더 이상 그럴 필요가 없습니다. 워드프레스만 설치되어 있으면 간편한 리치 텍스트 편집툴을 사용하여, 누구나 쉽게 새로운 페이지를 만들고 수정할 수 있습니다.
3. 확장자
   워드프레스는 테마와 플러그인을 만드는 개발자로 번성하고 있는 생태계나 다름없습니다. 웹개발자를 고용하지 않아도 무료 디자인 테마나 웹사이트에 투표하기, 연락처를 남기기, 별점 매기기와 같은 수백가지 환상적인 기능들을 자신의 웹사이트에 추가해서 확장할 수 있습니다.
4. 지원
   사이트에 문제가 있거나 사용자 맞춤 기능을 추가하고 싶다면, 도움을 줄 수 있는 개발자나 지원을 찾을 수 있습니다. 말 그대로 수천 명의 워드프레스 개발자들을 사방에서 찾을 수 있으며, 구글 검색을 통해 수많은 사람들이 공유한 글에서도 도움을 받을 수 있습니다.
5. 설치
   Bluehost, 1and1 그리고 GoDaddy를 포함한 많은 호스팅 업체로부터 빠른 설치를 제공받을 수 있습니다.

워드프레스에서 처음으로 실시한 웹사이트 사용자 및 개발자 설문에 따르면, 전세계에서 상위 100만개에 해당하는 사이트 중 14.7%가 워드프레스 블로그 툴을 사용하고 있다고 한다. 워드프레스와 일부 내부 통계 자료에 따르면 외견상 8.5% 성장한 것이다.

워드프레스를 사용하는 국가와 지역이 얼마나 밀집되어 있는지는 아래의 설문 응답자 지도에 밀집된 표식을 통해 알 수 있다.

미국에서만 100개의 신규 도메인 당 22개의 도메인이 워드프레스를 사용 중이다.

그렇다면 워드프레스가 왜 이렇게 전세계적으로 인기있는 툴이 되었을까? 이에 대한 답을 찾는 것은 어렵지 않다. 적어도 간단한 두 가지 이유를 들 수 있는데, 그것은 사용하기 쉽고 저렴하다는 것이다. 심지어 도메인 네임을 구매하지 않는 경우라면 공짜로 사용할 수도 있다.

워드프레스 설립자인 매트 물렌웨그(Matt Mullenweg)는 자사 공식 블로그에 다음과 같이 밝혔다.

“우리는 이미 설문 응답자로부터 알아낸 몇가지 흥미로운 사실이 있다. 6,800명의 자영업자 응답자들이 17만개가 넘는 사이트를 개인적으로 운영하고 있으며, 시간당 평균비용은 50달러 정도다. 어려운 경제 시기에 오픈소스를 사용해 창업한다는 것은 다행스러운 일이다.(각 사이트를 만드는데 단 3시간이 걸렸다면, 시간당 평균비용으로 계산시 2,950만 달러 어치(약 330억원)의 작업에 달한다.)”

매트는 농담조로 아마도 85.3%에 달하는 웹사이트가 여전히 도움을 필요로 하고 있다고 덧붙였다. 설문조사는 1만8000명 이상의 응답자들을 대상으로 이루어졌다.

그래서, 어느 경우에 어떤 소셜 플러그인을 사용해야하는지 자세히 살펴보았습니다. 적용하는 방법도 함께 공유합니다. (아래의 내용은 Facebook 개발자 문서를 참고하여 설명합니다. )

1. Activity Feed(액티비티 피드)

페이스북 개발자 문서 링크 : http://developers.facebook.com/docs/reference/plugins/activity/

액티비티 피드 플러그인은 당신의 사이트에 일어나고 있는 가장 흥미로운 최근의 활동을 표시합니다.

방문객이 당신의 사이트에서 어떤 콘텐츠에 Like(좋아요) 하거나, Share(공유)를 했고, Facebook Comment Box 에 댓글을 달았는지 등의 활동을 표시해 줍니다.

액티비티 피드 플러그인은 방문객이 여러분의 사이트에 로그인 했는지 여부에 따라 맞춤 콘텐츠를 표시할 수도 있습니다.

사용자가 페이스북에 로그인 한 경우, 플러그인은 친구의 콘텐츠를 강조하기 위해 개인화 됩니다.

사용자가 로그아웃 일 경우, 사이트 전체의 추천(Recommendations)을 보여주고 페이스북에 로그인 할 수 있는 옵션을 제공합니다.

플러그인은 사용자의 친구들의 활동으로 가득 합니다. 플러그인을 채우기 위한 충분한 친구활동이 없다면, 추천 내역으로 채워져 나옵니다.

만약, recommendations 파라미터를 true 로 설정하면 플러그인의 상단 반절은 친구 활동을 보여주고, 하단은 추천이 나오게 됩니다.

플러그인의 절반을 채우기 위한 충분한 친구 활동이 없다면, 더 많은 추천을 포함합니다.

이러한 활동들을 보여주기 위해서는 도메인을 지정해야하는데 도메인이 정확하게 고정되어야 하며 “facebook.com” 의 같은 경우, “developers.facebook.com” 과 “www.facbook.com” 을 포함하지 않습니다.

이 플러그인은 간단한 iFrame 을 사용할 수도 있고, 새로운 Javascript SDK인, <fb:activity> XFBML 태그(또는 HTML5  마크업을 선호 한다면 <div class=”fb-activity”>)를 사용할 수 있습니다.

Activity는 페이스북 계정이나 페이지가 아닌, 내(당신) 사이트!에 대한 플러그인입니다.

소스 적용 예

SCRIPT

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

HTML

<div class="fb-activity" data-site="webactually.co.kr" data-width="300" data-height="300" data-header="true" data-recommendations="false"></div>

data-site 파라미터의 값만 내가 원하는 사이트 로 바꿔주면 됩니다.

2. Like box

http://developers.facebook.com/docs/reference/plugins/like-box/

Like Box(좋아요 상자)는 페이스북 페이지의 주인이 웹사이트에서 ‘Like(좋아요)’를 얻을 수 있는 소셜 플러그인 입니다.

Like Box는 사용자에게 : 얼마나 많은 친구들이 이미 당신의 페이지를 좋아하고 있는지, 또 그들이 누구인지 알 수있습니다.

참고할 만한 파라미터로는

소스 적용 예

SCRIPT

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

HTML

<div class="fb-like-box" data-href="http://www.facebook.com/webactually" data-width="292" data-show-faces="true" data-stream="true" data-header="true"></div>

결론!!

사이트에 대한 상태를 공유하고 싶다면 Activity Feed(액티비티 피드)를 사용하고, Facebook Page(페이스북 페이지)에 대한 정보를 공유하고 싶다면 Like box(좋아요 박스)를 사용하면 됩니다.

워드프레스 기반 브랜드페이지 제작

기간 : 2011. 08 ~ 2011. 09
클라이언트 :박만석

• 워드프레스 구축 컨설팅 & 개발
• 전문 부동산 워드프레스 테마
• 물건 입력 관리자 화면 커스터마이징
• 구글 맵 Api 연동
• 페이스북, 트위터, 유투브 등 소셜 미디어 연동
• 소셜댓글 라이브리 연동

Day 1. 산을 넘으니 바다로다

하늘은 높고 단풍과 함께 우리들의 감성도 알록달록 물드는 가을입니다. 그렇습니다. 웹액츄얼리 정기 워크샵을 떠날 때가 왔습니다. 이번 워크샵 장소는 강원도 양양에 위치한 쏠 비치 리조트입니다.

목요일 낮이라 도로가 막힐 일이 없을 거라 예상했지만 생각보다 차가 많았습니다. 차, 도로, 빌딩만 가득 차 있던 시내를 지나자 나무와 산이 조금씩 보입니다. 그것만으로 차 안에선 감탄의 찬사가 터졌습니다.

그때 가평 휴게소가 보이는군요. 고속도로 탈 때는 휴게소 음식이 제일이죠. 여기선 간식거리만 삽니다. 아직 11시밖에 안됐거든요.

배고파질 때쯤 설악 휴게소에 도착합니다. 휴게소 점심 메뉴는 떡라면, 돈까스, 비빔밥. 음식을 시키고 보니 1시. 근무할 때 점심시간과 동일한걸 보니 우리의 생체시계가 얼마나 정확하고 과학적인지 알 것 같습니다.

한계령의 단풍

금강산도 식후경이라고 이젠 단풍을 즐길 때 입니다. 워크샵 장소로 가는 길은 미시령 또는 한계령으로 빠지는 2가지 선택지가 있었습니다. 운전사에게는 좀 부담스럽지만 좀더 예쁜 단풍을 즐기고자 한계령으로 가기로 했습니다.

한계령의 단풍은 말로 표현할 수 없을 정도로 멋졌습니다. 다들 차창에 붙어 벌린 입을 다물지 못했죠. 이 멋진 풍경을 그냥 넘어갈 웹액츄얼리가 아니죠. 갓길에 차를 대놓고 제대로 된 단풍을 즐기기로 합니다.

왔노라. 보았노라…!!

체크인 후 배정받은 숙소는 노블리안 303호. 깔끔한 원목 현관문을 열고 들어서니 고급 별장 같은 실내가 펼쳐집니다.

잠깐의 업무 체크시간

각자 짐을 풀기 무섭게 잠시 업무를 확인합니다. 평일에 잡힌 워크샵이라 오전에 온 메일을 확인 하고 급한 클라이언트의 요청 사항은 대응을 해야합니다. 노트북 2대로 콘텐츠, 디자인, 개발, 코딩에 이르기까지 다양한 업무를 일사천리로 마무리합니다.

해변에서의 공중부양

워크샵의 핵심. 세미나 시간

노블리안 라운지에도 해변이 보이는 야외 테라스가 있습니다. 이곳에서 잠시 수다 타임을 갖은 우리는 의미있는 토론을 위해 숙소로 갑니다. 세미나 주제는 각 팀별로 자체적으로 정해 다같이 토론하는 식으로 진행했습니다.

그리고 이 글을 쓰고있는 콘텐츠팀의 라보배는 ‘영문을 한글로 표기하는 법’을 공유해 웹액츄얼리팀에서 만큼은 틀리지 말아야 할 맞춤법을 공유했습니다. 마지막으로 경영지원팀의 김미진님은 ‘연말정산 소득공제’를 유리하게 활용하는 법을 알려주었습니다.

워크샵의 하이라이트. 웰빙 저녁식사 시간

세미나가 끝나자마자 이사가 준비한 호주산 A(+ 무한대) 소고기 등심 먹을 준비를 합니다. 메인 요리는 소고기이지만 그에 못지 않게 ‘웹액츄얼리 스타일’로 웰빙 에피타이저를 준비했습니다. 제이미 올리버로부터 전수받은 것이라 주장하는 팀장의 ‘오렌지 버섯 샐러드’, 초보 주부 이승연님의 돈 주고 못 사먹는 ‘엄마표 된장국’과 ‘부추무침’ 등 다양하게 차려진 저녁 식사를 준비했습니다. 물론 술이 빠질 순 없겠죠. 고기와 잘 어울리는 저렴한 칠레 레드와인 ‘G7′과 이탈리아 화이트 와인 ‘Love Hollic’ 까지 합세하자 여느 레스토랑 못지 않은 호화로운 식사를 즐기는 기분입니다.

리조트 저녁 산책

환상적인 저녁식사를 마치고 소화를 위한 산책을 나섭니다. 노블리안 콘도와 이어진 통로를 걷다보면 쏠 비치 호텔에 다다를 수 있습니다. 호텔 각각의 방은 오페라 관중석처럼 중앙 라운지를 감싸듯 복도를 따라 둥그렇게 배열되어 있는데, 천장의 새파란 하늘과 구름 프린트가 인상적이었습니다. 우리는 푹신한 호텔 로비에 앉아 담소를 나누며 다음날 아침엔 이곳의 커피와 빵을 먹어보기로 합니다.

Day 2. 웹액츄얼리 식신들의 행진~

다음날 아침이 밝았습니다. 체크아웃을 하고 나오니 딴 세상이 펼쳐져 있었습니다. 저 멀리 보이는 바다와 쏠 비치 정원 안에 있는 호수가 이어져 보여 마치 바다의 연장선상에 서있는 기분입니다.

호텔 라운지에서의 아침 식사

전날 봐뒀던 호텔 라운지에 있는 카페에서 아침을 먹기로 합니다. 간단하게 빵과 커피, 차를 주문합니다. 쏠 비치의 베이커리는 상당히 맛있다는 추천이 많아 모두들 반드시 먹고야 말겠다는 의지가 아침부터 대단했습니다.

카페 분위기는 마치 무인도 해변에 세워진 고급 별장처럼 화이트 컬러와 원목 느낌이 살아 있습니다. 재즈 음악과 함께 라이브로 노래를 직접 들려주던 외국인 가수도 있어 더 특별한 공간에 와 있는 기분이었습니다.

속초 중앙 시장 나들이

아침을 먹고 바로 이어지는 점심시간! 웹액츄얼리팀은 비록 여자 멤버로만 이뤄져 있지만 남자보다 더 많이 먹는 ‘식신’들로 포진해있죠.

오후 업무 체크 시간

속초 시내, 시장 나들이

서울에서 떠날 때는 한계령으로 왔으니 돌아갈 때는 미시령으로 가기로 합니다. 컴컴한 밤 으스스한 분위기의 미시령 도로를 지나고 있으니 무서운 이야기가 나오기 시작합니다. 가장 무서웠던 얘기는 팀장님과 아는 사람이 죽었던 런던 유학생 토막 살인사건. 귀신이나 유령보다 사람이 제일 무서운 것 같습니다.

드디어 회사에 도착했습니다. 벌써 저녁 9시가 되었군요. 남은 음식은 각자 배분해 사이좋게 나눠 가져갔습니다. 살림살이가 훨씬 나아질 것 같아요. 고기 가져간 사람이 제일 부럽습니다. 지금 이 글을 쓰는 이 순간도 아직까지 입안에서 맴도는 육즙과 고기맛이 잊혀 지지 않습니다.

워크샵을 다녀와서…

1시간만 교외로 나가면 강과 산 자연이 펼쳐져 있습니다. 우리는 이제 회색 도시에 너무 길들여져, 자연의 아름다움을 느낄 틈도 없이 사계절을 보내고 있습니다. 짧은 하루였지만 자연, 단풍, 바다를 보고 오니 마음이 한결 여유로워 집니다. 이것이 자연이 주는 선물이겠지요.

요즘은 “문자해” 보다 “카톡해”가 더 많이 쓰이고 있죠~

저희는 좋은 콘텐츠를 어떻게 다양하게 공유하게 할 수 있을지 늘 고민한답니다~

그러던 중, 카카오톡에서 모바일 웹에서도 바로 카카오톡으로 콘텐츠를 공유할 수 있도록 지원하고 있다는 것을 발견 후 바로 적용 해 보았습니다.

참조 : http://www.kakao.com/link/api?tab=mobileweb

적용방법.

1. 카카오톡에서 지원하고 있는 script 파일 다운로드!

2. FTP를 사용하여 업로드 후, 인클루드!

3. 버튼에 액션 추가하기!

[talk]

이렇게만 하면 모바일 웹에서 카카오톡으로 콘텐츠 내용 및 주소 전달이 바로 가능하도록 된답니다.

* 모바일에서 확인하세요!

실행 예제.

1. 공유하고자 하는 곳에서 “카카오톡” 버튼 클릭.

2. 대화상대 선택.

3. 전송완료.