36

解決策を見つけようとしましたが、見つかりません。Pinterest（Pin It）ボタンのカスタム画像が必要で、URLでカスタム画像を固定しますが、現在のページではありません。

カスタムリンクを作成しました：

<a href="http://pinterest.com/pin/create/button/?url=http://inspired-ui.com&media={ImageURL}&description=DescriptionText" class="pinitbutton">Pin It</a>

スタイルで背景画像を設定しましたが、デフォルトの[ピン留め]ボタンのみが表示され、カスタムボタンは表示されません

ピン留めボタンのカスタムボタン画像を設定できるソリューションがいくつかありますが、それらのソリューションではmedia={ImageURL}を変更できません。

人気のある解決策は

<a href='javascript:void((function()%7Bvar%20e=document.createElement(&apos;script&apos;);e.setAttribute(&apos;type&apos;,&apos;text/javascript&apos;);e.setAttribute(&apos;charset&apos;,&apos;UTF-8&apos;);e.setAttribute(&apos;src&apos;,&apos;http://assets.pinterest.com/js/pinmarklet.js?r=&apos;+Math.random()*99999999);document.body.appendChild(e)%7D)());'><img src='http://www.brandaiddesignco.com/blog/PinIt.png'/></a>

しかし、それは私を助けません。誰かが解決策を知っていますか？

4

7 に答える 7

21

URL の最後のフラグメントの前にエンコードされた空白を追加すると、Pinterest の JS がリンクを「ハイジャック」するのを防ぐことができます。

//pinterest.com/pin/create/%20button?url=

アップデート：

私の以前の解決策はもう機能しないようです。ここに別のものがあります：

//pinterest.com/pin/create%2Fbutton/?url=
于 2013-07-25T10:32:48.837 に答える
21

実際、 Jeremy Mansfieldによる www.brandaiddesignco.comの人気のあるソリューションには、Pinterest ボタンを好きなようにカスタマイズする優れた方法があります。

jsFiddle の形式で3 つの例を作成したので、そのメソッドを使用してどのように実行されるかを確認できます。

リファレンス: jsFiddle Text-Link メソッド
リファレンス: jsFiddle カスタム ロゴ メソッド
リファレンス: jsFiddle カスタム ロゴとイメージ メソッド

Pinterestの詳細については、他のSO Answerを参照してください。

于 2012-07-15T01:45:47.527 に答える
17

物事を単純化しすぎるリスクを冒して、'http://pinterest.com/pin/create/button/?url='すでに取得したパスを使用し、変数を設定して、同じように追加します。ピンタレストのJavaScriptは含めないでください。そのjsがないと、リンクが見つからず、独自のピンタレストボタンに置​​き換えられません。リンク内の画像を使用してリンクをカスタマイズし（または背景画像などを設定して）、ピンタレストjsをねじ込みます。新しいウィンドウで開くようにターゲットを設定します。

于 2013-02-23T00:29:49.003 に答える
15

カスタム リンク/ボタンは次のようになります。

<a href="http://stackoverflow.com/questions/11312923/custom-pinterest-button-for-custom-url-text-link-image-or-both" data-image="http%3A%2F%2Fcdn.sstatic.net%2Fstackexchange%2Fimg%2Flogos%2Fso%2Fso-logo.png" data-desc="Custom Pinterest button for custom URL (Text-Link, Image, or Both)" class="btnPinIt">
    Custom Pin it image or text here!
</a>

注: データ属性をエンコードする必要はないと思います (data-image の場合のように) が、害はないようです。

JQuery:

$('.btnPinIt').click(function() {
    var url = $(this).attr('href');
    var media = $(this).attr('data-image');
    var desc = $(this).attr('data-desc');
    window.open("//www.pinterest.com/pin/create/button/"+
    "?url="+url+
    "&media="+media+
    "&description="+desc,"_blank");
    return false;
});
于 2014-07-29T15:16:12.347 に答える
6

これが私のために働いたものです：

<a href="//www.pinterest.com/pin/create/button/" data-pin-do="buttonPin" data-pin-custom="true"><img src="../img/custompinint.png" /></a>

属性 data-pin-custom は、 Pinterest のドキュメントから取得したものです。

お役に立てれば。

于 2015-10-30T05:34:26.633 に答える