Hi Max.
How do I change the size of the buttons on just one instance of the Social Share Buttons widget on a Squarespace page (inside a Code block) — not across my website?
Thank you!
1 Like
Hi there @Rishad_Patel 
Our devs came up with a custom code that should be added to the Custom JS field on the Style tab:
const ICON_CONTAINER_SIZE = '100px';
const ICON_SIZE = '50px';
const PATHNAME = '/index.html' // example
const LISTEN_TYPES = {
one: {
select: (selector, root) => root.querySelector(selector),
validate: (node) => !!node
},
all: {
select: (selector, root) => root.querySelectorAll(selector),
validate: (node) => node?.length > 0
}
};
function listenStep(args) {
args.node = args.select(args.selector, args.root);
if (!args.validate(args.node)) {
args.step++;
if (args.step < args.limit)
setTimeout(() => {
listenStep(args);
}, args.delay);
else
args.reject();
}
else {
args.resolve(args.node);
}
}
async function asyncListenFor(selector, type = 'one', customArgs = {}) {
const args = {
root: document,
node: undefined,
selector,
delay: 100,
limit: 50,
step: 0,
select: LISTEN_TYPES[type].select,
validate: LISTEN_TYPES[type].validate,
...customArgs
};
if (type === 'one' || type === 'all') {
return new Promise((resolve, reject) => {
listenStep({ ...args, resolve, reject });
});
}
}
asyncListenFor('.elfsight-app-2a009412-52e1-4dba-8fbd-bd209df41422 .eapps-social-share-buttons-container').then((widgetContainer) => {
if(window.location.pathname === PATHNAME) {
const buttons = widgetContainer.querySelectorAll('.eapps-social-share-buttons-item');
const iconContainers = widgetContainer.querySelectorAll('.eapps-social-share-buttons-item-icon-container');
iconContainers.forEach(iconContainer => {
iconContainer.style.transform = 'translate(-50%, -50%)'
iconContainer.style.marginLeft = '0'
iconContainer.style.top = '50%'
iconContainer.style.left = '50%'
iconContainer.style.width = '100%'
iconContainer.style.height = '100%'
iconContainer.style.padding = '0'
iconContainer.style.display = 'flex'
iconContainer.style.justifyContent = 'center'
iconContainer.style.alignItems = 'center'
})
buttons.forEach(button => {
const svg = button.querySelector('svg');
button.style.width = ICON_CONTAINER_SIZE;
button.style.height = ICON_CONTAINER_SIZE;
svg.style.height = ICON_SIZE
svg.style.width = ICON_SIZE
})
}
}).catch(() => {});
ICON_CONTAINER_SIZE (1st line of the code) is the width and height of the button’s container.
ICON_SIZE (2nd line of the code) is the width and height of the white icons.
PATHNAME (3rd line of the code) is the path to the page without a domain.
Adjust this code for your case and let me know how it worked 
Hi @Max,
Thanks. But I don’t quite know what you mean by “the Custom JS field on the Style tab”.
Do you mean in the Squarespace interface? There’s a Custom CSS field and Code Injection fields for header and footer, but nothing for custom JS.
Would you have suggestions? Thanks!
1 Like
Sorry for being not clear enough!
You can find the Custom JS section in the widget’s settings:
Check it out and let me know how it worked 
Hi Chris,
Thanks so much for the context!
I just wanted to check - I want to change this on only one page of my Squarespace website (Splice Nano. Build a viable media company of one with AI) — not the rest of the website.
Is there a way for me to do that? Perhaps with the page-specific header code injection?
Thanks in advance!
Rishad
1 Like
Yes, this Custom JS code should work just for one page. I’ve added the path name to the code, so you need to adjust only the size of the icons and their container in the 1-2 lines of the code:
const ICON_CONTAINER_SIZE = '100px';
const ICON_SIZE = '50px';
const PATHNAME = '/nano';
const LISTEN_TYPES = {
one: {
select: (selector, root) => root.querySelector(selector),
validate: (node) => !!node
},
all: {
select: (selector, root) => root.querySelectorAll(selector),
validate: (node) => node?.length > 0
}
};
function listenStep(args) {
args.node = args.select(args.selector, args.root);
if (!args.validate(args.node)) {
args.step++;
if (args.step < args.limit)
setTimeout(() => {
listenStep(args);
}, args.delay);
else
args.reject();
}
else {
args.resolve(args.node);
}
}
async function asyncListenFor(selector, type = 'one', customArgs = {}) {
const args = {
root: document,
node: undefined,
selector,
delay: 100,
limit: 50,
step: 0,
select: LISTEN_TYPES[type].select,
validate: LISTEN_TYPES[type].validate,
...customArgs
};
if (type === 'one' || type === 'all') {
return new Promise((resolve, reject) => {
listenStep({ ...args, resolve, reject });
});
}
}
asyncListenFor('.elfsight-app-2a009412-52e1-4dba-8fbd-bd209df41422 .eapps-social-share-buttons-container').then((widgetContainer) => {
if(window.location.pathname === PATHNAME) {
const buttons = widgetContainer.querySelectorAll('.eapps-social-share-buttons-item');
const iconContainers = widgetContainer.querySelectorAll('.eapps-social-share-buttons-item-icon-container');
iconContainers.forEach(iconContainer => {
iconContainer.style.transform = 'translate(-50%, -50%)';
iconContainer.style.marginLeft = '0';
iconContainer.style.top = '50%';
iconContainer.style.left = '50%';
iconContainer.style.width = '100%';
iconContainer.style.height = '100%';
iconContainer.style.padding = '0';
iconContainer.style.display = 'flex';
iconContainer.style.justifyContent = 'center';
iconContainer.style.alignItems = 'center';
});
buttons.forEach(button => {
const svg = button.querySelector('svg');
button.style.width = ICON_CONTAINER_SIZE;
button.style.height = ICON_CONTAINER_SIZE;
svg.style.height = ICON_SIZE;
svg.style.width = ICON_SIZE;
});
}
}).catch(() => {});
Test it out and let me know if it worked
Max,
It works — thank you so much!
You’ve been so kind with your help.
Have a wonderful day (or night)!
Rishad
2 Likes
It wasn’t a problem at all
1 Like