├── .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: "