web-dev-qa-db-ja.com

カスタムURLのカスタムPinterestボタン（テキストリンク、画像、または両方）

私は解決策を見つけようとしましたが、見つけることができませんでした。 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>

スタイルでは背景画像を設定しますが、デフォルトのPin Itボタンのみが表示され、カスタムボタンは表示されません

Pin Itボタンにカスタムボタン画像を設定できるソリューションがいくつかありますが、それらのソリューションで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>

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

htmlcsspinterest
33
Sergey

実際、 www.brandaiddesignco.com のJeremy Mansfieldによる人気のあるソリューションには、Pinterestボタンをカスタマイズする素晴らしい方法がありますあなたが望む任意の方法！

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

リファレンス：jsFiddle Text-Link method
リファレンス：jsFiddleカスタムロゴメソッド
参照：jsFiddleカスタムロゴおよびイメージメソッド

詳細についてはPinterest情報を参照してください SO Answer 。

22
arttronics

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

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

更新：

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

//pinterest.com/pin/create%2Fbutton/?url=
20
jzfgo

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

17
courtsimas

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

<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;
});
14
rharvey

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

<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ドキュメント から選んだものです。

お役に立てれば。

5
Mahesh

少しの試行錯誤の後、以下が私のために働いたものです。この応答は、@ rharveyの応答スレッドと別のスタックオーバーフローポストの組み合わせです。このソリューションはポップアップを開き、pinterestを介してコンテンツを共有します。

注：2つのウィンドウがポップアップしないようにするには、ターゲットを設定する必要があります。完全なソリューションは次のとおりです。

 <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" target= "pinIt">
    Custom Pin it image or text here!
</a> 

<script>
$('.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,"pinIt","toolbar=no, scrollbars=no, resizable=no, top=0, right=0, width=750, height=320");
    return false;
});
</script>
2
Michael Smith

完璧に機能します。あなたのスクリプト

 <script>
    function pinIt()
    {
      var e = document.createElement('script');
      e.setAttribute('type','text/javascript');
      e.setAttribute('charset','UTF-8');
      e.setAttribute('src','https://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);
      document.body.appendChild(e);
    }
    </script>

で呼び出す

<a href="javascript:pinIt();">Pin</a>
1
Mishka Alt