Świat biznesu online rozwija się w zastraszającym tempie, a opinie klientów stają się jednym z kluczowych czynników wpływających na reputację firmy. Jednym ze sprawdzonych sposobów na zwiększenie zaufania klientów jest umieszczenie na swojej stronie opinii z popularnych platform, takich jak Google. W tym artykule dowiesz się, dlaczego warto dodać mały kod, który umożliwi wyświetlanie opinii z Google na Twojej stronie.
Budowanie Zaufania Poprzez Prawdziwe Opinie
W dzisiejszym świecie, gdzie większość decyzji podejmowana jest online, opinie klientów stają się kluczowym elementem budowania zaufania do marki. Korzystając z opinii z platform takich jak Google, prezentujesz potencjalnym klientom rzetelne doświadczenia innych osób. Wprowadzenie na swoją stronę sekcji z prawdziwymi opiniami sprawi, że Twoja firma będzie postrzegana jako transparentna i wiarygodna.
Dlaczego Warto Umieścić Opinie z Google na Stronie?
1. Zwiększenie Zaufania Klientów
Opinie z Google są jednymi z najbardziej wiarygodnych, ponieważ są pozostawiane przez prawdziwych użytkowników, którzy skorzystali z usług danej firmy. Wyświetlanie tych opinii na swojej stronie pozwoli potencjalnym klientom zobaczyć, że inni są zadowoleni z Twoich produktów lub usług, co zwiększy ich zaufanie do Twojej marki.
2. Poprawa Wizerunku Firmy
Dodając sekcję z opiniami z Google na swojej stronie, prezentujesz się jako firma, która ceni swoich klientów i chce dzielić się ich pozytywnymi doświadczeniami. To proste działanie może wpłynąć pozytywnie na wizerunek firmy, budując pozytywne skojarzenia w umyśle klientów.
3. Wzrost SEO
Dodawanie recenzji z zewnętrznych źródeł, takich jak Google, może znacznie poprawić widoczność Twojej strony w wynikach wyszukiwania. Algorytmy wyszukiwarek uwzględniają opinie klientów, a strony z pozytywnymi recenzjami są bardziej atrakcyjne dla wyszukiwarek. Dzięki temu Twoja firma może zająć lepsze pozycje w wynikach wyszukiwania, co przekłada się na większą liczbę odwiedzin na stronie.
Jak Dodac Opinie z Google na Stronę?
Teraz, gdy już zrozumieliśmy, dlaczego warto dodać opinie z Google na swoją stronę, przejdźmy do praktyki. Oto prosty kod, który umożliwi Ci wyświetlanie opinii z Google na Twojej stronie.
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=<TWÓJ KLUCZ API GOOGLE>&libraries=places"></script>
<style>
#opinions-slider {
margin: 0 auto;
max-width: 100%;
padding: 20px;
margin-top: 30px;
}
.opinion {
background-color: #eee;
padding: 10px;
margin: 10px;
border-radius: 10px;
}
.o-relative{
position: relative;
}
.opinion img,
.opinion span{
display: inline-block;
vertical-align: middle;
}
.opinion img[alt="google"]{
position: absolute;
top: 10px;
right: 10px;
}
.opinion span[data-rate]{
padding-left: 10px;
}
.opinion span[data-rate],
.opinion span[data-stars]{
color: #2c5aa0;
display: block;
font-size: 15px;
}</p>
<p>.opinion img[alt="Avatar"] + span{
font-size: 22px;
font-weight: bold;
color: #253148;
padding-left: 15px;
}</p>
<p>.slick-prev,
.slick-next {
display: none!important;
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 24px;
color: #000;
background-color: #fff;
border: none;
padding: 10px;
cursor: pointer;
}</p>
<p>.slick-prev {
left: -10px;
}
.slick-next {
right: -40px;
}
@media screen and (max-width: 768px){
.opinion span[data-stars]{
margin-top: 10px;
margin-bottom: 15px;
}
.opinion img[alt="google"]{
top: 60px;
}
}
</style>
</head>
<body>
<div id="opinions-slider"></div></p>
<p><script>
function loadLeaderReviews() {</p>
<p>var service = new google.maps.places.PlacesService(document.createElement('div'));</p>
<p>var request = {</p>
<p>placeId: 'XXXXXXX', /* ID twojej wizytówki Google */</p>
<p>fields: ['reviews'],</p>
<p>};</p>
<p>var images = {
starEmpty: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAATCAYAAACQjC21AAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAbdJREFUOI2llL+LE0EUxz9vcu7ZrNcYkDs5VCxsLJI3snCepZ0glhZaiGChpBbsBAu1kkOxsbEVrO4PiIhF4qxB/AMEC39wYiE2YjLPZi/sZUN29b4wxbwfn/edYRgxM+qU53lmZua9H9bVLtXSADO75Zwz4GpdrdQ5HI1G7RjjJ8CNx+P1LMu+Lap3dRNjjDeAg0DSarWu78thv99fStP0I3C0CH0Gjqnqn/9ymKbppRIMYNXMLjZ2OBgMDonIERE5LCJt59wdMzuzp0HkbYzxnpntmNl3M/uaZdnPaT6EcBu4CbSB5UXTF+g3sAM8dqp638ye7QNG0ftSVR9MjxxCuCYiT4ED/wibAD1VfQIzdxhCOC8iL4CVhrBfInK52+1u7wYqzybP89PANrBeA/sCXFDVd+Vg5dmo6gdg0MDd61nYXGChjQbAzXnBCjCEcAJYawBcHQ6Hx2uBwNmZ/QTYKtZkT7NzFZfzgNMiMwtmtqGqPVXtOecUeFMCzg6v/ocisgn8AO5677eAuJvrdDrvgXMhhCsi8tDMFjvM83wF6CdJclJVH5VhJZn3/nmSJKeAV0XPVH8BnDGgo+fCxLMAAAAASUVORK5CYII=",
starHalf: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAATCAYAAACQjC21AAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAgFJREFUOI2llE1oE0EUx/8zm91EUqoFW22gSHoSFJEd0cOmaQ5e9KAVpNKDQkJRkKI38SD0JqhHzVlvniwePCge2lK/kkzURG9e/MRgkmKNK2uz2ecpZTcbk9U+GNj33/d+82beY0BE6Lcqz85kCoXCwSCxHAFMW393hXM+FyS2L7D+/NzuqF2KE9GpXC63Y9NAan68xbEOAJqiKLObAr5fSkei9utU22eMnS8Wi+p/A7cojasq1RSXFCOi471yQm7n0+OZWHhwYE/LtsZhW7sG6e1ZXwWcX5JSNomoqqpq1TTNimEYjY1TfFs+8nDAfnVYoTWFo/nXnUvbXvQqzAJQA5Dlw8lDR83Qvie9YAEsAmBBCHGdA/PO9uSj1Kp27A55byCotRhjc0KIiwCcjaaMTNxL18NTl1ssSv8A+8kYm9J1PdsWPF3embh7bTV84mSTD9sBYF8BTOq6/sAt+sZm1Li9YLGxSgDgihDiZafYdQ4jzofRAMBEN9EH/LySmVSprnQL7rBYPp+P9wVq7PuM2ydwNLRECcBNAC1PMue+Kn1A1akl29+/lXGzGp7ODE0s7hdCXOCcCwBPXUCjM58Reafk12Lc4rSm/QgZ90ecA9NIzXd2nEkpTzPGbgCoCiH2ev66X9svy+mx+lLyTSU3G+/3MpfL5SEpZVZKudWt/wESWwWFXGd8tQAAAABJRU5ErkJggg==",
starFull: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAATCAYAAACQjC21AAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAcBJREFUOI2llD9rFEEYxn/v7eyeaTwDHkiUoPZWKQIxFt6dhSCIpY2CCBbKYaP4FbQNERs/gWAVCOQuKJwpFBHEDyBY+C8iIhbe7uw9Nhfd7B43agameeZ5f+8zvMOYJEIre5IsIhS30hchrwvSAEbcQAi4FLJaMOG6NX3i3gE1h5+nrU/T7LVQRx+7a8A+IPHmru4t4VNzPndvgSNj5b074I+yoOy/Euaj6EIBBjCXf4vOT6vZPZR12z9M6ociyw/aSE2Z3SoXCLud912mmm3nir7U0+FHzur7zrllPXcH4zrQBOrTuk9ZQ2AbsVpzHX8X8XAPMMa1j92Wv/d7KFk/uWKmB0D8j7BcWDdup/ehNGW/GZ8BHgGNv4T9MHQxavu1HaHybNJ+/YSZ1gzNB2AfZHYubqWvimLl2SSd4RuD56FoMhuUYROBY/tSCGjS8iS9AhxuzhwHDoeAwNzPjZljQaCz7GRJys20YqYVIC8exC6rpKxeWRRNL2W2FLV8N2r5rmq2gNgqeMvNq0Bhy8BXYTfdM79Y/FTj0+lr1/GnTLoMfB57SwDpz+7R8P1oVQNmd+mT9oBZ349W1aNR1H8BVibQsHqkhoUAAAAASUVORK5CYII=",
google: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAhCAYAAAC4JqlRAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAA2pJREFUWIXFmElsW1UUhr/zPCiqSyJXcZBAQqjdgKhIRWozSFWHuEEIlUWGDmIDaoVYZQMLakYxJKsKKgSiUhdICBE7lAVCAmo7qbIoSZ4RrdQFq0hdVCyckIGaEA/vsCixYvs9+9kO7b/zOdfn/+7Tffee+0RVcavlo/u7CpYxbhicVsVvM+SWJXru/qT5sdua4gYgGw3HQD5yTXpHBa9Hnwj+bN5oGWAx+tRhxZpq0rjSANa602YQVaspgOzRSAalrx3zrVLkmZ7U3C/Vca+teTT8F8jO7TIHEPQqINVxo9Y8srrd5gCfp02PXbwCIBuNzACdLmtuAD8KfK0wW29g6IDpebfRGsgORPZh8VsjV0GOdafmfnDKZ6PhiyCny+a7HvaSSJQc65UBopG676OKXu5Jms82AgTg+F5/9s8dG6FSwMf0dLHeUC9AYcr/kqf7Eau02FGzJgAEzoWS5uuuzAESN/IhmwVnW1tVKab9CvDPbE9pffqB6sVyPZSa3+favElJ5gK+3j2+/GbAWvNZq589Vn4SodS8q5m0KqN3t/+dikBnwQievYZ4LQXG/09zACmmfCsKXXZJb3++4eyj4+ujqqVdrbnLba+TuVup6ijIntb+bLMTliUstwrVjJwB4Na9Bnjw3gIowbsCILB6N4ycJIWk/wNE36pOHFp6nrzl/XD+5OTb7Zr0j+WczplfjesL+fe3Rha1Q59efIEN9aA2YM3qyFjO+QBTzht9r2hh8/fE+m49tjRQsflE4sOZdgAEfnLKpd8MfGUAqPDyiyuH9Hxub83Op9AXTgw12xED0D92e6ZOugT/vQW+I/kvF4qdztuuSiwcH/6+OfPcLMgB55LaD1sakifjg70WxrWGlS1rwDz1XdIpHYmPDCp6yfv346Udf7xm2wcCmo4FjAoAgPDE0BVEDjaEAFByYshltXQZ4SHgMFBpqD7tXLhY82QLoj0zZ3dmawAAwvHhFdo8oKp1381PLCkG78wYxlOxQGwzZ3sxCcdHVkHddseu1LF0suRfeW4qHQsMbI073ozCE0NziES2D0EumCcmX62J1rsbRr4ZPKiGcaVda7V4NHPq299tsdzcjvfHh9+QFtozRUczJy59Wm+MK4AyyOTxLqzSmCBnwPb7wBrIFz5D3rs6klh3U/NfC19Hc1eGotUAAAAASUVORK5CYII="
}</p>
<p>var stars = {
empty: '<img alt="" src="'+images.starEmpty+'" width="15" height="15">',
half: '<img alt="" src="'+images.starHalf+'" width="15" height="15">',
full: '<img alt="" src="'+images.starFull+'" width="15" height="15">'
};</p>
<p>service.getDetails(request, function(place, status) {</p>
<p>if (status === google.maps.places.PlacesServiceStatus.OK) {</p>
<p>var reviews = place.reviews;</p>
<p>var opinionsSlider = $('#opinions-slider');</p>
<p>var filteredReviews = reviews.filter(function(review) {
return review.rating >= 4;
});</p>
<p>filteredReviews.sort(function(a, b) {
return b.rating - a.rating;
});</p>
<p>filteredReviews.slice(0, 3).forEach(function(review) {</p>
<p>var opinionElement = $('<div></div>').addClass('opinion');
var avatarUrl = review.profile_photo_url;
var truncatedText = review.text.slice(0, 250) + (review.text.length > 30 ? '...' : '');
var authorUrl = review.author_url.replace(/#/g, '%23');</p>
<p>let starsSpan = "" + stars.full + stars.full + stars.full + stars.full;
switch(review.rating){
case 4:
starsSpan += stars.empty;
break;
case 5:
starsSpan += stars.full;
break;
default:
starsSpan += stars.half;
break;
}</p>
<p>opinionElement.html('<div class="o-relative"><div>' +
'<img alt="google" src="'+images.google+'" width="30" height="30">' +
'<img src="' + avatarUrl + '" alt="Avatar" width="50" height="50">' +
'<span>' + review.author_name + '</span></div>' +
'<div><span data-stars>'+starsSpan+'</span>' +
'<p>' + truncatedText + '</p></div>');</p>
<p>opinionElement.on('click', function() {
window.open(authorUrl, '_blank');
});</p>
<p> </p>
<p>opinionsSlider.append(opinionElement);</p>
<p>});</p>
<p>opinionsSlider.slick({</p>
<p>slidesToShow: 1,</p>
<p>slidesToScroll: 1,</p>
<p>infinite: true,</p>
<p>dots: false,</p>
<p>autoplay: true,</p>
<p>autoplaySpeed: 2000,</p>
<p>prevArrow: '<button type="button" class="slick-prev"><</button>',</p>
<p>nextArrow: '<button type="button" class="slick-next">></button>'</p>
<p>});</p>
<p>}</p>
<p>});</p>
<p>}</p>
<p>loadLeaderReviews();
</script></p>
<p> </p>
Kod ten tworzy miejsce na wyświetlanie opinii z Google na Twojej stronie. Teraz musisz dostosować kod JavaScript do pobierania opinii z Google API i wyświetlania ich w odpowiednim miejscu. Pamiętaj, aby przestrzegać zasad korzystania z API Google i zabezpieczyć swój klucz API.
Udostępniam Kod dla Wszystkich
Z okazji zbliżających się świąt, udostępniam ten prosty kod każdemu, kto chce poprawić wizerunek swojej firmy i zainwestować w skuteczne SEO. Wierzę, że dzięki wykorzystaniu opinii z Google, możesz zdobyć zaufanie klientów i zyskać przewagę konkurencyjną.
Pamiętaj, że prawdziwe opinie są kluczem do budowania trwałych relacji z klientami. Dlatego warto inwestować czas w tworzenie doskonałego doświadczenia klienta, które zasłuży na pozytywne recenzje.
Wprowadzenie małego kodu na Twojej stronie może mieć ogromny wpływ na postrzeganie Twojej firmy w internecie. Nie tylko zyskasz zaufanie klientów, ale również poprawisz swoją widoczność w wynikach wyszukiwania. Wykorzystaj więc potencjał opinii z Google i ciesz się korzyściami, jakie przyniesie Twojej firmie.
Pamiętaj, że transparentność i autentyczność są kluczowe. Dlatego pokaż swoim klientom, że doceniasz ich opinię, umieszczając ją bezpośrednio na swojej stronie. W ten sposób budujesz trwałe relacje z klientami i zyskujesz lojalność na długie lata.
