Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • April 1, 2015 at 4:58 pm #422020
    mustafaturksavas

    Hi,
    I added a pinterest follow button to my website and it needs to use pinit.js (assets.pinterest.com/js/pinit.js)/ But when it is loaded, Social Share Button for Pinterest looks like a regular pinit button (Screenshot). Is there a way to fix this?

    April 1, 2015 at 5:02 pm #422025
    Yigit

    Merhabalar!

    Can you please post the link to your website?

    Cheers!
    Yigit

    April 1, 2015 at 5:06 pm #422030
    mustafaturksavas

    Hi Yigit,
    I’m working on the website locally. Can you tell me what parts you need to take a look at? When I make a text widget and call this <script type="text/javascript" async defer src="//assets.pinterest.com/js/pinit.js"></script> there, what you see in the screenshot happens.

    April 2, 2015 at 1:33 pm #422455
    Ismael

    Hi!

    The script change the social share markup. It removes the data-av_icon attribute which contains the pinterest icon. You can create another pinterest icon image then set it as background:

    li.av-share-link.av-social-link-pinterest {
  background: url('pinterest-icon-here.png');
  background-position: center center;
  background-repeat: no-repeat;
}

li.av-share-link.av-social-link-pinterest a {
  background: none !important;
}

    Best regards,
    Ismael

    April 3, 2015 at 12:27 am #422835
    mustafaturksavas

    Hi Ismael,

    Thanks for the reply. But I don’t want to create another pinterest icon, I want to use the Social Share Button. Can’t we adjust the css so that it uses the same icon from entype-fontello?

    April 3, 2015 at 12:53 am #422842
    Josue

    Hi!

    No, it’s not possible because the Pin javascript totally changes the markup of the share button. You’d need to look for another methods:
    http://stackoverflow.com/a/11212220

    Cheers!
    Josue

    April 3, 2015 at 1:02 am #422846
    mustafaturksavas

    Hi Joshue,

    I wish you would’ve read my problem before replying. Since I don’t want to use a pin it button but trying to get rid of it. I have to call pinit.js for the follow button. And all I want to do is, to be able to use Social Share Button as it is, not with a different look. Can you guys provide me a fix, so I can use your team as I’m suppose to? Or you will say, your Social Share Button can’t be fixed when pinit.js is used. If so, don’t you think it’s a problem, since pinit.js usage is common?

    April 3, 2015 at 2:38 am #422859
    Josue

    Hello Mustafa,

    Please note that we’re not ‘supposed’ to fix third-party script’s conflicts with the theme (see support scope here).

    That being said, i tried reproducing your issue on my local install and saw what was causing it. The problem is, it’s not really possible to fix it as we can’t alter the pinit.js script from our ends. However, i found a workaround:

    1. Place the Pinterest follow button code on an empty HTML file somewhere on your server.
    2. Now on the Text Widget, you’ll embed that HTML file using an iframe:

    <iframe src="_URL_TO_HTML_FILE_HERE_" style="height: 37px; border: 0;"></iframe>

    That way, pinit.js won’t affect the Enfold markup.

    Cheers!
    Josue

    May 5, 2015 at 4:18 pm #439799
    mustafaturksavas

    Hi Josue,

    Thanks for the answer. It fixed my problem, but I wasn’t able to close the post. You can mark it as solved.

    May 5, 2015 at 4:23 pm #439802
    Josue

    You are welcome, glad to help :)

    Best regards,
    Josue

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Pinit.js Overrides Social Share Button Styling’ is closed to new replies.