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

Understanding the Functions of Angular Providers and Implementing Them

Tips for properly styling the input type range element

Arranging HTML elements using JavaScript or jQuery

Encountered issue while attempting to perform search functionality in Datatable using the Moongose-Pagination-v2 plugin

What is the best way to capture a screenshot of a website using its URL?

The textbox is unable to receive input from the pop-up window

What is the best way to display DT elements next to each other?

Integrating a feature for displaying No Results Found

The updated version of Angular from 13 to 16 has implemented a new default value for primary colors

The use of DIV tags allows the element to be displayed in an inline

Tips on retrieving values from input files using jQuery

Struggling to align your image properly?

The :first selector examines the parent's parent as a reference point, rather than the immediate

What is the significance of the .jpg?t= in the URL?

Utilize itextsharp to transform HTML into PDF files

Is the condition failing to evaluate for all td elements?

Display a PHP warning message when attempting to add methods to ajax jQuery

The use of the display property with inline-block is not functioning correctly on mobile devices

What is the best way to display form input fields depending on the selected value?

Arranging two <ul> elements within an angular template