Social Sharing issues

I seem to be running into obstacles using social sharing in Hype, in particular Pinterest. I’m testing code I wrote in straight markup that is giving errors when I embed as innerHTML in hype.

Any thoughts?

Thanks.

B

My first thought is can we see what you are doing. ? :grinning:

Second is, is the code being truncated when you look back in the innerHTML?

Here is the code:

<img data-pin-description="blah blah" src="http://endgamesinteractive.com/img/menuDev/game1Landing.gif"/>
 <a data-pin-do="buttonPin" data-pin-media="http://endgamesinteractive.com/SJRDev/socialSharing/socialSharing.hyperesources/dwarf-kitten-lil-bub-cat-5_2x.jpg" data-pin-description="blah blah 2" data-pin-url="http://endgamesinteractive.com/SJRDev/socialSharing/socialSharing.hyperesources/dwarf-kitten-lil-bub-cat-5_2x.jpg"  href="https://www.pinterest.com/pin/create/button/"><img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_gray_20.png" /></a>

And this is the javascript included in the header:

<script type="text/javascript" async defer src="//assets.pinterest.com/js/pinit.js"></script>

I am wondering if it has issues being dynamically written. Facebook works fine but all the triggers are written in javascript.

Never used it before but did a quick test.

Just using,

<a data-pin-do="buttonPin" data-pin-media="http://endgamesinteractive.com/SJRDev/socialSharing/socialSharing.hyperesources/dwarf-kitten-lil-bub-cat-5_2x.jpg" data-pin-description="blah blah 2" data-pin-url="http://endgamesinteractive.com/SJRDev/socialSharing/socialSharing.hyperesources/dwarf-kitten-lil-bub-cat-5_2x.jpg" href="https://www.pinterest.com/pin/create/button/"><img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_gray_20.png"></a>

This worked as far as I can see…

Ok. This looks better.

You image needs to be between the <a><> tags and you need to include the button style attribute data-pin-custom="false" inside the <a> tag

data-pin-custom

If you set this, we won't touch any custom HTML or CSS you add for the button. Using a custom image will override all other button style attributes. Make sure that your custom Save buttons follow our brand guidelines.
See custom buttons for more information about using custom Save buttons. Add this attribute to your call to pinit.js to change all buttons on your page, or add this attribute to a single image to change the button only for that image.


Code:

<a data-pin-do="buttonPin" data-pin-custom="false" data-pin-media="http://endgamesinteractive.com/SJRDev/socialSharing/socialSharing.hyperesources/dwarf-kitten-lil-bub-cat-5_2x.jpg" data-pin-description="blah blah 2" data-pin-url="http://endgamesinteractive.com/SJRDev/socialSharing/socialSharing.hyperesources/dwarf-kitten-lil-bub-cat-5_2x.jpg" href="https://www.pinterest.com/pin/create/button/"><img data-pin-description="blah blah" width="50px" src="http://endgamesinteractive.com/img/menuDev/game1Landing.gif"></a>

Mark,

Where were you paste the code? I have it pasted in an innerHTML of a generic square element.
Won't work there but if I paste it outside of hype it works. Facebook is fine.

I put it in a normal Rectangle element innerHTML.

And did you have the js in the head?

I am seeing it overwrite the entire page instead of a popup.

http://endgamesinteractive.com/SJRDev/socialSharing2/

All I have is that snippet in there and nothing is popping up. It’s odd.

Ok I got it to work, but it needed to cache. That is weird.

And it does not work in safari as far as I can tell.

Will look again as soon as I get back to my Mac.

Ok,

I Initially had the same no popup and page replace when I got back to a Mac because I created the whole thing again and forgot to put in the head js link.

Any way here is a working version, which is pretty much the same as I did before.
Make sure you read the post 5

pinIt.hype.zip (87.0 KB)

And it works in my Safari 10.1

1 Like

Cheers Mark.