Can't add Shopstyle widget in my blog post?

  • brownkittycat · Member ·

    Hi there,

    I would like to know if there’s any way to add this code into my blog post and have it shows up as a widget? I tried it and just a bunch of codes are showing up. I tried using it in those text side widget but it doesn’t work either. Please help! Thanks!

    Here’s the html code:

    <!– COLLECTIVE WIDGET CODE START –>

    !function(doc,s,id){ var e, p, cb; if(!doc.getElementById(id)) { e = doc.createElement(s); e.id = id; cb = new Date().getTime().toString(); p = ‘//shopsensewidget.shopstyle.com/widget-script.js?cb=1489220636592?cb=’ + cb; e.src = p; doc.body.appendChild(e); } if(typeof window.ss_shopsense === ‘object’){ if(doc.readyState === ‘complete’){ window.ss_shopsense.init(); } } }(document, ‘script’, ‘shopsensewidget-script’); //shopsensewidget.shopstyle.com/#/?options=%7B%22widgetId%22%3A%2258c3bf6ae7055ab5027a04b5%22%2C%22version%22%3A1%2C%22pid%22%3A%22uid2225-38060665-14%22%2C%22size%22%3A180%2C%22columns%22%3A3%2C%22rows%22%3A1%2C%22url%22%3A%22https%3A%2F%2Fapi.shopstyle.ca%2Fapi%2Fv2%22%2C%22iframeHeight%22%3A255%2C%22iframeWidth%22%3A645%7D

    <!– COLLECTIVE WIDGET CODE END –>

    The blog I need help with is: (visible only to logged in users)

  • staff-doublebassd · Staff ·

    Hi there,

    iframes are not supported on WordPress.com for security reasons, so if you put the iframe on your post/page, only an hyperlink will be displayed.

    Our support page explains what code is and is not allowed to be used on WordPress.com:

    Add Code to Your Site

    Hope this helps!

  • brownkittycat · Member ·

    @staff-doublebassd awww that sucks! So there’s no exception although this code is harmless? :(

  • brownkittycat · Member ·

    @staff-doublebassd What about this code here? Thanks!

    <!– COLLECTIVE WIDGET CODE START –> <div class=”sc-look-widget” data-options=”%7B%22frameUrl%22%3A%22%2F%2Fshopsensewidget.shopstyle.com%2Flook-widget%2Findex.html%3Fwidgetid%3D58c51888be7a4416f0a8a271%22%7D”> <script> !function(doc,s,id){ var e, p, cb; if(!doc.getElementById(id)) { e = doc.createElement(s); e.id = id; cb = new Date().getTime().toString(); p = ‘//shopsensewidget.shopstyle.com/look-widget-script/assets/build/look-widget-script.js?cb=’ + cb; e.src = p; doc.body.appendChild(e); } if(typeof window.scLookWidget === ‘object’){ if(doc.readyState === ‘complete’){ window.scLookWidget.init(); } } }(document, ‘script’, ‘sc-look-widget-script’); </script> </div> <!– COLLECTIVE WIDGET CODE END –>

  • staff-doublebassd · Staff ·

    We do not all script tags either.

    WordPress.com is set up to not accept any outside code that doesn’t cause a potential security risk. If you want to be able to use that code, created a self-hosted WordPress.org site is the better bet.

    Let me know if you have any questions. Thanks!

  • brownkittycat · Member ·

    @staff-doublebassd Thanks for your reply. I understand iframes & script tags are not allowed on wordpress.com. Are there any other ways to create a widget without using iframes or script tags? Sorry if it’s a stupid question. I’m not too familiar with coding! Thank you for helping!

  • timethief · Member ·

    Hi there,
    That widgets is an e commerce widget that cannot be used on any wordpress.COM hosted site.

    If you want ecommerce service shopping carts/online store you need to move to a self hosted WordPress site https://move.wordpress.com

    Please be aware that there is no secure payments system here at wordpress.COM and you cannot add a shopping cart to sites hosted by wordpress.COM regardless of upgrades.

    E-commerce options have been removed here at WordPress.COM. Secure payment systems are not available here at wordpress.COM. You need a wordpress.ORG install. Please read this https://en.forums.wordpress.com/topic/e-commerce-22?replies=17#post-2575955

    There is no FTP access to any wordpress.com sites. WordPress.com sites have some built in plugins http://en.support.wordpress.com/plugins/. However, if you are reading anything that makes you think that we bloggers can install plugins, advertising, custom themes or third party themes on sites hosted by wordpress.COM, then you are mistaken/misinformed. We have never had that ability. You are confusing wordpress.COM hosted blogs and wordpress.ORG installs on paid hosting.

    Provided you are selling only what you yourself make or a providing service that you personally provide on a wordpress.COM site, or you are asking for donations you have two options.

    (1) PayPal – Know that the only instructions that will work for posting a PayPal donation button on a WordPress.com blog are found here http://en.support.wordpress.com/paypal/
    Note that the PayPal email link is not supported and PayPal customization options are not supported either https://en.forums.wordpress.com/topic/paypal-button-41?replies=12#post-2517229 This is not likely to be changed any time soon, if at all.

    Some bloggers create a contact form https://en.support.wordpress.com/contact-form/ on a page and after the people have made a PayPal donation they provide the link to a private page for downloading files. Maybe that will work for you.
    http://en.support.wordpress.com/pages/
    http://en.support.wordpress.com/pages/page-visibility/

    (2) If you set up an eCommerce site somewhere else online you can create a custom menu http://en.support.wordpress.com/menus/ and include a custom link to that site in it. http://en.support.wordpress.com/menus/#adding-custom-links

    If what I provided above at (1) and (2) do not suit you, then this guide will explain how to move your WordPress.com site to another hosting platform: Moving to Self-Hosted WordPress where you can set up a secure payment system http://move.wordpress.com

  • staff-doublebassd · Staff ·

    As @Timethief mentioned, what you are looking for is more suited for the self-hosted version of WordPress, WordPress.org.

    I would recommend purchasing hosting and installing WordPress so that you can use the Shopstyle widget and not be restricted by any code limitations on our end.

    Hope this helps.

  • brownkittycat · Member ·

    OK thank you then @staff-doublebassd and @timethief

    I wish I know about this before signing up with wordpress.com because it’s complicated self hosting at wordpress.org….

  • brownkittycat · Member ·

    @staff-doublebassd

    Sorry to be annoying but can a iframe or script code be converted to a clickable image instead of a widget on a blog post? I recall seeing someone being able to post a clickable image on their blog post and they’re using wordpress.com.

    Thank you!

  • supernovia · Staff ·

    Hi @brownkittycat, you certainly could create an image that people can click to reach your shopstyle page. You can use the image widget, or the HTML widget to write your own code as long as it doesn’t have an iframe.

    If you need more help, upload an image and send its link, and also send the link to your page.

  • brownkittycat · Member ·

    @supernovia Thank you so much for sending me info on how to create a clickable image widget! I figured out how to do that now on my page as well as in my blog post! Thank you again!

  • brownkittycat · Member ·

    @supernovia

    Hi again, so I figured out how to add a clickable image. Can you tell me how to place the images side by side with each other in my blog post instead of on top of each other?

    Also for the image widget on the side bar/menu, guess I can only place one image?

    Thank you so much for your help!

  • supernovia · Staff ·

    Also for the image widget on the side bar/menu, guess I can only place one image?

    That’s right, but you can use the HTML widget to add more images if needed.

    If you’re having trouble with a post, send a link and I’ll take a look. :)

  • brownkittycat · Member ·

    @supernovia I noticed the images aren’t clickable on the wordpress mobile app. And one of the images, the size is much bigger than when looking at it on the browser.

    Here’s the post. The 3rd image at the bottom of the post is much bigger compared to the rest if you look at it on the app.
    https://brownkittycat.wordpress.com/2017/03/12/suede-moto-jacket/

    Thank you!

  • supernovia · Staff ·

    Try to make sure the images are all the same height. Don’t worry about the width since they are different shapes.

    Right now your code specifies a height and width of 70 for each image, which may work if they were square. But they aren’t, so just specify the height (maybe a little bigger than 70?) and let the width be. I hope that helps :)

  • brownkittycat · Member ·

    @supernovia

    I did try to adjust the height but the image size doesn’t change unless I alter the width too. Right now when I look at it on the phone app or mobile browser, the sizes are about the same. On the desktop, the 3rd image is smaller than the rest. :(

    So is it normal that the images are not clickable (not directing to the specific link) on the phone app?

    Thank you!

  • supernovia · Staff ·

    Try setting the height to whatever and the width to auto.

    Also re: links not working on mobile, are you talking about the links in that post or something else?

  • brownkittycat · Member ·

    @supernovia

    The clickable images are not directed to the shopstyle page on the mobile app when I click on them. But it’s fine on both desktop and mobile browsers. Thanks.

  • supernovia · Staff ·

    The links work fine on my phone. Here is the HTML I would use:

    <a href="https://api.shopstyle.com/action/apiVisitRetailer?id=541648245&site=www.shopstyle.ca&pid=uid2225-38060665-14" target="_blank" rel="nofollow"><img style="margin-right:5px;height: 100px; width: auto;" src="http://www.forever21.com/images/default_750/00235487-05.jpg" /></a> <a href="https://api.shopstyle.com/action/apiVisitRetailer?id=633253418&site=www.shopstyle.ca&pid=uid2225-38060665-14" target="_blank" rel="nofollow"><img style="margin-right:5px;height: 100px; width: auto;" src="https://cdn5.giltcdn.com/images/share/uploads/0000/0005/0822/508223941/lg.jpg?oq=86" /></a> <a href="https://api.shopstyle.com/action/apiVisitRetailer?id=618854284&site=www.shopstyle.ca&pid=uid2225-38060665-14" target="_blank" rel="nofollow"><img style="margin-right:5px;height: 100px; width: auto;" src="https://s7d2.scene7.com/is/image/aeo/0327_2915_001_of?$pdp-main$" /></a>

    Changes:

    – I put in a height of 100 and a width of auto.

    – I took out the “align center” class as well as the “float: left” stuff since these two things contradict each other.

    – I also took out the line breaks so the images will just nicely line up side by side on their own, without floats and other alignment tricks.

1 2
  • The topic ‘Can't add Shopstyle widget in my blog post?’ is closed to new replies.