BLOG Story
구글 플러스 버튼 블로그나 사이트에 다는 방법 - Google +1 공유버튼 소스코드
2proo
2012. 7. 20. 13:30
구글 플러스 버튼을 블로그나 사이트에 설치하는 방법 - Google +1 버튼 소스코드
구글 플러스원 (Google Plus 1, 플러스 원) 은 설치 방법이 구글 답게 아주 아주 쉽습니다. 트위터나 페이스북처럼 구글에서도 공식으로 플러스원 버튼을 지원해주고 있는데 개별 설정을 안해줘도 소스 코드 하나만으로 웬만한 사이트들이 공통으로 사용할 수 있습니다.
구글 플러스원도 트위터나 페이스북과 같은 SNS 이지만 사용 용도 목적 및 유저층이 조금은 다릅니다.
페이스북처럼 일상 이야기도 있고 트위터처럼 빠른 소식전파도 가능하지만 일단 IT 업계 쪽 사람들, 특히 전문가나 개발자들이 많이 있습니다. 무엇보다 급박하게 업데이트 되지 않고 어느정도 여유있게 게시물들이 올라와서 보기도 편하네요.
아래 스크린샷처럼 블로그 페이지 상단과 하단에 플러스 버튼을 설치해놨는데 버튼을 누르게되면 구글 플러스에 해당 정보를 공유할 수 있는 창이 뜹니다. 코멘트를 추가할 수도 있고 게시물의 사진을 골라서 올릴수도 있으며, 공개할 서클 등에 대한 범위 조절도 가능합니다.
아래는 유튜브에 설치되어 있는 구글 플러스 버튼을 통해 동영상을 구글 플러스에 올린 내용입니다.
재미있는것, 좋은 정보들을 이렇게 플러스 버튼을 통해 쉽게 공유할 수 있습니다. 물론 구글 크롬 브라우저에서도 플러그인으로 따로 설치할 수도 있으나 블로그나 사이트 운영자들은 버튼을 설치해서 사용자들이 공유할 수 있게 만들어주는게 더 좋겠지요.
아래는 구글 플러스의 +1 버튼을 만들어주는 곳입니다.
플러스원 소스 코드 생성 : http://www.google.com/intl/ko/webmasters/+1/button/
구글 플러스의 +1 버튼을 생성할때는 옵션이 몇가지 없습니다.
그리고 해당 옵션(크기, 주석 여부, 언어) 등을 설정할때도 미리보기가 적용되므로 하나 하나 클릭해서 마음에 드는 버튼을 생성할 수 있습니다. 단 아래 스크린샷에서 보시다시피 고급 옵션을 클릭해서 비동기 부분에 체크를 해제하면 더 간단한 소스를 얻을 수 있으며 현재 이 블로그에도 비동기를 해제한 소스 코드를 사용하고 있습니다.
아래 스크린샷은 인라인 주석으로 중간 크기의 버튼을 달았을때의 모습입니다.
인라인은 플러스 한 사용자들과 그 숫자, 이름 등을 버튼 옆에 나열해줍니다.
그리고 중간 사이즈 20px 는 트위터 리트윗 버튼이나 페이스북 좋아요 버튼과 크기가 같습니다.
아래는 플러스 버튼의 풍선형, 세로형 버튼 모습입니다. 이 게시물 하단에 사용된 버튼이기도 합니다.
이 구글 플러스 소스 코드가 어느 사이트나 블로그에서도 사용할 수 있는 코드 입니다.
위에 첨부한 구글 플러스 소스 코드를 클릭해서 원하는 곳에 코드를 설치하세요.
다만 위쪽에 있는 세줄짜리 코드는 스킨 <body>, </body> 나 <head>, </head> 사이에 넣어주세요.
그리고 하단의 한줄짜리 코드를 플러스 버튼이 나타날 곳에 넣어주면 설치 완료입니다.
위 설정사항 이외에 좀 더 옵션을 변경하고 싶으신분은 플러스 버튼 만들기 사이트에 직접 가보셔서 만들어보세요.
▶ 구글 플러스 버튼 만들기 : http://www.google.com/intl/ko/webmasters/+1/button/
▶ 구글 플러스 버튼 세부 설정 : https://developers.google.com/+/plugins/+1button/?hl=ko#target-url
구글 플러스원 (Google Plus 1, 플러스 원) 은 설치 방법이 구글 답게 아주 아주 쉽습니다. 트위터나 페이스북처럼 구글에서도 공식으로 플러스원 버튼을 지원해주고 있는데 개별 설정을 안해줘도 소스 코드 하나만으로 웬만한 사이트들이 공통으로 사용할 수 있습니다.
구글 플러스원도 트위터나 페이스북과 같은 SNS 이지만 사용 용도 목적 및 유저층이 조금은 다릅니다.
페이스북처럼 일상 이야기도 있고 트위터처럼 빠른 소식전파도 가능하지만 일단 IT 업계 쪽 사람들, 특히 전문가나 개발자들이 많이 있습니다. 무엇보다 급박하게 업데이트 되지 않고 어느정도 여유있게 게시물들이 올라와서 보기도 편하네요.
아래 스크린샷처럼 블로그 페이지 상단과 하단에 플러스 버튼을 설치해놨는데 버튼을 누르게되면 구글 플러스에 해당 정보를 공유할 수 있는 창이 뜹니다. 코멘트를 추가할 수도 있고 게시물의 사진을 골라서 올릴수도 있으며, 공개할 서클 등에 대한 범위 조절도 가능합니다.
아래는 유튜브에 설치되어 있는 구글 플러스 버튼을 통해 동영상을 구글 플러스에 올린 내용입니다.
재미있는것, 좋은 정보들을 이렇게 플러스 버튼을 통해 쉽게 공유할 수 있습니다. 물론 구글 크롬 브라우저에서도 플러그인으로 따로 설치할 수도 있으나 블로그나 사이트 운영자들은 버튼을 설치해서 사용자들이 공유할 수 있게 만들어주는게 더 좋겠지요.
아래는 구글 플러스의 +1 버튼을 만들어주는 곳입니다.
플러스원 소스 코드 생성 : http://www.google.com/intl/ko/webmasters/+1/button/
구글 플러스의 +1 버튼을 생성할때는 옵션이 몇가지 없습니다.
그리고 해당 옵션(크기, 주석 여부, 언어) 등을 설정할때도 미리보기가 적용되므로 하나 하나 클릭해서 마음에 드는 버튼을 생성할 수 있습니다. 단 아래 스크린샷에서 보시다시피 고급 옵션을 클릭해서 비동기 부분에 체크를 해제하면 더 간단한 소스를 얻을 수 있으며 현재 이 블로그에도 비동기를 해제한 소스 코드를 사용하고 있습니다.
아래 스크린샷은 인라인 주석으로 중간 크기의 버튼을 달았을때의 모습입니다.
인라인은 플러스 한 사용자들과 그 숫자, 이름 등을 버튼 옆에 나열해줍니다.
그리고 중간 사이즈 20px 는 트위터 리트윗 버튼이나 페이스북 좋아요 버튼과 크기가 같습니다.
아래는 플러스 버튼의 풍선형, 세로형 버튼 모습입니다. 이 게시물 하단에 사용된 버튼이기도 합니다.
이 구글 플러스 소스 코드가 어느 사이트나 블로그에서도 사용할 수 있는 코드 입니다.
구글 플러스 소스 코드.txt위에 첨부한 구글 플러스 소스 코드를 클릭해서 원하는 곳에 코드를 설치하세요.
다만 위쪽에 있는 세줄짜리 코드는 스킨 <body>, </body> 나 <head>, </head> 사이에 넣어주세요.
그리고 하단의 한줄짜리 코드를 플러스 버튼이 나타날 곳에 넣어주면 설치 완료입니다.
위 설정사항 이외에 좀 더 옵션을 변경하고 싶으신분은 플러스 버튼 만들기 사이트에 직접 가보셔서 만들어보세요.
▶ 구글 플러스 버튼 만들기 : http://www.google.com/intl/ko/webmasters/+1/button/
▶ 구글 플러스 버튼 세부 설정 : https://developers.google.com/+/plugins/+1button/?hl=ko#target-url