myPickup widget 가이드

myPickup 서비스를 사용하기 위해서는 여러가지 방법이 있습니다.
- mypickup.kr
- bookmarklet 서비스
- widget 서비스

그 중 WZDAPI 와 위젯뱅크에서 제외한 저희가 제작한 최초의 위젯을 사용하는 벙법을 적어보겠습니다.
* 위젯 서비스 사용방법 :
- 블로그 포스팅을 트위터에 알리는 간단한 위젯 공개 Beta0.1
- mypicup textcube용 위젯 스크립트



* jQuery
** SCRIPT

<script type="text/javascript">
	// jquery 형식
$(function(){
	$(".share").click(function(){
		var url = $(this).attr('url');
		var title = $(this).attr('title');
		var username = $(this).attr('username');
		var categoryGrp = $(this).attr('categoryGrp');
		var fn = 'notFn';

		var host='http://2u.lc/';
		var head=document.getElementsByTagName('head')[0];

		var js;
		try{
			js=document.standardCreateElement('script');
		}catch(e){}
		if(typeof(js)!='object')js=document.createElement('script');
		js.type='text/javascript';
		js.src=host+'packer/js/widget.js/'+fn+'/'+username+'/'+Base64.encode(url)+'/'+Base64.encode(title)+'/'+Base64.encode(categoryGrp)+'/';
		js.id='pikup_js';
		head.appendChild(js);
		return false;
	});
});
</script>

** HTML

<a class="share" categorygrp="정치" title="★무감이네★ :: 초계함 천안함 침몰 -- 의혹 투성이인데, 정부는 감추는 것이 많다." url="http://rock1209.tistory.com/765" username="hanjum2" href="http://twitter.com/mypickup"><img src="http://mypickup.kr/images/list/btn_share.gif" alt="나누기 share" height="16" width="104" border="0" /></a>

myPickup widget 가이드 jquery.js


* prototype.js
** SCRIPT

<script type="text/javascript">
// prototype 형식
Event.observe(window, 'load', function() {
	$$('share').invoke('observe', 'click', function(){
		var url = this.getAttribute('url');	
		var title = this.getAttribute('title');
		var username = this.getAttribute('username');
		var categoryGrp = this.getAttribute('categoryGrp');
		var fn = 'notFn';
		
		var host='http://2u.lc/';
		var head=document.getElementsByTagName('head')[0];
		var js;
		try{
			js=document.standardCreateElement('script');
		}catch(e){}
		if(typeof(js)!='object')js=document.createElement('script');
		js.type='text/javascript';
		js.src=host+'packer/js/widget.js/'+fn+'/'+username+'/'+Base64.encode(url)+'/'+Base64.encode(title)+'/'+Base64.encode(categoryGrp)+'/';
		js.id='pikup_js';
		head.appendChild(js);
		return false;			
	}, false);
});
</script>

** HTML

<a class="share" categorygrp="정치" title="★무감이네★ :: 초계함 천안함 침몰 -- 의혹 투성이인데, 정부는 감추는 것이 많다." url="http://rock1209.tistory.com/765" username="hanjum2" href="http://twitter.com/mypickup" OnClick="return false;"><img src="http://mypickup.kr/images/list/btn_share.gif" alt="나누기 share" height="16" width="104" border="0" /></a>

myPickup widget 가이드 prototype.js


* Javascript
** script

<script type="text/javascript">
function share(obj, username, categoryGrp){
	var url = obj.href;
	var title = obj.title;
	var username = username;
	var categoryGrp = categoryGrp;
	var fn = 'notFn';

	var host='http://2u.lc/';
	var head=document.getElementsByTagName('head')[0];
	var js;
	try{
		js=document.standardCreateElement('script');
	}catch(e){}
	if(typeof(js)!='object')js=document.createElement('script');
	
	js.type='text/javascript';
	js.src=host+'packer/js/widget.js/'+fn+'/'+username+'/'+Base64.encode(url)+'/'+Base64.encode(title)+'/'+Base64.encode(categoryGrp)+'/';
	js.id='pikup_js';
	head.appendChild(js);
	return false;
}
</script>

** HTML

** 실재 적용화면

myPickup widget 가이드 javascript

* 주요설정
** url : 현재 페이지 전체 URL 정보
- url 정보가 없을 경우 현재페이지 url 을 사용합니다.
- frame 태그 내에서 사용할 경우 현재페이지 url 값을 잘 못 가져올수 있으니 꼭 지정해 주세요

** title : 현재 페이지 타이틀
- title 정보가 없을 경우 현재페이지 title 을 사용합니다.
- frame 태그 내에서 사용할 경우 현재페이지 title 지정이 잘 못 될수 있으니 꼭 지정해 주세요

** username : RT 할 트위터 username
- 현재 URL정보를 제공하는 트위터 아이디
- username 정보가 없을 경우 'RT @username' 자동 입력되지 않습니다.

** categoryGrp : mypickup 카테고리명
- 2010.03.29 현재 카테고리는 'IT&기술', 'Site&서비스', '연예', '스포츠', '시사', '유머', '정치', '경제', '이벤트', 'ETC' 10개입니다.
- categoryGrp 정보가 없을 경우 'ETC'로 자동 지정됩니다.

** fn : 블로그 등에서 위젯디자인을 선택할 정보
- fn 은 위의 스크립트를 사용할 경우 'notFn'으로 사용하시면 됩니다.