├── .gitignore ├── .npmignore ├── LICENSE ├── Readme.md ├── demo ├── README.md ├── index.html ├── node_modules │ └── jquery-google-reviews │ │ ├── LICENSE │ │ ├── Readme.md │ │ ├── jquery-google-reviews.css │ │ ├── jquery-google-reviews.js │ │ └── package.json └── package-lock.json ├── jquery-google-reviews.css ├── jquery-google-reviews.js └── package.json /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | TEMP.md 3 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | .TEMP.md 3 | /demo/ 4 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2018, Simon Neutert 2 | 3 | Permission to use, copy, modify, and/or distribute this software for any 4 | purpose with or without fee is hereby granted, provided that the above 5 | copyright notice and this permission notice appear in all copies. 6 | 7 | THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES 8 | WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF 9 | MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR 10 | ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES 11 | WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN 12 | ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF 13 | OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE. 14 | -------------------------------------------------------------------------------- /Readme.md: -------------------------------------------------------------------------------- 1 | # jQuery Plugin to display Google Reviews of a Place on Google Maps 2 | 3 | this will get the 5 reviews, google offers you. 4 | 5 | #### But I need more than 5 reviews! 6 | 7 | if you need more, let me direct you a bit: https://developers.google.com/my-business/content/review-data#list_all_reviews - but this will be a different project all by its own 8 | 9 | ## I do not like jQuery!!!1eleven 10 | 11 | The NPM Package is [here](https://github.com/simonneutert/google-maps-reviews) - Frontend Devs will know how to webpack :) or simply extract the code and adapt it to your needs, dropping jQuery as a dependency. 12 | 13 | ## Credits 14 | Inspired by Steven Monson's magnificent article here: 15 | https://www.launch2success.com/guide/display-google-reviews-website-2017/ or check out [Steven's github](https://github.com/stevenmonson/googleReviews). Steven's code is based on [peledies jquery plugin repo](https://github.com/peledies/google-places). So, I simply remixed their work into this repo. *Thank you guys!* 16 | 17 | #### Dear beginners and copy-pasters 18 | 19 | :octocat: *For those of you, who are new in programming or can only copy-paste, please make sure, that jQuery, the Google Maps API and the .js-file of this plugin are successfully loaded, before you call this script in your html page.* 20 | 21 | *./demo/index.html is a working demo, the comments will guide you :wink:* 22 | 23 | ## Prerequisites 24 | 25 | * You must have jQuery in your project: [jQuery](http://jquery.com) 26 | 27 | * add the .js and .css of this repo to your project (see ./demo/index.html for inspiration :wink:) 28 | 29 | * ___if you do not have a working Google Maps API key already:___ create a Google API Key: [https://console.developers.google.com/apis/](https://console.developers.google.com/apis/) **make sure to set a limit to your payments** 30 | 31 | * add the following line with your Google Maps API key with the key param: 32 | 33 | ``` html 34 | 35 | ``` 36 | 37 | * add an empty ***div*** element in your html template with an unique ID, where the reviews should show up. In this case: 38 | 39 | `
` 40 | 41 | ## How to get link to “View All Google Reviews” or "Write a review" 42 | 43 | Please see the official Documents for this topic: 44 | https://developers.google.com/my-business/content/review-data#list_all_reviews 45 | 46 | * Step 1. Open a browser, but don’t use Chrome. You can use Firefox, or Edge, or even Internet Explorer but not Google Chrome because it alters the URL and your link will not work correctly. 47 | 48 | * Step 2. Go to [Google.com](http://www.google.com) and search for your company’s name. 49 | 50 | * Step 3. Find the card on the right and click “View All Google Reviews” or "Write a review" 51 | 52 | * Step 4. Copy the URL in the address bar. 53 | 54 | * Step 5. Now paste the URL as a link on `more_reviews_button_url` or `write_review_button_url` param. 55 | 56 | ## Call the Plugin 57 | 58 | [Grab your place's ID (https://developers.google.com/places/place-id) and call it as ***placeId*** parameter, when calling the plugin. ](https://developers.google.com/places/place-id) 59 | 60 | ``` html 61 | 85 | ``` 86 | 87 | ## Are Pull Requests welcome? 88 | Yes, of course :octocat: 89 | 90 | **You do not need to update the demo folder!** I will do this, when your code was merged. 91 | -------------------------------------------------------------------------------- /demo/README.md: -------------------------------------------------------------------------------- 1 | `$ npm update` 2 | -------------------------------------------------------------------------------- /demo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Google Reviews Demo 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 40 | 41 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /demo/node_modules/jquery-google-reviews/LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2018, Simon Neutert 2 | 3 | Permission to use, copy, modify, and/or distribute this software for any 4 | purpose with or without fee is hereby granted, provided that the above 5 | copyright notice and this permission notice appear in all copies. 6 | 7 | THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES 8 | WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF 9 | MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR 10 | ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES 11 | WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN 12 | ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF 13 | OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE. 14 | -------------------------------------------------------------------------------- /demo/node_modules/jquery-google-reviews/Readme.md: -------------------------------------------------------------------------------- 1 | # jQuery Plugin to display Google Reviews of a Place on Google Maps 2 | 3 | ## I do not like jQuery!!!1eleven 4 | 5 | The NPM Package is [here](https://github.com/simonneutert/google-maps-reviews) - Frontend Devs will know how to webpack :) or simply extract the code and adapt it to your needs, dropping jQuery as a dependency. 6 | 7 | ## Credits 8 | Inspired by Steven Monson's magnificent article here: 9 | https://www.launch2success.com/guide/display-google-reviews-website-2017/ or check out [Steven's github](https://github.com/stevenmonson/googleReviews). Steven's code is based on [peledies jquery plugin repo](https://github.com/peledies/google-places). So, I simply remixed their work into this repo. *Thank you guys!* 10 | 11 | #### Dear beginners and copy-pasters 12 | 13 | :octocat: *For those of you, who are new in programming or can only copy-paste, please make sure, that jQuery, the Google Maps API and the .js-file of this plugin are successfully loaded, before you call this script in your html page.* 14 | 15 | *./demo/index.html is a working demo, the comments will guide you :wink:* 16 | 17 | ## Prerequisites 18 | 19 | * You must have jQuery in your project: [jQuery](http://jquery.com) 20 | 21 | * add the .js and .css of this repo to your project (see ./demo/index.html for inspiration :wink:) 22 | 23 | * ___if you do not have a working Google Maps API key already:___ create a Google API Key: [https://console.developers.google.com/apis/](https://console.developers.google.com/apis/) 24 | 25 | * add the following line with your Google Maps API key with the key param: 26 | 27 | ``` html 28 | 29 | ``` 30 | 31 | * add an empty ***div*** element in your html template with an unique ID, where the reviews should show up. In this case: 32 | 33 | `
` 34 | 35 | ## How to get link to “View All Google Reviews” or "Write a review" 36 | 37 | * Step 1. Open a browser, but don’t use Chrome. You can use Firefox, or Edge, or even Internet Explorer but not Google Chrome because it alters the URL and your link will not work correctly. 38 | 39 | * Step 2. Go to [Google.com](http://www.google.com) and search for your company’s name. 40 | 41 | * Step 3. Find the card on the right and click “View All Google Reviews” or "Write a review" 42 | 43 | * Step 4. Copy the URL in the address bar. 44 | 45 | * Step 5. Now paste the URL as a link on `more_reviews_button_url` or `write_review_button_url` param. 46 | 47 | ## Call the Plugin 48 | 49 | [Grab your place's ID (https://developers.google.com/places/place-id) and call it as ***placeId*** parameter, when calling the plugin. ](https://developers.google.com/places/place-id) 50 | 51 | ``` html 52 | 76 | ``` 77 | 78 | ## Are Pull Requests welcome? 79 | Yes, of course :octocat: 80 | -------------------------------------------------------------------------------- /demo/node_modules/jquery-google-reviews/jquery-google-reviews.css: -------------------------------------------------------------------------------- 1 | #google-reviews { 2 | display: flex; 3 | flex-wrap: wrap; 4 | /*display: grid;*/ 5 | /*grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));*/ 6 | } 7 | 8 | .review-item { 9 | border: solid 1px rgba(190, 190, 190, .35); 10 | margin: 0 auto; 11 | padding: 1em; 12 | flex: 1 1 50%; 13 | display: flex; 14 | flex-direction: column; 15 | align-content: stretch; 16 | } 17 | 18 | @media ( max-width:1200px) { 19 | .review-item { 20 | flex: 1 1 50%; 21 | } 22 | } 23 | 24 | @media ( max-width:450px) { 25 | .review-item { 26 | flex: 1 1 90%; 27 | } 28 | } 29 | 30 | .review-item-long { 31 | border: solid 1px rgba(190, 190, 190, .35); 32 | margin: 0 auto; 33 | padding: 1em; 34 | flex: 1 1 90%; 35 | display: flex; 36 | flex-direction: column; 37 | align-content: stretch; 38 | } 39 | 40 | @media ( max-width:1200px) { 41 | .review-item-long { 42 | flex: 1 1 90%; 43 | } 44 | } 45 | 46 | @media ( max-width:450px) { 47 | .review-item-long { 48 | flex: 1 1 90%; 49 | } 50 | } 51 | 52 | .review-header{ 53 | display: flex; 54 | } 55 | 56 | .review-picture{ 57 | width: 5em; 58 | height: auto; 59 | align-self: center; 60 | margin-right: 1em; 61 | } 62 | 63 | .review-usergrade{ 64 | display: flex; 65 | flex-direction: column; 66 | justify-content: center; 67 | align-items: flex-start; 68 | } 69 | 70 | .review-meta, .review-stars { 71 | text-align: center; 72 | font-size: 115%; 73 | } 74 | 75 | .review-author { 76 | text-transform: capitalize; 77 | font-weight: bold; 78 | } 79 | 80 | .review-date { 81 | opacity: .6; 82 | display: block; 83 | } 84 | 85 | .review-text { 86 | line-height: 1.55; 87 | text-align: left; 88 | max-width: 100%; 89 | text-align: justify; 90 | } 91 | 92 | .review-stars ul { 93 | display: inline-block; 94 | list-style: none !important; 95 | margin: 0; 96 | padding: 0; 97 | } 98 | 99 | .review-stars ul li { 100 | float: left; 101 | list-style: none !important; 102 | margin-right: 1px; 103 | line-height: 1; 104 | } 105 | 106 | .review-stars ul li i { 107 | color: #eb6e00; 108 | /* Google's Star Orange in Nov 2017 */ 109 | font-size: 1.4em; 110 | font-style: normal; 111 | } 112 | 113 | .review-stars ul li i.inactive { 114 | color: #c6c6c6; 115 | } 116 | 117 | .star:after { 118 | content: "\2605"; 119 | } 120 | 121 | 122 | .buttons { 123 | margin: 20px 0 0 0; 124 | display: flex; 125 | justify-content: center; 126 | align-items: center; 127 | flex-wrap: wrap; 128 | } 129 | 130 | .more-reviews { 131 | text-align: center; 132 | } 133 | 134 | .write-review { 135 | text-align: center; 136 | } 137 | 138 | .more-reviews a, 139 | .write-review a { 140 | margin: 5px; 141 | border: 1px #eb6e00 solid; 142 | border-radius: 40px; 143 | padding: 10px; 144 | background-color: #eb6e00; 145 | color: #FFF; 146 | text-decoration: none; 147 | } 148 | 149 | -------------------------------------------------------------------------------- /demo/node_modules/jquery-google-reviews/jquery-google-reviews.js: -------------------------------------------------------------------------------- 1 | /* README 2 | Inspired by Steven Monson's magnificent article here: 3 | https://www.launch2success.com/guide/display-google-reviews-website-2017/ 4 | 5 | Stevens code was based on peledies jquery plugin on github: 6 | https://github.com/peledies/google-places 7 | 8 | made me think and remix their work into the following lines. 9 | 10 | Thank you guys! 11 | */ 12 | 13 | (function($) { 14 | 15 | $.fn.googlePlaces = function(options) { 16 | // This is the easiest way to have default options. 17 | var settings = $.extend({ 18 | // These are the defaults. 19 | header: "

Google Reviews

", 20 | footer: '', 21 | maxRows: 6, 22 | minRating: 4, 23 | months: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], 24 | textBreakLength: "90", 25 | shortenNames: true, 26 | placeId: "", 27 | moreReviewsButtonUrl: '', 28 | moreReviewsButtonLabel: 'Show More Reviews', 29 | writeReviewButtonUrl: '', 30 | writeReviewButtonLabel: 'Write New Review', 31 | showReviewDate: false, 32 | showProfilePicture: true 33 | }, options); 34 | 35 | var targetDiv = this[0]; 36 | var targetDivJquery = this; 37 | 38 | var renderMoreReviewsButton = function() { 39 | return '
'+settings.moreReviewsButtonLabel+'
'; 40 | }; 41 | 42 | var renderWriteReviewButton = function() { 43 | return '
'+settings.writeReviewButtonLabel+'
'; 44 | }; 45 | 46 | var renderPicture = function(picture) { 47 | return ""; 48 | } 49 | 50 | var renderHeader = function(header) { 51 | var html = ""; 52 | html += header + "
"; 53 | targetDivJquery.append(html); 54 | }; 55 | 56 | var renderFooter = function(footer) { 57 | var html = ""; 58 | var htmlButtons = ""; 59 | 60 | if (settings.moreReviewsButtonUrl) { 61 | htmlButtons += renderMoreReviewsButton(); 62 | } 63 | if (settings.writeReviewButtonUrl) { 64 | htmlButtons += renderWriteReviewButton(); 65 | } 66 | if (htmlButtons != "") { 67 | html += '
'+htmlButtons+'
'; 68 | } 69 | 70 | html += "
" + footer + "
"; 71 | targetDivJquery.after(html); 72 | }; 73 | 74 | var shortenName = function(name) { 75 | if (name.split(" ").length > 1) { 76 | var shortenedName = ""; 77 | shortenedName = name.split(" "); 78 | var lastNameFirstLetter = shortenedName[1][0]; 79 | var firstName = shortenedName[0]; 80 | if (lastNameFirstLetter == ".") { 81 | return firstName; 82 | } else { 83 | return firstName + " " + lastNameFirstLetter + "."; 84 | } 85 | } else if (name != undefined) { 86 | return name; 87 | } else { 88 | return ''; 89 | } 90 | }; 91 | 92 | var renderStars = function(rating) { 93 | var stars = '
"; 105 | return stars; 106 | }; 107 | 108 | var convertTime = function(UNIX_timestamp) { 109 | var newDate = new Date(UNIX_timestamp * 1000); 110 | var months = settings.months; 111 | var time = newDate.getDate() + ". " + months[newDate.getMonth()] + " " + newDate.getFullYear(); 112 | return time; 113 | }; 114 | 115 | var filterReviewsByMinRating = function(reviews) { 116 | if (reviews === void 0) { 117 | return []; 118 | } else { 119 | for (var i = reviews.length - 1; i >= 0; i--) { 120 | var review = reviews[i]; 121 | if (review.rating < settings.minRating) { 122 | reviews.splice(i, 1); 123 | } 124 | } 125 | return reviews; 126 | } 127 | }; 128 | 129 | var sortReviewsByDateDesc = function(reviews) { 130 | if (typeof reviews != "undefined" && reviews != null && reviews.length != null && reviews.length > 0) { 131 | return reviews.sort(function(a,b) {return (a.time > b.time) ? 1 : ((b.time > a.time) ? -1 : 0);} ).reverse(); 132 | } else { 133 | return [] 134 | } 135 | } 136 | 137 | var renderReviews = function(reviews) { 138 | reviews.reverse(); 139 | var html = ""; 140 | var rowCount = (settings.maxRows > 0) ? settings.maxRows - 1 : reviews.length - 1; 141 | 142 | rowCount = (rowCount > reviews.length - 1) ? reviews.length - 1 : rowCount; 143 | for (var i = rowCount; i >= 0; i--) { 144 | var review = reviews[i]; 145 | var stars = renderStars(review.rating); 146 | var date = convertTime(review.time); 147 | var name = settings.shortenNames ? shortenName(review.author_name) : review.author_name; 148 | var style = (review.text.length > parseInt(settings.textBreakLength)) ? "review-item-long" : "review-item"; 149 | 150 | var picture = ""; 151 | if(settings.showProfilePicture) { 152 | picture = renderPicture(review.profile_photo_url); 153 | } 154 | 155 | html = html + "
"+ picture +"
" + name + "" + "
" + stars + "

" + review.text + "

"; 156 | // I do not need to display the date... but if you do: 157 | // +"
"+date+""+ 158 | } 159 | targetDivJquery.append(html); 160 | }; 161 | 162 | // GOOGLE PLACES API CALL STARTS HERE 163 | 164 | // initiate a Google Places Object 165 | var service = new google.maps.places.PlacesService(targetDiv); 166 | // set.getDetails takes 2 arguments: request, callback 167 | // see documentation here: https://developers.google.com/maps/documentation/javascript/3.exp/reference#PlacesService 168 | const request = { 169 | placeId: settings.placeId 170 | }; 171 | // the callback is what initiates the rendering if Status returns OK 172 | var callback = function(place, status) { 173 | if (status == google.maps.places.PlacesServiceStatus.OK) { 174 | var filteredReviews = filterReviewsByMinRating(place.reviews); 175 | var sortedReviews = sortReviewsByDateDesc(filteredReviews); 176 | if (sortedReviews.length > 0) { 177 | renderHeader(settings.header); 178 | renderReviews(sortedReviews); 179 | renderFooter(settings.footer); 180 | } 181 | } 182 | } 183 | 184 | return this.each(function() { 185 | // Runs the Plugin 186 | if (settings.placeId === undefined || settings.placeId === "") { 187 | console.error("NO PLACE ID DEFINED"); 188 | return 189 | } 190 | service.getDetails(request, callback); 191 | }); 192 | }; 193 | 194 | }(jQuery)); 195 | -------------------------------------------------------------------------------- /demo/node_modules/jquery-google-reviews/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "_from": "jquery-google-reviews@1.3.0", 3 | "_id": "jquery-google-reviews@1.3.0", 4 | "_inBundle": false, 5 | "_integrity": "sha512-bbK2KSq6sPjDL/RkPeZLSox/zdJShNXNmIuZWfX0WcDC4JANaKs9naXmVz+Q4U6uoI23oF5hqDfyIj0t1gDS/g==", 6 | "_location": "/jquery-google-reviews", 7 | "_phantomChildren": {}, 8 | "_requested": { 9 | "type": "version", 10 | "registry": true, 11 | "raw": "jquery-google-reviews@1.3.0", 12 | "name": "jquery-google-reviews", 13 | "escapedName": "jquery-google-reviews", 14 | "rawSpec": "1.3.0", 15 | "saveSpec": null, 16 | "fetchSpec": "1.3.0" 17 | }, 18 | "_requiredBy": [ 19 | "#USER", 20 | "/" 21 | ], 22 | "_resolved": "https://registry.npmjs.org/jquery-google-reviews/-/jquery-google-reviews-1.3.0.tgz", 23 | "_shasum": "99360d76cefdd6f7eeb8a8aef0ca1a7bba6603f2", 24 | "_spec": "jquery-google-reviews@1.3.0", 25 | "_where": "/Users/simon/Code/jquery-google-reviews/demo", 26 | "author": { 27 | "name": "Simon Neutert" 28 | }, 29 | "bugs": { 30 | "url": "https://github.com/simonneutert/jquery-google-reviews/issues" 31 | }, 32 | "bundleDependencies": false, 33 | "deprecated": false, 34 | "description": "jQuery Plugin to display Google Reviews of a Place on Google Maps", 35 | "homepage": "https://github.com/simonneutert/jquery-google-reviews#readme", 36 | "keywords": [ 37 | "jquery", 38 | "plugin", 39 | "jquery-plugin", 40 | "google-maps", 41 | "maps", 42 | "google-place-api", 43 | "reviews" 44 | ], 45 | "license": "ISC", 46 | "main": "jquery-google-reviews.js", 47 | "name": "jquery-google-reviews", 48 | "repository": { 49 | "type": "git", 50 | "url": "git+https://github.com/simonneutert/jquery-google-reviews.git" 51 | }, 52 | "scripts": { 53 | "test": "echo \"Error: no test specified\" && exit 1" 54 | }, 55 | "version": "1.3.0" 56 | } 57 | -------------------------------------------------------------------------------- /demo/package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "requires": true, 3 | "lockfileVersion": 1, 4 | "dependencies": { 5 | "jquery-google-reviews": { 6 | "version": "1.3.0", 7 | "resolved": "https://registry.npmjs.org/jquery-google-reviews/-/jquery-google-reviews-1.3.0.tgz", 8 | "integrity": "sha512-bbK2KSq6sPjDL/RkPeZLSox/zdJShNXNmIuZWfX0WcDC4JANaKs9naXmVz+Q4U6uoI23oF5hqDfyIj0t1gDS/g==" 9 | } 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /jquery-google-reviews.css: -------------------------------------------------------------------------------- 1 | #google-reviews { 2 | display: flex; 3 | flex-wrap: wrap; 4 | /*display: grid;*/ 5 | /*grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));*/ 6 | } 7 | 8 | .review-item { 9 | border: solid 1px rgba(190, 190, 190, .35); 10 | margin: 0 auto; 11 | padding: 1em; 12 | flex: 1 1 50%; 13 | display: flex; 14 | flex-direction: column; 15 | align-content: stretch; 16 | } 17 | 18 | @media ( max-width:1200px) { 19 | .review-item { 20 | flex: 1 1 50%; 21 | } 22 | } 23 | 24 | @media ( max-width:450px) { 25 | .review-item { 26 | flex: 1 1 90%; 27 | } 28 | } 29 | 30 | .review-item-long { 31 | border: solid 1px rgba(190, 190, 190, .35); 32 | margin: 0 auto; 33 | padding: 1em; 34 | flex: 1 1 90%; 35 | display: flex; 36 | flex-direction: column; 37 | align-content: stretch; 38 | } 39 | 40 | @media ( max-width:1200px) { 41 | .review-item-long { 42 | flex: 1 1 90%; 43 | } 44 | } 45 | 46 | @media ( max-width:450px) { 47 | .review-item-long { 48 | flex: 1 1 90%; 49 | } 50 | } 51 | 52 | .review-header{ 53 | display: flex; 54 | } 55 | 56 | .review-picture{ 57 | width: 5em; 58 | height: auto; 59 | align-self: center; 60 | margin-right: 1em; 61 | } 62 | 63 | .review-usergrade{ 64 | display: flex; 65 | flex-direction: column; 66 | justify-content: center; 67 | align-items: flex-start; 68 | } 69 | 70 | .review-meta, .review-stars { 71 | text-align: center; 72 | font-size: 115%; 73 | } 74 | 75 | .review-author { 76 | text-transform: capitalize; 77 | font-weight: bold; 78 | } 79 | 80 | .review-date { 81 | opacity: .6; 82 | display: block; 83 | } 84 | 85 | .review-text { 86 | line-height: 1.55; 87 | text-align: left; 88 | max-width: 100%; 89 | text-align: justify; 90 | } 91 | 92 | .review-stars ul { 93 | display: inline-block; 94 | list-style: none !important; 95 | margin: 0; 96 | padding: 0; 97 | } 98 | 99 | .review-stars ul li { 100 | float: left; 101 | list-style: none !important; 102 | margin-right: 1px; 103 | line-height: 1; 104 | } 105 | 106 | .review-stars ul li i { 107 | color: #eb6e00; 108 | /* Google's Star Orange in Nov 2017 */ 109 | font-size: 1.4em; 110 | font-style: normal; 111 | } 112 | 113 | .review-stars ul li i.inactive { 114 | color: #c6c6c6; 115 | } 116 | 117 | .star:after { 118 | content: "\2605"; 119 | } 120 | 121 | 122 | .buttons { 123 | margin: 20px 0 0 0; 124 | display: flex; 125 | justify-content: center; 126 | align-items: center; 127 | flex-wrap: wrap; 128 | } 129 | 130 | .more-reviews { 131 | text-align: center; 132 | } 133 | 134 | .write-review { 135 | text-align: center; 136 | } 137 | 138 | .more-reviews a, 139 | .write-review a { 140 | margin: 5px; 141 | border: 1px #eb6e00 solid; 142 | border-radius: 40px; 143 | padding: 10px; 144 | background-color: #eb6e00; 145 | color: #FFF; 146 | text-decoration: none; 147 | } 148 | 149 | -------------------------------------------------------------------------------- /jquery-google-reviews.js: -------------------------------------------------------------------------------- 1 | /* README 2 | Inspired by Steven Monson's magnificent article here: 3 | https://www.launch2success.com/guide/display-google-reviews-website-2017/ 4 | 5 | Stevens code was based on peledies jquery plugin on github: 6 | https://github.com/peledies/google-places 7 | 8 | made me think and remix their work into the following lines. 9 | 10 | Thank you guys! 11 | */ 12 | 13 | (function ($) { 14 | $.fn.googlePlaces = function (options) { 15 | // This is the easiest way to have default options. 16 | var settings = $.extend( 17 | { 18 | // These are the defaults. 19 | header: "

Google Reviews

", 20 | footer: "", 21 | maxRows: 6, 22 | minRating: 4, 23 | months: [ 24 | "Jan", 25 | "Feb", 26 | "Mar", 27 | "Apr", 28 | "May", 29 | "Jun", 30 | "Jul", 31 | "Aug", 32 | "Sep", 33 | "Oct", 34 | "Nov", 35 | "Dec", 36 | ], 37 | textBreakLength: "90", 38 | shortenNames: true, 39 | placeId: "", 40 | moreReviewsButtonUrl: "", 41 | moreReviewsButtonLabel: "Show More Reviews", 42 | writeReviewButtonUrl: "", 43 | writeReviewButtonLabel: "Write New Review", 44 | showReviewDate: false, 45 | showProfilePicture: true, 46 | }, 47 | options 48 | ); 49 | 50 | var targetDiv = this[0]; 51 | var targetDivJquery = this; 52 | 53 | var renderMoreReviewsButton = function () { 54 | return ( 55 | '
' + 58 | settings.moreReviewsButtonLabel + 59 | "
" 60 | ); 61 | }; 62 | 63 | var renderWriteReviewButton = function () { 64 | return ( 65 | '
' + 68 | settings.writeReviewButtonLabel + 69 | "
" 70 | ); 71 | }; 72 | 73 | var renderPicture = function (picture) { 74 | return ""; 75 | }; 76 | 77 | var renderHeader = function (header) { 78 | var html = ""; 79 | html += header + "
"; 80 | targetDivJquery.append(html); 81 | }; 82 | 83 | var renderFooter = function (footer) { 84 | var html = ""; 85 | var htmlButtons = ""; 86 | 87 | if (settings.moreReviewsButtonUrl) { 88 | htmlButtons += renderMoreReviewsButton(); 89 | } 90 | if (settings.writeReviewButtonUrl) { 91 | htmlButtons += renderWriteReviewButton(); 92 | } 93 | if (htmlButtons != "") { 94 | html += '
' + htmlButtons + "
"; 95 | } 96 | 97 | html += "
" + footer + "
"; 98 | targetDivJquery.after(html); 99 | }; 100 | 101 | var shortenName = function (name) { 102 | if (name.split(" ").length > 1) { 103 | var shortenedName = ""; 104 | shortenedName = name.split(" "); 105 | var lastNameFirstLetter = shortenedName[1][0]; 106 | var firstName = shortenedName[0]; 107 | if (lastNameFirstLetter == ".") { 108 | return firstName; 109 | } else { 110 | return firstName + " " + lastNameFirstLetter + "."; 111 | } 112 | } else if (name != undefined) { 113 | return name; 114 | } else { 115 | return ""; 116 | } 117 | }; 118 | 119 | var renderStars = function (rating) { 120 | var stars = '
"; 132 | return stars; 133 | }; 134 | 135 | var convertTime = function (UNIX_timestamp) { 136 | var newDate = new Date(UNIX_timestamp * 1000); 137 | var months = settings.months; 138 | var time = 139 | newDate.getDate() + 140 | ". " + 141 | months[newDate.getMonth()] + 142 | " " + 143 | newDate.getFullYear(); 144 | return time; 145 | }; 146 | 147 | var filterReviewsByMinRating = function (reviews) { 148 | if (reviews === void 0) { 149 | return []; 150 | } else { 151 | for (var i = reviews.length - 1; i >= 0; i--) { 152 | var review = reviews[i]; 153 | if (review.rating < settings.minRating) { 154 | reviews.splice(i, 1); 155 | } 156 | } 157 | return reviews; 158 | } 159 | }; 160 | 161 | var sortReviewsByDateDesc = function (reviews) { 162 | if ( 163 | typeof reviews != "undefined" && 164 | reviews != null && 165 | reviews.length != null && 166 | reviews.length > 0 167 | ) { 168 | return reviews 169 | .sort(function (a, b) { 170 | return a.time > b.time ? 1 : b.time > a.time ? -1 : 0; 171 | }) 172 | .reverse(); 173 | } else { 174 | return []; 175 | } 176 | }; 177 | 178 | var sanitizedReviewText = function (text) { 179 | text = text.replace("