구글 블로거에 카카오톡 공유를 만들어보자

1. 흔한 기능이지만

그냥은 안나오는 기능. 네이버, 티스토리는 거의 기본기능에 가깝지만, 구글은 자신이 만들어야 나오는, 혹은 스킨 배포자가 만들어 줘야 쓸 수 있는 카카오톡 공유기능입니다. 구글 블로그가 유입이 약하기때문에 여러가지 소셜기능을 만들어 보는것은 유입 진착책으로써 유효할 수 있습니다. 그러한 기능중 하나로써 카카오링크를 달아보고자 이번에 처음으로 Kakao Developers를 사용해봤습니다. 

2. 준비물

준비물이 몇가지 필요합니다.

1) Kakao Developers에 "내 어플리케이션" 등록

2) 내 어플리케이션 등록으로 얻어지는 "JavaScript키"

3) "도구>데모>카카오링크 보내기" 에 있는 코드

<script type="text/javascript">
  Kakao.Link.createDefaultButton({
    container: '#create-kakao-link-btn',
    objectType: 'feed',
    content: {
      title: '딸기 치즈 케익',
      description: '#케익 #딸기 #삼평동 #카페 #분위기 #소개팅',
      imageUrl:
        'http://k.kakaocdn.net/dn/Q2iNx/btqgeRgV54P/VLdBs9cvyn8BJXB3o7N8UK/kakaolink40_original.png',
      link: {
        mobileWebUrl: 'https://developers.kakao.com',
        webUrl: 'https://developers.kakao.com',
      },
    },
    social: {
      likeCount: 286,
      commentCount: 45,
      sharedCount: 845,
    },
    buttons: [
      {
        title: '웹으로 보기',
        link: {
          mobileWebUrl: 'https://developers.kakao.com',
          webUrl: 'https://developers.kakao.com',
        },
      },
      {
        title: '앱으로 보기',
        link: {
          mobileWebUrl: 'https://developers.kakao.com',
          webUrl: 'https://developers.kakao.com',
        },
      },
    ],
  })
</script>

추가적으로 내 어플리케이션 등록 할 때 업로드할 이미지가 있으면 나중에 공유 메세지 하단에 파비콘같이 넣을수 있어요.

3. 적용하기

1) 카카오 API를 가져온다는 의미에서 html의  head에 하기 내용을 추가합니다.

<script src='https://developers.kakao.com/sdk/js/kakao.js'/>

2) html에 카카오로고를 포스팅안에서 원하는 위치에 삽입합니다.

<a id="create-kakao-link-btn" href="javascript:;">
<img src="https://developers.kakao.com/assets/img/about/logos/kakaolink/kakaolink_btn_medium.png"/>
</a>

3) 준비물 3번에서, Kakao.init('본인의 "JavaScript키'); 를 추가합니다. 그리고 거기에

    title:뒤에 <data:post.title/>를 넣어줍니다:포스팅 제목

    description:뒤에 <data:post.snippets.short/>를 넣어줍니다:본문요약문

    imageUrl:뒤에 <data:post.featuredImage/>를 넣어줍니다:포스팅이미지

    webUrl:뒤에 <data:post.url/>를 넣어줍니다:포스팅 주소

4) 저는 소셜에 관련한 부분은 삭제했고,

5) 웹용 모바일용 이렇게 다른 url을 가지는 블로그가 아니라서 하나의 버튼만 나올수 있게 2개중 하나는 삭제했습니다

6) html에 적용한 3)의 결과물은 아래와 같습니다.

<script type='text/javascript'>
	Kakao.init('본인의 "JavaScript키');
	Kakao.Link.createDefaultButton({
		container: '#create-kakao-link-btn',
		objectType: 'feed',
		content: {
			title: '<data:post.title/>',
			description: '<data:post.snippets.short/>',
			imageUrl: '<data:post.featuredImage/>',
			link: {
            mobileWebUrl: '<data:post.url/>',
			webUrl: '<data:post.url/>',
                         },
                        },
                buttons: [
                         {
                         title: '자세히보기',
                         link: {
                         mobileWebUrl: '<data:post.url/>',
                         webUrl: '<data:post.url/>',
                         },
                        },
                       ],
                     });
</script>

7)   실제로 공유해본 화면

처음에 새 어플리케이션때 입력했던 이미지,  앱 이름이 맨아래에 삽입되어있는것을 볼수 있습니다. 설정해볼 만 한것 같습니다. 이쁘네요.

결론. 구글블로그 태그가 더 힘듬

카카오 API는 안어려운데, 구글 블로그 태그가 생소해서 시간이 걸렸습니다. 그래도 생각대로 잘 작동해줘서 좋네요