Jump to content

Looking for a way to insert code into blog post excerpts

Go to solution Solved by tuanphan,

Recommended Posts

As a style blogger, I love the idea of quick shoppable links, so I want to find a way to insert code after my blog post excerpts, OR ideally, be able to just paste my code (it's a javascript code) directly into the excerpt itself in order to display a "shop the post" widget carousel of affiliate products from my LTK. (I pasted the code into one of my blog post excerpts here for reference: https://www.neutrallynicole.com/blog-ltk — obviously it shows up as text but I would like it to show the actual widget) I've attached screenshots of what I have now vs. what I would like to to look like using custom code. My site is currently on 7.0 but I will be switching to 7.1 within the next month.

I see a lot of bloggers on WP that have this sort of plugin and I can't find a way to replicate it for Squarespace so I would love to find someone who is capable of creating this sort of function for me (I will pay you of course!). Thanks so much in advance! 🙂 

Screenshot 2024-02-09 at 9.23.53 AM.png

Screenshot 2024-02-09 at 9.24.55 AM.png

Edited by NicoleN
Link to comment
  • Replies 16
  • Views 2.5k
  • Created
  • Last Reply

Top Posters In This Topic

On 2/11/2024 at 7:16 AM, tuanphan said:

Can you paste widget code here + share link to your site?

Sure!

This is the link to my site: https://www.neutrallynicole.com. I was testing the idea on a separate non-linked blog here: https://www.neutrallynicole.com/blog-ltk

Here is the widget code:

<div class="shopthepost-widget" data-widget-id="5042831"><script type="text/javascript">!function(w,i,d,g,e,t){d.getElementById(i)||(element=d.createElement(t),element.id=i,element.src="https://widgets.rewardstyle.com"+e,d.body.appendChild(element)),w.hasOwnProperty(g)===!0&&"complete"===d.readyState&&w[g].init()}(window,"shopthepost-script",document,"__stp","/js/shopthepost.js","script")</script><div class="rs-adblock"><img src="https://assets.rewardstyle.com/production/35d334331b834e6e41e4f03813372a832b67c146/images/search/350.gif" onerror='this.parentNode.innerHTML="Disable your ad blocking software to view this content."' style="width: 15px; height: 15px"><noscript>JavaScript is currently disabled in this browser. Reactivate it to view this content.</noscript></div></div>

Link to comment

First, to make it works, you can use this code to bottom of Code Injection > Footer

<script>
$(document).ready(function(){
  $(".summary-excerpt.summary-excerpt-only p").each(function(){
    $(this).html($(this).text());
  });
});
</script>

To make it show more images, try this code to Custom CSS box

/* Slide image in excerpt */
.stp-product {
    width: 80px !important;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 2/23/2024 at 11:33 PM, tuanphan said:

First, to make it works, you can use this code to bottom of Code Injection > Footer

<script>
$(document).ready(function(){
  $(".summary-excerpt.summary-excerpt-only p").each(function(){
    $(this).html($(this).text());
  });
});
</script>

To make it show more images, try this code to Custom CSS box

/* Slide image in excerpt */
.stp-product {
    width: 80px !important;
}

 

The code worked for 7.0, but is there a way to make this work for 7.1? I'm going to switch my site to 7.1 next month and didn't realize that the code wouldn't work for the new version.

Here's the link to a new 7.1 demo site where I tried to test it: https://primrose-raccoon-9ycp.squarespace.com/?password=demo

Apologies!

Link to comment
On 3/2/2024 at 12:09 AM, tuanphan said:

Add this line to top of Code Injection Footer code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>

 

Perfect! Thanks again Tuan! You're the best! 🙂

Link to comment
  • 6 months later...

I am lookng for this solution too!

heres the blog page: https://www.villagewellness.net/holistic-integrative-medicine-main-line-philly

I want to add the code to the excerpt of the first page for acupuncture instead of the "book now" link - any suggestion would be amazing! thanks!

heres the code: <a href="https://app.acuityscheduling.com/schedule.php?owner=13550625&appointmentType=category:Acupuncture" target="_blank" class="acuity-embed-button" style="background: #b668bd; color: #fff; padding: 8px 12px; border: 0px; -webkit-box-shadow: 0 -2px 0 rgba(0,0,0,0.15) inset;-moz-box-shadow: 0 -2px 0 rgba(0,0,0,0.15) inset;box-shadow: 0 -2px 0 rgba(0,0,0,0.15) inset;border-radius: 4px; text-decoration: none; display: inline-block;">Schedule Appointment</a>
<link rel="stylesheet" href="https://embed.acuityscheduling.com/embed/button/13550625.css" id="acuity-button-styles" />
<script src="https://embed.acuityscheduling.com/embed/button/13550625.js" async></script>

Link to comment
1 hour ago, bewell said:

I am lookng for this solution too!

heres the blog page: https://www.villagewellness.net/holistic-integrative-medicine-main-line-philly

I want to add the code to the excerpt of the first page for acupuncture instead of the "book now" link - any suggestion would be amazing! thanks!

heres the code: <a href="https://app.acuityscheduling.com/schedule.php?owner=13550625&appointmentType=category:Acupuncture" target="_blank" class="acuity-embed-button" style="background: #b668bd; color: #fff; padding: 8px 12px; border: 0px; -webkit-box-shadow: 0 -2px 0 rgba(0,0,0,0.15) inset;-moz-box-shadow: 0 -2px 0 rgba(0,0,0,0.15) inset;box-shadow: 0 -2px 0 rgba(0,0,0,0.15) inset;border-radius: 4px; text-decoration: none; display: inline-block;">Schedule Appointment</a>
<link rel="stylesheet" href="https://embed.acuityscheduling.com/embed/button/13550625.css" id="acuity-button-styles" />
<script src="https://embed.acuityscheduling.com/embed/button/13550625.js" async></script>

You mean this item only?

image.png.68856b3e3bbc3ae6bb90b6ff1d0a1ad6.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 10/8/2024 at 12:24 AM, bewell said:

yes - well i want to add to every blog - but the code will be slightly different

I just tested it on my test site, you try checking to see if it is what you want

https://www.loom.com/share/da4cf566542048dd903dfb8bdef21e9a

Process

Add this code to Blog Page Header Injection

<a href="https://app.acuityscheduling.com/schedule.php?owner=13550625&appointmentType=category:Acupuncture" target="_blank" class="acuity-embed-button" style="background: #b668bd; color: #fff; padding: 8px 12px; border: 0px; -webkit-box-shadow: 0 -2px 0 rgba(0,0,0,0.15) inset;-moz-box-shadow: 0 -2px 0 rgba(0,0,0,0.15) inset;box-shadow: 0 -2px 0 rgba(0,0,0,0.15) inset;border-radius: 4px; text-decoration: none; display: inline-block;">Schedule Appointment</a>
<link rel="stylesheet" href="https://embed.acuityscheduling.com/embed/button/13550625.css" id="acuity-button-styles" />
<script src="https://embed.acuityscheduling.com/embed/button/13550625.js" async></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
  $('article.blog-basic-grid--container.entry.blog-item:first-child').on('click', function(event) {
    event.preventDefault(); // Ngăn chặn hành động mặc định nếu cần
    $('.acuity-embed-button')[0].click(); // Kích hoạt popup của nút
  });
});

