Topic: Tyring to figure out if this is custom code or a plugin…

registriran
June 12, 2024 at 4:39 pm
Hi,

I will provide an example website in the Private field.

Said website has a permanent “Save” button showing in the upper left corner of each image they have in their blog posts.

I am trying to figure out if this is custom made or part of a plugin. I think I figured out what their social sharing plugin is (it’s the Hubbub social share plugin).

However, I went through the documentation of the plugin and:

1. Only the paid version seems to allow the “Save to Pinterest” button.
2. Going through the docs I did not see a feature for a permanent button on mobile as it is in the example site in the private field so I think it might be custom code.

So, I’m really bad at coding but I opened the example site’s source code, and using Ctrl + F “pin-it” I found they have a script for that and also some CSS related to it.

Here’s the script:
```
<script>
jQuery(function ($) {
    $(".single-post .single-content .wp-block-image img").each(function (index) {
            $(this).before('<a class="pin-it-button" href="http://pinterest.com/pin/create/button/?url='+window.location.href+'&media='+$(this).attr("src")+'&description=" rel="noopener" target="_blank" data-pin-do="buttonPin"></a>')
        });
});
</script>
```
… And the CSS you can see for yourself.

Can you please:

1. Tell me whether this comes from a plugin or custom code.
2. If custom code — can I replicate it on my site (link also in the private field).

Any help with this will be greatly appreciated.

Thanks
Alvind
June 12, 2024 at 6:19 pm

Hi there,

I’m not quite sure if the functionality is added using a plugin or custom code, but we can use and slightly modify it to make it work on your site.

But first, how did you add the images to your site? Looking at the source, it seems like it’s being rendered dynamically. I need to know so I can adjust the code accordingly.
registriran
June 12, 2024 at 8:38 pm

Hi, Alvind — that’s great

I simply upload them the classic way in the wordpress text editor. It’s probably one of my plugins that injects them dynamically.

Let me know how I can check what you need to know specifically?

Thanks

Alvind

June 12, 2024 at 10:54 pm

If the image was added dynamically, there is a possibility that the HTML structure of the image element changes, as the code you provided checks for a particular class of the element to add the Save button.

Not sure if this will work on your site, but you can try:

Create a new Hook element and add this code:

<script>
document.addEventListener("DOMContentLoaded", function() {
    var images = document.querySelectorAll(".single-post .wp-block-image img, .single-post .gb-block-image img, .single-post p[data-slot-rendered-content='true'] img, .single-post p img");
    images.forEach(function(img) {
        var a = document.createElement('a');
        a.className = 'pin-it-button';
        a.href = 'http://pinterest.com/pin/create/button/?url=' + window.location.href + '&media=' + img.src + '&description=';
        a.rel = 'noopener';
        a.target = '_blank';
        a.setAttribute('data-pin-do', 'buttonPin');
        img.parentNode.insertBefore(a, img);
    });
});
</script>

Hook: wp_footer, Location set to Post > All posts.

Then add this into Customize > Additional CSS:

