동적 인 Pinterest 버튼을 만드시겠습니까?

동적 인 Pinterest 버튼을 만들 수있는 방법이 있습니까? 주 콘텐츠가 동적 인 사이트에 Pinterest 지원을 추가하려고합니다. 따라서 현재 콘텐츠가 무엇이든지간에 고정 된 페이지 소스에 단일 Pin It 단추 만 갖게됩니다.동적 인 Pinterest 버튼을 만드시겠습니까?

미리 하드 코딩 된 URL을 지정해야하기 때문에 미리 제작 된 핀 고정 단추로이 작업을 수행하는 방법을 알 수 없습니다.

그러나 Pin It 북마크릿이있어 원하는 효과를 얻지 만 사용자가 북마크 바에 수동으로 추가해야합니다.

Pin It 단추를 수정하거나 (b) 북마크를 내 페이지에 통합하여 현재 페이지 콘텐츠가 무엇이든간에 고정시킬 수있는 방법이 있습니까? 관심있는 사람들을위한

출처

2012-06-20 daGUY

, 여기에 내가 무슨 짓을했는지 :

HTML :

<a href="#" id="pinit">Pin It</a>

JS :

$(document).ready(function(){ 
    $("#pinit").click(function(){ 
     $("#pinmarklet").remove(); 
     var e = document.createElement('script'); 
     e.setAttribute('type','text/javascript'); 
     e.setAttribute('charset','UTF-8'); 
     e.setAttribute('id','pinmarklet'); 
     e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);document.body.appendChild(e); 
    }); 
});

일반적으로, 당신은 브라우저의 북마크 표시 줄에 핀이 북마크를 클릭하면 , 동적으로 삽입 할 스크립트 (pinmarklet.js)가 있습니다.이 스크립트는 Pinterest UI를 불러 와서 고정시킬 이미지를 자동으로 선택합니다.

대신 링크 (#pinit)를 클릭했을 때 스크립트가 삽입되도록 수정했습니다. 나는 또한 ($("#pinmarklet").remove();)을 제거하고 링크를 클릭 할 때마다 다시 추가 할 수 있도록 id을 스크립트 (#pinmarklet)에 추가했습니다. 그렇지 않으면 링크를 계속 클릭하면 같은 스크립트에 대한 복제 링크가 계속 누적됩니다.

어쨌든, 최종 효과는 북마크릿과 동일한 작업을 페이지에서 대신 수행한다는 것입니다. 따라서 동일한 방식으로 작동하고 현재 페이지 콘텐츠가 무엇이든 가져옵니다. 즉, 다른 콘텐츠를 동적으로 변경할 수 있으며 동일한 "Pin It"링크로 선택됩니다.

출처

2012-06-21 13:50:47 daGUY

공유에 감사드립니다. : D – Jess

이것은 아주 좋습니다. Delorian은 여전히 최상의 해결책으로 '12 '로 돌아 왔습니다. – bplittle

나는 improved Pinterest button that supports an HTML5-valid syntax on GitHub을 만들었습니다.

이 솔루션을 사용하는 방법은 사이트에서 서버 측 (PHP 또는 기타 백엔드 언어 사용)으로 페이지를 동적으로 채우고 있는지 또는 JavaScript 및 AJAX 메소드를 통해 클라이언트 측에서 페이지를 동적으로 채우고 있는지에 따라 다릅니다.

서버 측

, 당신은 템플릿에 작성의 data-* 속성으로 HTML5 <div>을 생성 할 다음 <body>의 가까운 전에 <script> 태그를 사용하여 pinterest-plus-html5.min.js 파일을로드합니다. 문서에 설명 된대로 클라이언트 측에 대한

, 당신은 <head>에 <script> 태그 또는 비동기로드를 통해 하나의 pinterest-plus-html5.min.js 파일을로드해야합니다. 그런 다음 자바 스크립트로 HTML5 <div>을 생성하고 페이지에 Pinterest 버튼 태그를 동적으로 삽입하거나 바꾼 다음 PinterestPlus.pinit()을 호출하여 <div>을 Pinterest 버튼 으로 변환합니다.

도움이 되었기를 바랍니다.

출처

2012-06-26 16:32:20

단순한 서버 측 솔루션이 클라이언트 측보다 낫습니다. The code is here (PHP, WordPress 또는 ASP)

출처

2013-01-17 11:57:28 user1987005

답변과 함께 일부 코드를 추가하십시오. 그래서 사용자가 참조 할 수 있습니다. –

버튼의 href에있는 매개 변수로 제어 할 수있는 핀트 레스트 버튼 핀은 무엇입니까?

출처

2013-05-17 04:29:06 chuckles

동적 링크는 고객 센터

에 대한 코드 아래

는 다른 페이지에 대한 동적 대표자 버튼을 생성합니다.

<a href="http://pinterest.com/pin/create/button/?url=http://www.printe-z.com/booked-forms.html&amp;media=http://www.printe-z.com/image/cache/data/newImages/business_forms_Booked-200x120.jpg&amp;description=description will come here" class="pin-it-button" count-layout="none"> 
<img src="http://assets.pinterest.com/images/PinExt.png" data-cfsrc="//assets.pinterest.com/images/PinExt.png" title="Pin It" border="0"> 
</a>

출처

2013-08-30 09:26:42 Cnab

대표자 : 동적 버튼을 구축하기위한 "구축"기능을 제공합니다. 즉, Pinterest 앵커를 동적으로 생성 할 수 있음을 의미합니다. &이 함수를 Pinterest 버튼으로 변환하는 데 사용합니다. Pinit.js가로드 될 때와 같은 방식입니다. 여기

당신이 함수의 이름을 지정하는 방법을 설명합니다 : 페이지 하단에 하나의 대표자 버튼, http://porizi.wordpress.com/2013/11/07/dynamic-pinterest-button/

출처

2013-11-11 12:27:29 phidias

내가 전체 화면 갤러리가있는 페이지가를,이 페이지에 종료 솔루션을 찾고 있습니다. 성공하지 나는이 함께했다 :

var imgurl = player.children(".gallery-image").eq(next).css("background-image").match(/\((.+)\)/)[1]; 
$(".pintrest-container > a").attr("data-pin-href", "//www.pinterest.com/pin/create/button/?url=http://mywebsite.com/&media=" + imgurl + "&description=My Website");

의 형식은 url('image.jpg'), 그래서 정규식이 url('')를 제거하고 경로 만 제공하기 때문에 /$(.+)$/가, 배경 속성에 이미지 URL을 구문 분석 할 수 유용합니다 정규식.

그럼 내 새 이미지로 data-pin-href 속성을 설정하면 멋지게 작동합니다.

출처

2014-09-11 15:43:44

동적 인 Pinterest 버튼을 만드시겠습니까?

답변

관련 문제