</script>
<style>
.acuity-embed-button {
    z-index: 999999999999999999999;
    position: fixed;
  opacity: 0;
}
</style>

image.thumb.png.a968835ea84cc2dcb3b5231359bf9e67.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 10/9/2024 at 8:05 PM, bewell said:

wow Tuan - close! thank you!!  But i want just the "Book Now" to link to the scheduler. any thoughts?

Use this new code

<a href="https://app.acuityscheduling.com/schedule.php?owner=13550625&appointmentType=category:Acupuncture" target="_blank" class="acuity-embed-button" style="background: #b668bd; color: #fff; padding: 8px 12px; border: 0px; -webkit-box-shadow: 0 -2px 0 rgba(0,0,0,0.15) inset;-moz-box-shadow: 0 -2px 0 rgba(0,0,0,0.15) inset;box-shadow: 0 -2px 0 rgba(0,0,0,0.15) inset;border-radius: 4px; text-decoration: none; display: inline-block;">Schedule Appointment</a>
<link rel="stylesheet" href="https://embed.acuityscheduling.com/embed/button/13550625.css" id="acuity-button-styles" />
<script src="https://embed.acuityscheduling.com/embed/button/13550625.js" async></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
  $('article.blog-basic-grid--container.entry.blog-item:first-child .blog-excerpt').on('click', function(event) {
    event.preventDefault(); // Ngăn chặn hành động mặc định nếu cần
    $('.acuity-embed-button')[0].click(); // Kích hoạt popup của nút
  });
});

</script>
<style>
.acuity-embed-button {
    z-index: 999999999999999999999;
    position: fixed;
  opacity: 0;
}
</style>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 10/13/2024 at 8:27 PM, bewell said:

got it. thanks so much! now how can i do that for every book now button - so it pops up to a different schedule for that specific service?

Do you have 3 or 4 different schedule code? I can test again easier, I think with 1 code, maybe won't work properly

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.