Personalized Pinterest button to link to a custom URL (Text Link, Image, or Both)

Question

Personalized Pinterest button to link to a custom URL (Text Link, Image, or Both)

I've been searching for a solution without success. I'm looking to customize the image for my Pinterest (Pin It) button and pin a specific image by URL, not just the current page.

Here is the custom link I created:

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

Although I set the background image in the style, I only see the default Pin It button and not my custom one.

I've come across some solutions where you can customize the button image for Pin It, but they don't allow me to change the media={ImageURL} parameter.

One popular solution involves:

<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>

Unfortunately, this method doesn't work for me. Does anyone have a solution?

html css pinterest

Answer 1

Answer №1

Jeremy Mansfield offers a fantastic solution on www.brandaiddesignco.com that allows you to customize the Pinterest button in any way you desire!

I have created three examples using jsFiddle to demonstrate how this can be achieved with his method.

References: jsFiddle Text-Link method
jsFiddle Custom Logo method
jsFiddle Custom Logo and Image method

For more information about Pinterest, feel free to check out my other SO Answer.

Answer 2

Jeremy Mansfield offers a fantastic solution on www.brandaiddesignco.com that allows you to customize the Pinterest button in any way you desire!

I have created three examples using jsFiddle to demonstrate how this can be achieved with his method.

References: jsFiddle Text-Link method
jsFiddle Custom Logo method
jsFiddle Custom Logo and Image method

For more information about Pinterest, feel free to check out my other SO Answer.

Answer 3

Answer №2

To prevent Pinterest's JS from taking over the link, try adding an encoded whitespace before the last fragment of the URL:

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

Update:

It looks like the previous solution is no longer effective. Here's an alternative approach:

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

Answer 4

To prevent Pinterest's JS from taking over the link, try adding an encoded whitespace before the last fragment of the URL:

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

Update:

It looks like the previous solution is no longer effective. Here's an alternative approach:

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

Answer 5

Answer №3

To simplify, utilize the existing

'http://pinterest.com/pin/create/button/?url='

path and add your variables without incorporating any pinterest javascript. By customizing your link with an embedded image (or background image) and excluding the pinterest js, you can prevent their button from replacing the link. Set the target to open in a new window for a seamless experience.

Answer 6

To simplify, utilize the existing

'http://pinterest.com/pin/create/button/?url='

path and add your variables without incorporating any pinterest javascript. By customizing your link with an embedded image (or background image) and excluding the pinterest js, you can prevent their button from replacing the link. Set the target to open in a new window for a seamless experience.

Answer 7

Answer №4

Here is an example of a custom link/button design:

<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">
    Insert your custom Pin it image or text here!
</a>

Note: Encoding the data attributes like I did with data-image may not be necessary, but it doesn't seem to cause any issues.

JQuery functionality:

$('.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;
});

Answer 8

Here is an example of a custom link/button design:

<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">
    Insert your custom Pin it image or text here!
</a>

Note: Encoding the data attributes like I did with data-image may not be necessary, but it doesn't seem to cause any issues.

JQuery functionality:

$('.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;
});

Answer 9

Answer №5

Here's a tip that really worked for me :

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

I learned about the data-pin-custom attribute from the Pinterest documentation.

Give it a try and hopefully it helps you too.

Answer 10

Here's a tip that really worked for me :

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

I learned about the data-pin-custom attribute from the Pinterest documentation.

Give it a try and hopefully it helps you too.

Answer 11

Answer №6

After experimenting and testing different approaches, I finally found a solution that worked for me. This method combines insights from @rharvey's response thread and another helpful stack overflow post. The result is a code snippet that triggers a pop-up window for sharing content on Pinterest.

Important Note: To avoid multiple pop-up windows, it's essential to specify a target in the code. Here is the complete solution:

 <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>

Answer 12

After experimenting and testing different approaches, I finally found a solution that worked for me. This method combines insights from @rharvey's response thread and another helpful stack overflow post. The result is a code snippet that triggers a pop-up window for sharing content on Pinterest.

Important Note: To avoid multiple pop-up windows, it's essential to specify a target in the code. Here is the complete solution:

 <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>

Answer 13

Answer №7

This solution works perfectly for me. The provided script

 <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>

To use it, simply call

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

Answer 14

This solution works perfectly for me. The provided script

 <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>

To use it, simply call

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

Personalized Pinterest button to link to a custom URL (Text Link, Image, or Both)

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Similar questions

If the first dropdown menu has a sub-element, then the user should be able to select the same value in the second dropdown menu using jQuery

Using PHPMailer in conjunction with a textarea form and HTML

Tips for incorporating a Font Awesome icon <i> within a select dropdown and customizing its appearance

What steps can I take to have the text extend beyond the background at both the top and bottom edges?

Ways to navigate a div within an iframe that has been loaded

Tally the quantity of data points within jQuery Datatables

Prevent the parent component's ripple effect from being activated by the child component

Please indicate the maximum number of digits allowed after the decimal point in the input

Encountered a glitch during the npm installation process for mui core

Struggling to insert a high-quality image into inline divs of exactly 33.3333% width

Customizing a responsive background image within a div using Bootstrap 3

Switching CSS styles - seeking a smoother integration

Aligning items in the header bar with floating <li> elements

pictures showcased in a grid that dance and sway

Display the item with jQuery once the CSS generated by jQuery has finished loading

What could be causing my form to not be centered on the screen?

Verifying file types with HTML5 drag and drop feature

Using JavaScript, add a complex JSON record to a JSON variable by pushing it

Applying custom CSS designs to images using Thymeleaf

iOS is not recognizing the <a> tag but is instead honoring the :hover property