2012-12-27 1 views
3

나는 나의 인터넷 쇼핑몰에서 제품에 대한 고객 센터 PinIt 버튼을 추가하고있다.대표자 버튼 - 정말뿐만 아니라 자신의 자바 스크립트가 필요하십니까?

http://business.pinterest.com/widget-builder/#do_pin_it_button

내가 성공적으로 한 페이지에 모든 제품에 버튼을 구현하고 그것을 잘 작동 :이 클립은 내가 그것을 원하는 방법이다. 그들이 추가하고 싶은 스크립트에 관해서는, 정말로 필요합니까? 그것은 무엇을위한 것인가? 그것을 포함하지 않아도 괜찮습니까? 그것이 내가 뭐하는 거지 일부 AJAX 제출을 방해하는 것 때문에 내가 (왜 확실하지) 궁금하고 버튼 스크립트없이 잘 동작하는 것. 난 단지 내에서 링크를

답변

3

번호 - 잘 작동합니다.

<a href="http://pinterest.com/pin/create/button/?url=http%3A%2F%2Fwww.example.com%2Fproduct%3Fmodel%3DEQEA&amp;media=http%3A%2F%2Fwww.example.com%2Fimg_c%2F14ngton%2Fdesign%2F232.jpg&amp;description=Dack+Earth" class="pin-it-button" count-layout="horizontal" target="_blank"> 
    <img src="http://example.com/images/pin_icon.png" title="Pin It"> 
</a> 

각 단추 옆에 카운터가 나타나게하려면 스크립트 만 있으면됩니다.

enter image description here

6

pinit.js에 의해로드 된 자바 스크립트는 다섯 가지 위젯뿐 아니라 핀이 버튼을 구축합니다. AJAX 제출물을 방해하는 경우 페이지 하단에 한 번만로드되는지 확인하십시오.

코드는 허용 대답이 때문에 작동하지 않습니다 아마 사용 (내가 볼 수있는 URL이 나는 코드의 저자 우리가 페이지를 파괴하는 방법에 대한 자세한 내용을 알고 싶어요?) 두 번째와 세 번째 인수 (미디어 및 설명) 사이의 앰퍼샌드가 HTML 엔터티로 변환되었습니다.

일단 앰퍼샌드가 수정되면, 허용 된 답변의 코드는 메인 브라우저 창에 나타나는 핀 고정 팝업을 발생시켜 추악합니다. 사용자를 페이지에서 멀어지게 만듭니다. 실제로는 그렇지 않습니다. 당신이 원하는. Pinterest 사용자는 팝업이 어떻게 보이는지 알고 있고 잘못하면 고정되지 않는 경향이 있습니다.

클립 서비스 경험을 복제하려면, 다음과 같은 인라인 자바 스크립트를 추가해야합니다 :

onclick="window.open(this.href, '_pinIt', 'status=no,resizable=yes,scrollbars=yes,personalbar=no,directories=no,location=no,toolbar=no,menubar=no,width=632,height=270,left=0,top=0');return false;" 

내가 강하게 당신이 당신의 URL을-깍을 손으로하지 않는 것이 좋습니다; 그들은 부서지기 쉽고 결국 거의 끊어 질 것입니다. 당신이 좀 더 미래 지향적 무언가를 원하는 경우에, 당신은 우리의 도구 모음 북마크와 같은 자바 스크립트와 대표자 북마크 코드를 트리거 시도 할 수 있습니다.

<a style="cursor:pointer;" onclick="var d=document;var e=d.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','utf-8');e.setAttribute('src','//assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);d.body.appendChild(e);"><img src="//assets.pinterest.com/images/pidgets/pin_it_button.png" /></a> 

중요 : 즉,이 같이 보일 것 pinit.js이 제도에 얽매이지 URL을 사용하기 때문에, 당신이 당신의 브라우저에 HTML을 드래그하여 테스트하는 경우 file://에서 일을 찾기 위해 노력할 것입니다. 서버에서 실행하는지 확인하십시오.

+1

pinterest.com의 개발자 섹션에서이 모든 것을 더 간단하고 명확하게 만들 수는 없습니까? 필자는 일종의 초급 개발자이며 동적 제품 페이지에 PinIt 단추를 추가하려고합니다. 이 간단한 링크를 추가하는 것이 혼동 될 필요는 없습니다. – alieninlondon

+1

완료. 여기를 참조하십시오 : http://developers.pinterest.com/pin_it/ –