Support » Plugin: Reviews and Rating – Google My Business » Sticky badge with reviews

  • Resolved cometto

    (@cometto)


    Hello,

    do you have an idea how can I implement small badge on my website (for example – in left corner)? In plugin setup I chose badge option and this is totally ok but how can I put to all pages?

    Will be grateful for help

    The page I need help with: [log in to see the link]

Viewing 15 replies - 16 through 30 (of 35 total)
  • Thread Starter cometto

    (@cometto)

    @designextreme

    Hello,

    I moved shortcode to footer.
    For desktop it displays in left bottom corner.
    For mobile i added another shortcode inside hamburger menu and its ok I think.

    Are you sure about your Demo method? Desktop version has both shortcodes (bottom left and right) but when I switch to mobile its disabled. So you disabled in on mobile, same as me (its not floating as a sticky), am I right?

    Plugin Author Design Extreme

    (@designextreme)

    @cometto Sounds like a good idea having the Shortcode in the footer as you describe.

    With the Demo version, just choose one of the two; not both. I just added the left version because I was receiving a lot of requests for this. Having both of them side-by-side means it’s easier to make the right choice for the user.

    You’re correct about the disabled “floating” effect for mobile users. They’ll see this within the page’s content (so it doesn’t take up their screen space all the time).

    When making responsive websites, I usually start with the base CSS for small screen users and then use the media queries to add more complexity as the screen size increases.

    Thread Starter cometto

    (@cometto)

    @designextreme everything is clear, i will test soon other options. Thank you for you time. Big beer for you.

    Plugin Author Design Extreme

    (@designextreme)

    @cometto Thanks for letting me know and thanks for the positive review earlier! πŸ™‚

    Thread Starter cometto

    (@cometto)

    @designextreme

    hello again, 1 more question.

    i see that reviews count doesnt update. I checked options to update daily. Its 2 day since I received last review. What can I do?

    Plugin Author Design Extreme

    (@designextreme)

    @cometto Please check the Retrieved Data tab – does this show the updated review count? This will reflect the last collection from the Places API.

    Sometimes, the front-end will still show a cached version of the page, so bear this in mind when comparing the current data in the Google search results with your web page.

    Thread Starter cometto

    (@cometto)

    @designextreme
    Retrieve data and Reviews display just 5 reviews. They are random, not including newest at the top. Is it ok?

    Plugin Author Design Extreme

    (@designextreme)

    @cometto Yes, this is what is expected. The top review is deemed the most relevant according to the Places API. I was referring to the overall review count there, that should match the current number in the Google search results.

    If you want to collect all your reviews, you can use the HTML Import in the Advanced tab.

    Thread Starter cometto

    (@cometto)

    @designextreme

    hello, I checked again and now its updated. Thank you.

    1 more question. Despite that by css we disabled display in left corner on mobile devices it is loading by scripts (PSI warnings and preview). Is it possible to disable mobile display in better way than css?

    Plugin Author Design Extreme

    (@designextreme)

    @cometto Thanks for the follow up question.

    I would recommend keeping your current setup rather than attempting to disable scripts based on a screen size or browser/agent. There are many situations where the end user may rotate their smartphone and it will trigger a very different page layout. If the styles or scripts are disabled then there will be missing elements within the page (that others would see when loading at this resolution from the start). In larger screens, you can quite easily change your window sizes to the same effect.

    The loading time that you’ll save by attempting this will be negligible when compared to other files that are loaded.

    If you do want to go down this path, I’d recommend a separate mobile-only website rather than a responsive website. This was more common with how mobiles were approached in the early days.

    Please let me know if this is helpful or if I missed the point of your question?

    Thread Starter cometto

    (@cometto)

    @designextreme

    Hello,

    please, see that screenshot:
    https://ibb.co/vmqRLW5

    I see that during rendering mobile preview icon displays in left corner. In additions – there is a css render block. I tried to disable it in wprocket but without result. Can I do something to not affect website performance?

    /wp-content/cache/min/1/wp-content/plugins/g-business-reviews-rating/wp/css/css.css?ver=1631631542

    Plugin Author Design Extreme

    (@designextreme)

    @cometto There is something that you can do, but… it seems quite a lot of work to achieve something that will lead to issues when people alter their window size or rotate their phone (if it triggers a change in design).

    In WordPress, you can dequeue a style sheet – add some custom code to the functions.php in your theme or, ideally, the Child theme. This will need to be enclosed by some server-side browser detection.

    I have a string from another project that could be used with a regular expression against the $_SERVER['HTTP_USER_AGENT']:

    add_action('wp_enqueue_scripts', 'deregister_some_css', 10);
    
    function deregister_some_css()
    {
    	if (isset($_SERVER['HTTP_USER_AGENT']) && preg_match('^(1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a\ wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r\ |s\ )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1\ u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp(\ i|ip)|hs\-c|ht(c(\-|\ |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac(\ |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt(\ |\/)|klon|kpt\ |kwc\-|kyo(c|k)|le(no|xi)|lg(\ g|\/(k|l|u)|50|54|e\-|e\/|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-|\ |o|v)|zz)|mt(50|p1|v\ )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v\ )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-|\ )|webc|whit|wi(g\ |nc|nw)|wmlb|wonu|x700|xda(\-|2|g)|yas\-|your|zeto|zte\-)/i', $_SERVER['HTTP_USER_AGENT']))
    	{
    		wp_dequeue_style('google_business_reviews_rating_wp_css');
    	}
    }

    I haven’t checked this code excerpt, but it will help get you started.

    Plugin Author Design Extreme

    (@designextreme)

    @cometto Note: the code excerpt in my reply hasn’t been checked over properly and there’s a missing “/” at the start of the regular expression.

    Thread Starter cometto

    (@cometto)

    @designextreme

    Hello again,

    1 more question. Is it possible to display stars fill animation constant? I mean to play make this animation after few seconds again?

    I applied shrotcode in my header section on liveflooring.com

    Plugin Author Design Extreme

    (@designextreme)

    @cometto Yes, it is possible by creating your own version of the animation: google-business-reviews-rating-star or by having a different animation entirely (e.g. my-star-animation). Here is an example based on the existing animation, but this has 3 iterations:

    @keyframes my-star-animation {
    	0% {
    		transform: scale(1, 1);
    		opacity: 0.05;
    		filter: saturate(0);
    	}
    	5% {
    		transform: scale(0.1, 1);
    		opacity: 0.15;
    	}
    	8% {
    		transform: scale(0.1, 1);
    		opacity: 0.5;
    	}
    	14% {
    		opacity: 1;
    	}
    	21% {
    		transform: scale(1.25, 1.25);
    		filter: saturate(100%);
    	}
    	25% {
    		transform: scale(1, 1);
    		filter: brightness(100%);
    	}
    	88% {
    		transform: scale(1, 1);
    		filter: brightness(100%) saturate(100%);
    	}
    	94% {
    		transform: scale(1.15, 1.15);
    		filter: brightness(120%) saturate(85%);
    	}
    	100% {
    		transform: scale(1, 1);
    		filter: brightness(100%) saturate(100%);
    	}
    }
    
    .google-business-reviews-rating .animate .star {
        animation: my-star-animation 3s .5s ease-in-out 3;
    }
Viewing 15 replies - 16 through 30 (of 35 total)
  • You must be logged in to reply to this topic.