"Reviews with panels & schema"
Bootstrap 3.3.0 Snippet by jerryschrader

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<div class="container">
<h1>Customer Reviews</h1>
<p>These require links to be setup, but are a great starting point for schema and appearance.</p>
<div class="row-fluid">
<div class="col-sm-6">
<div class="panel panel-default">
<div class="panel-heading">
<span itemscope itemtype="http://schema.org/Review">
<h3 class="panel-title" itemprop="name">Review Title</h3>
</div><!--/panel-heading-->
<div class="panel-body" itemprop="reviewBody">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Nihil quaerat aperiam unde nemo suscipit id repellendus ad doloribus quae,
fugiat quia rem molestias sequi, amet nisi qui cumque iusto earum!</p>
<span itemprop="author" itemscope itemtype="http://schema.org/Person">
<small>
<span itemprop="name">-- J. Reviewer</span>
</span><!--/author schema -->
<span class="glyphicon glyphicon-calendar" aria-hidden="true"></span>
<meta itemprop="datePublished" content="01-01-2016">01-01-2016
<span class="pull-right">
<span class="reviewRating" itemscope itemtype="http://schema.org/Rating">
<meta itemprop="worstRating" content="1">
<span itemprop="ratingValue">5</span> /
<span itemprop="bestRating"> stars </span>
</span><!--/reviewRating-->
<span class="glyphicon glyphicon-star" aria-hidden="true"></span>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.glyphicon-star {
color:gold;
}
span.glyphicon-calendar {
padding-left:20px;
}
.fa-facebook-official {
color:#3b5998;;
}
.fa-twitter-square {
color:#00aced;
}
.fa-google-plus {
color: #dd4b39;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments:

Hello Jerry...when i paste the code of this snippet on a page, it displays okay but it forces the content of that page to move to the left and make the fonts bigger in appearance. Is there a solution to this?

csng (0) - 6 years ago - Reply 0


It depends on what is already on your page, but I would assume that you need to move YOUR custom stylesheet AFTER the bootstrap stylesheet, so kind of like this:

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">

<link href="YOURCUSTOMSTYLESHEETURL" rel="stylesheet">

That way the Bootstrap styles do not override your custom styles :)

jerryschrader (1) - 6 years ago - Reply 0


Hi Jerry,

I am having problems to Add your review code to my page in squarespace. I add the html code in a code block and the css part in the custom css tool. It does not look like the one showing up here. What can I do? Thanks!

oaviles (0) - 7 years ago - Reply 0


Have you linked to Bootstrap and jQuery? http://getbootstrap.com/docs/3.3/

jerryschrader (1) - 7 years ago - Reply 1


I paste "Bootstrap CDN" from the url that you gave me. The review block looks great, like here. Now the problem is that when I pasted "Bootstrap CDN" changed the font color of all my pages. Any solution?

oaviles (0) - 7 years ago - Reply 0


Make sure your custom stylesheet comes after the bootstrap link, so your custom styles handle the font colors.

jerryschrader (1) - 7 years ago - Reply 1


Thanks so much for your time and support. It is working fine!! :)

oaviles (0) - 7 years ago - Reply 0


You are the best!! Thanks so much!!

oaviles (0) - 7 years ago - Reply 0


No problem, and remember, this has the Rich Schema in it, so Google will pick them up and display the stars in search results!

jerryschrader (1) - 7 years ago - Reply 0