0

I have been trying to use jQuery to update the links in a generated Pinterest Profile Widget. The code was generated for my clients website via Pinterest.

This is the code that is embedded:

<a data-pin-do="embedUser" href="http://www.pinterest.com/aliceandlois/" data-pin-scale-width="155" data-pin-scale-height="130" data-pin-board-width="985"></a>

The code it then generates like this:

<a class="PIN_1425163222617_embed_grid_th" title="Pom Pom Wall Hanging &mdash; Simple to make and so cute!" data-pin-href="//www.pinterest.com/pin/452963674997848977/repin/x/" data-pin-id="452963674997848977" data-pin-log="embed_user_thumb" style="height: 130px; width: 155px; top: 0px; left: 0px;"><img src="http://media-cache-ak0.pinimg.com/237x/cd/4d/74/cd4d749b360486b0fd4706f1a068c5ce.jpg" data-pin-nopin="true" class="PIN_1425163222617_embed_grid_img" alt="Pom Pom Wall Hanging &amp;#8212; Simple to make and so cute!" style="height: 232.173px; width: 155px; min-height: 232.173px; min-width: 155px; margin-top: -116.086px;"></a>

What I am trying to do is update the URL in "data-pin-href" to remove the "repin/x/" part of the URL, so that it reads for example, //www.pinterest.com/pin/452963674997848977/ instead of //www.pinterest.com/pin/452963674997848977/repin/x/

This needs to be done automatically for every single image in the widget (there are 20).

I have tried using the tutorial posted at How to change the href for a hyperlink using jQuery in order to accomplish this, however, I haven't been able to get it working with the data-pin-href attribute instead of the standard href.

I also found this jSFiddle that I thought might help me, so I modified the code as nessesary but still had no joy: http://jsfiddle.net/TexasBrawler/uQd9h/1/

Can anyone help me with a working solution for this?

Thanks

EDIT: Been doing further research on how to solve this but still no joy. I have referenced the following links in attempts for a solution:

How to set data attributes in HTML elements

JQuery updating data- attribute

Updating the value of data attribute using jQuery

Community
  • 1
  • 1
Zach Nicodemous
  • 9,097
  • 9
  • 45
  • 68

1 Answers1

0

I have managed to solve the problem myself after a few more attempts.

The initial version of the final code I tried was this:

$('.pinterest-block a[data-pin-href]').each(function(){
    var newurl = $(this).attr('data-pin-href').replace('repin/x/','');
    $(this).attr('data-pin-href', newurl);
});

While this worked in my tests on jSFiddle, I was confused that it was not working when attempted on the live code.

I determined that the problem was somewhat with the Pinterest script file which you have to embed in your code: <script type="text/javascript" src="//assets.pinterest.com/js/pinit.js"></script>

Their script runs when the document is ready and replaces: 

<a data-pin-do="embedUser" href="http://www.pinterest.com/aliceandlois/" data-pin-scale-width="155" data-pin-scale-height="130" data-pin-board-width="985"></a>

....with the output data.

My code was also being run on document ready, so in effect, it was trying to update something that wasn't even there yet (I think....).

Therefore, I solved the issue by slightly delaying the execution of my code:

window.setTimeout(function (){
        $('.pinterest-block a[data-pin-href]').each(function(){
            var newurl = $(this).attr('data-pin-href').replace('repin/x/','');
            $(this).attr('data-pin-href', newurl);
        });
    }, 1500);

This solves the issue as the data-pin-href now updates as I wanted.

If anyone has a more streamlined version of my solution, please feel free to post it, however, I don't believe it can be condensed any further.

JSFiddle: http://jsfiddle.net/fBW4V/14/

Zach Nicodemous
  • 9,097
  • 9
  • 45
  • 68