.pin-it-button {
  position: absolute;
  z-index: 3;
  margin: 12px;
  font: 18px/35px "Arial";
  text-align: center;
  text-decoration: none;
  color: #fff !important;
  background: #e60023 url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMzBweCIgd2lkdGg9IjMwcHgiIHZpZXdCb3g9Ii0xIC0xIDMxIDMxIj48Zz48cGF0aCBkPSJNMjkuNDQ5LDE0LjY2MiBDMjkuNDQ5LDIyLjcyMiAyMi44NjgsMjkuMjU2IDE0Ljc1LDI5LjI1NiBDNi42MzIsMjkuMjU2IDAuMDUxLDIyLjcyMiAwLjA1MSwxNC42NjIgQzAuMDUxLDYuNjAxIDYuNjMyLDAuMDY3IDE0Ljc1LDAuMDY3IEMyMi44NjgsMC4wNjcgMjkuNDQ5LDYuNjAxIDI5LjQ0OSwxNC42NjIiIGZpbGw9IiNmZmYiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLXdpZHRoPSIxIj48L3BhdGg+PHBhdGggZD0iTTE0LjczMywxLjY4NiBDNy41MTYsMS42ODYgMS42NjUsNy40OTUgMS42NjUsMTQuNjYyIEMxLjY2NSwyMC4xNTkgNS4xMDksMjQuODU0IDkuOTcsMjYuNzQ0IEM5Ljg1NiwyNS43MTggOS43NTMsMjQuMTQzIDEwLjAxNiwyMy4wMjIgQzEwLjI1MywyMi4wMSAxMS41NDgsMTYuNTcyIDExLjU0OCwxNi41NzIgQzExLjU0OCwxNi41NzIgMTEuMTU3LDE1Ljc5NSAxMS4xNTcsMTQuNjQ2IEMxMS4xNTcsMTIuODQyIDEyLjIxMSwxMS40OTUgMTMuNTIyLDExLjQ5NSBDMTQuNjM3LDExLjQ5NSAxNS4xNzUsMTIuMzI2IDE1LjE3NSwxMy4zMjMgQzE1LjE3NSwxNC40MzYgMTQuNDYyLDE2LjEgMTQuMDkzLDE3LjY0MyBDMTMuNzg1LDE4LjkzNSAxNC43NDUsMTkuOTg4IDE2LjAyOCwxOS45ODggQzE4LjM1MSwxOS45ODggMjAuMTM2LDE3LjU1NiAyMC4xMzYsMTQuMDQ2IEMyMC4xMzYsMTAuOTM5IDE3Ljg4OCw4Ljc2NyAxNC42NzgsOC43NjcgQzEwLjk1OSw4Ljc2NyA4Ljc3NywxMS41MzYgOC43NzcsMTQuMzk4IEM4Ljc3NywxNS41MTMgOS4yMSwxNi43MDkgOS43NDksMTcuMzU5IEM5Ljg1NiwxNy40ODggOS44NzIsMTcuNiA5Ljg0LDE3LjczMSBDOS43NDEsMTguMTQxIDkuNTIsMTkuMDIzIDkuNDc3LDE5LjIwMyBDOS40MiwxOS40NCA5LjI4OCwxOS40OTEgOS4wNCwxOS4zNzYgQzcuNDA4LDE4LjYyMiA2LjM4NywxNi4yNTIgNi4zODcsMTQuMzQ5IEM2LjM4NywxMC4yNTYgOS4zODMsNi40OTcgMTUuMDIyLDYuNDk3IEMxOS41NTUsNi40OTcgMjMuMDc4LDkuNzA1IDIzLjA3OCwxMy45OTEgQzIzLjA3OCwxOC40NjMgMjAuMjM5LDIyLjA2MiAxNi4yOTcsMjIuMDYyIEMxNC45NzMsMjIuMDYyIDEzLjcyOCwyMS4zNzkgMTMuMzAyLDIwLjU3MiBDMTMuMzAyLDIwLjU3MiAxMi42NDcsMjMuMDUgMTIuNDg4LDIzLjY1NyBDMTIuMTkzLDI0Ljc4NCAxMS4zOTYsMjYuMTk2IDEwLjg2MywyNy4wNTggQzEyLjA4NiwyNy40MzQgMTMuMzg2LDI3LjYzNyAxNC43MzMsMjcuNjM3IEMyMS45NSwyNy42MzcgMjcuODAxLDIxLjgyOCAyNy44MDEsMTQuNjYyIEMyNy44MDEsNy40OTUgMjEuOTUsMS42ODYgMTQuNzMzLDEuNjg2IiBmaWxsPSIjZTYwMDIzIj48L3BhdGg+PC9nPjwvc3ZnPg==) 3px 50% no-repeat;
  -webkit-font-smoothing: antialiased;
  border-radius: 30px;
  width: auto;
  background-position-x: 9px;
  background-size: 20px 20px;
  text-indent: 34px;
  font-weight: 700;
  padding: 4px 15px 4px 4px;
  cursor: pointer;
  display: inline-block;
  box-sizing: border-box;
  box-shadow: inset 0 0 1px #888;
  vertical-align: baseline;
  opacity: 1;
  transition: none;
}

.pin-it-button:after {
  content: 'Save';
  color: #fff;
}

Make sure to remove the current Save button that you applied to the images on the site first.

registriran
June 13, 2024 at 6:17 am

So I did all of that and nothing happened.

Then I read some on why my images may be served dynamically and came across this: https://wordpress.org/support/topic/why-is-wordpress-setting-high-fetch-priority-on-images/

Turns out WordPress is doing it so that the images are better optimized for LCP and Core web vitals.

I used the code provided in the last reply in the thread I linked to remove the “fetchpriority” function completely (did not remove the lazy loading).

Not sure if this would be helpful.

Will it be easier to implement the button now?

Thanks
Alvind
June 13, 2024 at 5:39 pm

Do you happen to have a test site that I can log into and test this out?
registriran
June 14, 2024 at 4:42 am

Hmmm, what kind of user permissions would you need for this?
Ying
June 14, 2024 at 8:31 am

Admin role, please.
registriran
June 14, 2024 at 9:36 am

Alright, provide me with an email for the credentials.

Thanks
Ying
June 14, 2024 at 10:43 am

You can use any email like [email protected], WP does not check it.
registriran
June 14, 2024 at 12:14 pm

Okay, I’m leaving a temporary link with the credentials in the private field, and also the name of the test site.

Let me know if there’s anything else I need to do.

Thanks
registriran
June 14, 2024 at 12:31 pm

Also, could you please tell me exactly what you did, so that I can implement this on my other site?

Thanks
Alvind
June 15, 2024 at 7:14 am

So I just implemented the code I provided here on the test site, and it works. You can see it within the blog posts.

I cannot guarantee this will work on your other site because the img element in the DOM needs to be certain, as we need to target those within the JS code.
registriran
June 15, 2024 at 7:55 am

Hi Alvind,

I confirm it’s working — this is amazing work!

I implemented it on my original site as well and it’s working there too!

Since I want to express my gratitude adequately I literally Googled “how to compliment software engineers” just for this, tweaked it a bit, and ended up with this:

Your implementation of the code was timely and effective with attention to detail and in-depth understanding of the assignment. I particularly appreciated how you guys were actively brainstorming different approaches and came up with a working solution to implement the Save button exactly how I wanted it. Your creative problem-solving skills really show!

So thanks a bunch!
Alvind
June 16, 2024 at 5:36 pm

Glad to hear that, and I appreciate the compliment! 😀

Viewing 15 posts - 1 through 15 (of 15 total)

You must be logged in to reply to this topic.

Are you a GenerateCustomer?

Just browsing?

Tyring to figure out if this is custom code or a plugin…