블로그에 유튜브 채널 구독 버튼(위젯)달기

블로그 한쪽 구석에 구독 버튼을 달아 놓는다고 유입 증가에 얼마만큼 기여를 할지는 모르지만

유튜브 채널을 운영하시고 블로그나 웹사이트 또는 카페 등에서 자신의 유튜브 채널 유입 증가에 

도움이 된다고 생각하시는 분만 보세요.

제 블로그 사이드바에는 유튜브 채널 구독 버튼이라고 해야 하나,위젯이라고 해야 하나...

2개의 구독 버튼이 있는데요.

포스팅이 끝나면 둘 중 한개는 떼어 내기로 하고 설명해 보겠습니다.

아래 캡쳐 이미지 1로 표시된 위젯은 자바 스크립트 소스 코드로 되어있고 구독 버튼을 누르면 새 창으로

페이지가 열리고...2로 표시된 위젯은 아이프레임 소스 코드에 현재 창으로 페이지가 열립니다.

1,2 각각의 장단점이 있을 텐데요.알아서 판단하시고 자신에게 맞는 소스 코드를 대입하시길요.

1의 소스 코드 구하기

https://developers.google.com/youtube/youtube_subscribe_button

위 구글 개발자 모임 링크 페이지로 들어가 버튼 구성 옵션에서 1 자신의 채널 아이디를 입력하고

2 레이아웃,3 테마,4 구독자 표시 여부 등은 입맛대로 설정합니다.(각각의 설정 옵션은 2가지씩 밖에 없음)

옵션 설정 후 My application listens for button events에 체크하면 코드 생성이 되는데요.

생성된 코드를 드래그 복사합니다.

복사한 코드를 자신의 웹사이트, 즉 티스토리 블로그로 가져 와 페이지 본문 상단이나 하단

마음에 드는 곳에 위치시키면 되는데요.

저의 경우 위 캡쳐 이미지처럼 사이드바의 HTML 배너출력 모듈을 추가해 위치시켰습니다.

2의 소스 코드

구글에서 유튜브 채널 구독 버튼이나 유튜브 채널 위젯으로 검색하면 많은 외국 블로그나 사이트에서

소스 코드를 제공하는데요.

소스 코드는...

<iframe frameborder="0" id="fr" scrolling="no" src="http://www.youtube.com/subscribe_widget?p=sunstar" 

style="overflow: hidden;height: 105px;width: 300px;border: 0"></iframe>

입니다.

                       

                                                유튜브_채널_위젯_소스코드.txt

소스 코드에서 제 닉네임 sunstar로 되어 있는 것을 본인의 유튜브 채널 아이디로 바꾸시고

아래 캡쳐 이미지처럼 위치시킬 곳에 따라, 또는 사이드바의 폭에 따라 위젯의 높이와 넓이를 조절해 

설치하시면 됩니다.

     

1의 소스 코드는 자바 스크립트로 되어 있어 티스토리 블로그나 구글 블로그 등 스크립트 소스를

허용하는 웹사이트에서만 사용할 수 있고 위젯 선택의 폭이 적은 반면 구독 버튼 클릭 시 새 창으로

본인 채널이 열리기 때문에 블로그 유입 이탈을 방지할 수 있을 테구요.

2의 소스 코드는 아이프레임이므로 티스토리 블로그 외에 다음 블로그나 카페 등 아이프레임 소스 코드를

지원하는 좀 더 많은 웹사이트에서 사용할 수 있겠고 높이와 넓이를 조절할 수 있는 유도리가 있는 반면

클릭 순간 현재 페이지에서 바로 열리기 때문에 방문자 이탈에 신경쓰시는 분은 고려해야 할 듯 합니다.

결론

1과 2 유튜브 채널 위젯에는 닉네임과 프로필 아이콘,구독 버튼에 링크가 걸려 있는데요.

설치된 위젯의 닉네임이나 프로필 아이콘을 클릭 시 방문자가 어떤 웹 브라우저로 방문을 했든 

상관없이 자신의 유튜브 채널로 이동되지만, 구독 버튼을 눌렀을 때 상황(?)은 달라 질 수 있습니다. 

가령 크롬으로 구독 버튼을 눌렀다면 대부분의 크롬 사용자는 구글과 동기화되어 있으므로 구독이

추가되면서 이동되지만 IE나 다른 브라우저를 사용해 버튼을 누른다면 구글 로그인 창이 먼저 뜬 답니다.

방문자가 미리 구글에 로그인했다면 안 뜰테지만...ㅎㅎ

그런데 이걸 결론이라고 쓴게 말 되나요~?

이상입니다~^^