네이버 블로그에 페북위젯 만들기

Uno-i 네이버 블로그위젯 만들기

Life Marketing Solutions FACEBOOK 연동 위젯 만들기 설명

2016. 08. 04 (목)

본 보고서의 저작권은 Uno-i에 있습니다.보고서의 내용을 사용할 시에는

반드시 사전 동의를 득하여주시기 바랍니다.

관련 문의 : http://[email protected]

Uno-iLife Marketing Solution

© 2016 Uno-i All rights reserved.

위젯 만들기 절차

위젯 이미지 만들기

위젯 이미지 웹에 업로드 하기

네이버 블로그에 위젯 추가하기

01.

02.

다양한 PC 기기의 활용도가 높아지면서 모바일, 패드 등 휴대용

기기로 업무를 처리하는 비율이 높아지고 있으며, 이에 따라 소셜

네트워크 광고에 대한 관심도 높아지고 있다..

마케팅에 천문학적 비용을 투자하기도 했던 시대를 지나 이제는

SNS를 잘 활용한다면, 비용을 거의 들이지 않고도 천문학적 광고

효과를 낼 수 있게 되었다.

현재 국내 온라인 마케팅은 네이버와 페이스북, 이 두 마리의 토끼를

모두 잡아야 매출을 극대화할 수 있다. 네이버와 페이스북으로

유입되는 고객들이 다르기 떄문이다.

페이스북은 세계적으로 가장 보편화된 SNS 매체로서 다른

매체들과의 연결을 주관하는 허브의 역할을 하고 있으며, 네이버는

명실공히 국내 최대 검색 포털 싸이트로 다른 매체들보다 강한 파급력

을 가지고 있다.

본고에서는 네이버 블로그에 페이스북 위젯을 설정하는 방법을

알아보고자 한다.

03.

04.

위젯 만들기 절차

01.


1. 위젯 만들기 절차

네이버블로그에서위젯이미지를직접 등록하면좋을텐데요..

URL 주소를입력하는방식을사용하고있어서힘들지만이 절차를진행해야해요.

위젯 이미지

만들기

•블로그에 올릴 위젯

을 만들어야 합니다.

•원하는 이미지로

디자인 합니다.

위젯 이미지

웹에 업로드 하기

•완성된 이미지를 웹

에 업로드하여 URL

을 생성해야 합니다.

• 개인 홈페이지 및

클라우드 등에 업

로드합니다.

네이버 블로그에

위젯 추가하기

•생성된 URL을 네이

버 블로그에서 위젯

설정시 입력합니다.

위젯 이미지 만들기

02.


파워포인트를 엽니다. ‘새로 만들기‘ 클릭한 후, 조합할 이미지들을 슬라이드에 붙여넣기로 올립니다.

2-1. 위젯 이미지 만들기

원하는 이미지들을 네이버 블로그상에서 표시하고자

하는 모습으로 조합합니다.

뒤 페이지 계속



조합한 이미지를 마우스를 드래그하여 한 번에 선택한 후,

마우스 오른쪽 버튼을 클릭합니다.

그룹 -> 그룹 을 클릭합니다.

이후에 이미지를 클릭하면 위 그림과 같이 하나의 이미지로

선택이 됨을 확인합니다.



그림판을 열어서 마우스 오른쪽 클릭 -> 붙여넣기마우스 오른쪽 클릭 -> 복사


2-2. 위젯 이미지 사이즈 조정하기

가로 픽셀을 170px에 맞춥니다.

그 이유는? --> 다음장에서 설명


위젯이 표시될 네이버의 메뉴 가로 사이즈는 170px 입니다.

그래서 이미지를 만드실 때, 가로 사이즈를 170px로 맞춰주시는 게 가장 보기 좋습니다.

세로는 최대 600px 입니다. 세로 사이즈는 600px을 넘지 않도록 합니다.


170px

170px

199px

저는 가로 170px로 적용하였더니

세로는 199px 이더군요.

세로 사이즈는 신경쓰지 않았습니다.

참조 : http://blog.naver.com/yunho85

http://blog.naver.com/yunho85


가로 170px에 맞춰 이미지가 작아졌습니다.

그런데 뒷 배경이 하얗게 남아 있어요.

오른쪽 아래 모서리를 마우스로 클릭한 채로 드래그하여 이미지 오른쪽 아래 모서리에 맞춥니다.



2-3. 위젯 이미지 저장하기

파일 -> 저장 클릭


2-3. 위젯 이미지 저장하기

파일 형식은

JPEG, PNG 둘 중에 하나로 선택합니다.

03.위젯 이미지

웹에 업로드 하기


3-1. 위젯 이미지 웹에 업로드 하기

위젯 이미지를 웹에 업로드 하는 이유는?

네이버 블로그에 위젯을 추가할 떄, URL이 필요합니다.

이미지를 웹에 올려야 URL이 생성됩니다.

개인 웹에 올리는 것이 가장 좋습니다.

클라우드에 올려도 되지만..클라우드 업체마다 URL 제공을 안하는 경우도 있어서 복잡합니다.

개인 웹이 있으시면 개인 웹에 이미지를 올리시고 URL을 생성하세요.

아니면 이미지를 저한테 주세요.

그러면 제가 URL을 생성하여 보내 드릴게요.

카톡 아이디 : myaaple

이메일 주소 : [email protected]


3-2. 이미지 업로드 후에 URL 저장하기

위 그림은 제 웹에 이미지를 올린 모습입니다. 그러면 우측에 보이는 것처럼 URL이 생성이 됩니다. (다른 웹에 올리신 경우도 URL이 생성 됩니다.)

이를 마우스로 드래그 -> 마우스 오른쪽 클릭 -> 복사 하여 메모장 등에 저장해 둡니다.

04.네이버 블로그에

위젯 추가하기


4-1. 위젯 코드 만들기

크롬에서 탭을 하나 열어서

위 주소로 접속 연동할 페이지의

“Other” 클릭

생성된 주소를 복사하여 메모장에서 엽니다.

여 기 서 부 터 매 우 집 중 하 셔 야 해 요 .

<a href="https://www.facebook.com/idis.co.kr"

title="아이디스 - IDIS" style="font-family: "lucida

grande",tahoma,verdana,arial,sans-serif; font-size: 11px; font-variant: normal; font-style: normal; font-

weight: normal; color: #3B5998; text-decoration: none;" target="_TOP">아이디스 - IDIS</a><br /><a

href="https://www.facebook.com/idis.co.kr" title="아이디스 - IDIS"

target="_TOP"><img class="img"

src="https://badge.facebook.com/badge/524342384421701.280.1534567780.png" style="border: 0px;" alt=""

/></a><br /><a href="https://ko-kr.facebook.com/advertising"

title="회원님만의 위젯을

만들어보세요!" style="font-family: "lucida

grande",tahoma,verdana,arial,sans-serif; font-size: 11px; font-variant: normal; font-style: normal; font-

weight: normal; color: #3B5998; text-decoration: none;" target="_TOP">회원님 페이지도 홍보하기</a>

생성된 코드를 메모장에서 연 모습니다. 내용 중에 a href= 뒤에서부터 style 앞까지 주소를 복사합니다.

그 외 주소는 필요 없습니다.


<a target="_blank" target="_TOP" href="https://www.facebook.com/idis.co.kr"

title="아이디스 - IDIS"><img class="img" src="http://uno-i.com/wordpress/wp-

content/uploads/2016/07/facebook_widget.jpg" style="border: 0px;" alt="" /></a>

페이스북 badges에서 생성한 주소를 href= 뒤에 붙여넣습니다.

그리고 웹에 올리고 생성한 URL 주소를 src= 뒤에 붙여넣습니다.

<a target="_blank" target="_TOP" href=><img class="img" src= style="border: 0px;" alt="" /></a>

복 잡 하 니 까 매 우 매 우 집 중 하 셔 야 해 요 .

위 코드는 위젯 추가 코드에요.

위 코드에 아까 페이스북 badges에서 생성한 주소와 웹에 올리고 생성한 URL 주소 를 삽입해야 합니다.

일단 위 코드를 마우스로 드래그 하셔서 복사하여 새로운 메모장을 열고 붙여넣습니다.



<a target="_blank" target="_TOP" href="https://www.facebook.com/idis.co.kr"

title="아이디스 - IDIS"><img class="img" src="http://uno-i.com/wordpress/wp-

content/uploads/2016/07/facebook_widget.jpg" style="border: 0px;" alt="" /></a>

<<완성된 위젯 코드>>


이 코드를 잘 저장해 두세요.

이제 네이버 블로그에서 위젯 만들 때 붙여 넣기만 하면 됩니다.

붙여넣은 주소 앞뒤로 반드시 큰 따옴표가 있어야 합니다.!!

확인!!


4-2. 네이버 블로그에 위젯 추가하기

네이버 블로그로 오셔서

관리를 클릭합니다.


레이아웃 위젯 설정 클릭



우측 하단에

+ 위젯직접등록 BETA 클릭




위젯명 :

원하시는 이름을 적으세요.

이 위젯명은 블로그 상에 표출되지 않습니다.

관리페이지에서만 사용되는 이름입니다.

위젯코드입력 :

위 페이지에서 완성된 위젯코드를 붙여 넣습니다.

다음 -> 등록을 눌러 완료합니다.



오른쪽 그림과 같이

좌측 하단에 위젯이 생성됩니다.

원하는 위치에 배치하고 적용하여

작업을 마무리합니다.


4. 네이버 블로그에 위젯 추가하기

완성!

감사합니다.