FB POST THUMBNAIL WITH STAR RATING WIDGET

Friday, 4 April 2014

FB POST THUMBNAIL WITH STAR RATING WIDGET

-------------------------------------------------------------------------------------------------
COPY AND PASTE BELOW CODE
---------------------------------------------------------------------------------------------------

<html >
<head>
<meta content='width=device-width, initial-scale=1.0' name='viewport'/>
<script type='text/javascript'>//<![CDATA[
var curl = window.location.href;if (curl.indexOf('m=1') != -1) {curl = curl.replace('m=1', 'm=0');window.location.href = curl;}
//]]></script>
<link href='http://fonts.googleapis.com/css?family=Nunito:400,300,700|Open sans:400' rel='stylesheet' type='text/css'/>
<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>
<b:include data='blog' name='all-head-content'/>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
</b:if>
<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.pageTitle/></title>
<b:else/>
<title><data:blog.pageName/> ~ <data:blog.title/></title>
</b:if>

<b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Design by : FBGadgets
URL : http://fbgadgets.blogspot.co.uk/
----------------------------------------------- */

a:link,a:visited {
color: #ff3000;
text-decoration: underline;
outline: none;
}
a:hover {
color: #ff3000;
text-decoration: none;
outline: none;
}
a img {
border-width: 0;
}

/* Posts-----------------------------------------------*/

h2.date-header {
margin: 1.5em 0 .5em;
display: none;
}
.wrapfullpost {
}
.post {
margin-bottom: 15px;
}
.post h2 a {
font-family: Nunito, Arial, sans-serif;
text-transform: capitalize;
font-size: 25px;
color: #666;
font-weight: 400;
text-decoration: none;
}
.post h2 {
margin: 0px;
float: left;
width: 100%;
border-bottom: 1px solid #ddd;
padding-bottom: 20px;
margin-top: 10px;
}
.post-body {
line-height: 18px;
font-size: 13px;
color: #868686;
}
.post-footer {
margin: 5px 0;
}
.post-body img {
max-width: 100%;
height: auto;
width: 100%;
}
.avatar-image-container {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2N4JGHRa1MzjYPtDUg7UKIZI8xk4mg6Wn8R9pZfmSS_AlLhXeRAtDgIHk0B_2ZvzATIlmkF_cSeBPFX76XsU7Dz1srjGi47gwzo0uRT_FYBj6i3plunmqRqYFnR7cBbHIMEPhi3zyOBaE/s0/comment-avatar.jpg);
width: 32px;
height: 32px;
float: right;
margin: 5px 10px 5px 5px;
border: 1px solid #ddd;
}
.avatar-image-container img {
width: 32px;
height: 32px;
}
.profile-link {
font: $postfooterfont;
text-transform: uppercase;
letter-spacing: .1em;
}
#navbar-iframe {
height: 0;
visibility: hidden;
display: none;
}
.social-share {
width: 95px;
height: 80px;
float: right;
position: relative;
background: #F52E00;
}
.social-share a {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
text-indent: -9999px;
text-transform: capitalize;
}
header .right-container .social-share {
background: #6c3cbc;
}
.social-share:hover .drop-down {
height: auto;
-webkit-opacity: 1;
-moz-opacity: 1;
opacity: 1;
overflow: visible;
}
.social-share a {
height: 80px;
position: inherit;
text-indent: -9999px;
}
.social-share > a {
position: absolute;
}
.social-share .drop-down {
position: absolute;
top: 100%;
left: 0;
background-color: #F52E00;
list-style: none;
width: 100%;
float: left;
padding: 0;
-webkit-opacity: 0;
-moz-opacity: 0;
opacity: 0;
height: 0;
overflow: hidden;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
z-index: 10;
}
.social-share .drop-down li {
width: 100%;
float: left;
border-top: 1px solid #E22A00!important;
}
.social-share .drop-down li:first-child {
border-top: none;
}
.social-share .drop-down a {
position: inherit;
float: left;
height: 40px;
background-repeat: no-repeat;
}
.social-share .drop-down li:hover {
background-color: #ff3000;
}
.social-share .drop-down .twitter {
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqT58Ckl2orGJgjoKtQRdor51LQAVVxjywQqgqTBtKg0xIpTXYLKiwCkksxVd9dq_RrlHyCA3uBzGoZDIcrTeH1e9dL1OMFWLQeGw6rtOTVXzU4LOpm90H-STMSWE-i1tbVkVlV6VUuI4/s1600/twitter_white.png");
background-position: center center;
background-repeat: no-repeat;
}
.social-share .drop-down .dribble {
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoimmR68k95rNDWRhJMWzqjVWCkzAysZ26c_96Fae6F-2N_6CzKOU8_M0P6sSCjaiCt1RqakY1HUqDc7z5A29_-NOi5rdowL-vuJXj0nt-l7SWBj7Z1eLB1OGPRrCUHE3pZ6yfGAeGe74/s1600/dribbble_white.png");
background-position: center center;
background-repeat: no-repeat;
}
.social-share .drop-down .googleplus {
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8foStcwjYO6Lx6b8DO1isHkh3Y6GvF5X1N8RKNHD-WvQ-gzafqfVlB6Ey7y1HTmpJkWkoK8bs0Uus3m-u1EwdPoJunCs41_akuO-vGrXx5m9unvya6AjVdky3ueVy7aI3gtuK5fpDNpg/s1600/googleplus_white.png");
background-position: center center;
background-repeat: no-repeat;
}
.social-share .drop-down .evernote {
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQnxW14_KPdbO4ty8HR8C0L3Uog7XiWNc27AK-4mjxChuDGejYjRxfvgfuGHAMtXWOo20cjpipwJ-T52v4wNY-3vhvZL16Q3r1xIBOPRBRBFAJJGN6NM-9ym4aiu_xYMSrXhSKR9tmPPc/s1600/evernote_white.png");
background-position: center center;
background-repeat: no-repeat;
}
.social-share .drop-down .facebook {
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcNt9rhKiMX6V7ZEoctlECD6NBEzMBolUgY1I7G8LsB06yq5VLvj6FfPBgoTdi14LhjN6l0j435TDUvdJm-RxKOjZXmOZg_7tOywGhJAFsjW2CI7iq5p0h3gOidFc-n2DR0DW7Mse2qMk/s1600/facebook_white.png");
background-position: center center;
background-repeat: no-repeat;
}
.social-share .drop-down .linkedin {
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUwIjFMnI9uhQrU8EuzYequEABBSibOSzc2psYgvq9r2SfxIG0WBvboj6bAC1bv9a_iq49VWz5YdGYy-gD24UimqTJnOycx3Zij54lH6anhkMer1Tob0Xs9CTtjDzzcxDHeSrl5WGWe-Q/s1600/linkedin_white.png");
background-position: center center;
background-repeat: no-repeat;
}
.social-share .drop-down .stumbleupon {
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhe9xPb7gWqIECz52-XvZl_menlU3VCse7NQZ-VjIbgpnJOhzuDrXEdD0vPrEKePq_zeTd8B13mMvPr-Ziaw2c-3mgzGCZYjK39Z702dS2d_cpfi8N2swXzYRhYbz7VRqJOjjSOLev_7OE/s1600/stumbleupon_white.png");
background-position: center center;
background-repeat: no-repeat;
}
.social-share .drop-down .pinterest {
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiskJyVqtAbhAYFt4FvjSI3IcfxLfqox5_qen1JVQI-GD7Hl0hTSS7Y14BglRGiveZKlbJyoDlZKeNn5G-YjKbxcLBvKMF9x7g-QguMNfO4kHDad1StNr5vlGp_3tZOhyphenhyphenh1Qir3L0tat0M/s1600/pinterest_white.png");
background-position: center center;
background-repeat: no-repeat;
}
.social-share .drop-down .vimeo {
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQBY26sOHNZ3HgGGQQ2AWNTq_uzYZu0y7rAa9otzr_wNRGAAXO7oI5wmNRu2OQ_UEvhyphenhyphen40QFLVxr7cwfuFV4npArpxpv3Z97L7yHEotTZCS1Ik70Cd4uj5t3YS1DH6BvPaOyNsc-940BE/s1600/vimeo_white.png");
background-position: center center;
background-repeat: no-repeat;
}
.social-share .share {
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwNtbnczCCi2zVNZdJPKsV2PGpKFUZ__GJ9KcY_HZFZE-3T3tZxo6Shsb_7z8pSygbmTI93oQpJaGQBom6lNJKA8NYGvsoNkeALQ45pJ5Wdom8t3If9Ca3PR6-0-Sz9OQgBiQYsv3080Y/s1600/share_btn.png");
background-position: center center;
background-repeat: no-repeat;
}
.googleplusb {
width: 100%;
float: left;
overflow: hidden;
}
.post-body h2 {
font-family: Nunito, Arial, sans-serif;
text-transform: capitalize;
font-size: 25px;
color: #666;
font-weight: 400;
text-decoration: none;
border: none;
padding-bottom: 10px;
margin-top: 25px;
}
.post-body h3 {
font-family: Nunito, Arial, sans-serif;
text-transform: capitalize;
font-size: 22px;
color: #666;
font-weight: 400;
text-decoration: none;
border: none;
padding-bottom: 10px;
margin-top: 25px;
margin-bottom: 0px;
}
.post-body h4 {
font-family: Nunito, Arial, sans-serif;
text-transform: capitalize;
font-size: 18px;
color: #666;
font-weight: 400;
text-decoration: none;
border: none;
padding-bottom: 10px;
margin-top: 25px;
margin-bottom: 0px;
}
.post ul {
margin-top: 10px;
}
blockquote {
background: #f0f0f0;
padding: 15px;
}
#crosscol-wrapper {
float: left;
padding: 14px;
border-bottom: 1px solid #ddd;
margin: 5px;
width: 728px;
}
#lsdiebar-wrapper {
background: #f0f0f0;
width: 200px;
float: left;
padding: 15px;
}
#lsdiebar-wrapper h2 {
font-family: Nunito, Arial, sans-serif;
text-transform: uppercase;
font-size: 15px;
color: #868686;
border-bottom: 1px solid #ddd;
padding-bottom: 20px;
margin-top: 20px;
}
#lsdiebar-wrapper ul {
margin: 0px;
padding: 0px;
}
#lsdiebar-wrapper ul li {
display: block;
}
.meta_posts {
font-family: Open Sans, Arial, sans-serif;
color: #b8b8b8;
text-transform: uppercase;
float: left;
font-size: 13px;
width: 100%;
margin-top: 15px;
margin-bottom: 15px;
}
.meta_posts a {
color: #b8b8b8;
text-decoration: none;
}
.meta_autor {
border-right: 1px solid #ddd;
padding-right: 10px;
margin-right: 10px;
}
.gallery_gag {
float: left;
}
.gallery_gag img {
width: 100%^;
float: left;
}
.gallery_gag li {
float: left;
margin: 6px!important;
width: 45%;
}
.gallery_gag ul {
margin: 0px;
padding: 0px;
}
.gallery_gag li {
float: left;
margin: 0px;
padding: 0px;
}
.Label li {
float: left;
padding: 3px!important;
margin: 0px!important;
border: 0px!important;
}
.Label li a:hover {
background: #F52E00;
color: #fff!important;
}
.Label li a {
float: left;
background: #ff3000;
padding: 8px 10px 8px 10px;
border-radius: 4px;
color: #fff!important;
text-transform: uppercase;
}
.fa {
font-size: 16px;
}
.rw-ui-container.rw-dir-ltr .rw-report-link, .rw-ui-container.rw-valign-middle.rw-halign-right .rw-report-link {
display: none!important;
}
.rw-ui-info-inner-container:hover {
background: none!important;
}
.rw-ui-info-nub.rw-ui-info-inner-nub, .rw-ui-info-nub.rw-ui-info-outer-nub {
display: none;
}
.rw-ui-tooltip {
display: none!important;
}
.rw-ui-container.rw-size-small span.rw-ui-info {
font-family: Open Sans, Arial, sans-serif;
color: #b8b8b8!important;
text-transform: uppercase;
font-size: 13px;
display: none;
}
.rw-ui-container {
float: right;
margin-top: -3px;
}
.rw-ui-container.rw-halign-right, .rw-ui-container.rw-halign-right .rw-ui-info-inner-container {
border-color: #fff!important;
}
.rw-ui-report.rw-size-large.rw-halign-center.gradient.rw-dir-ltr.rw-type-nero.rw-meta-rating-29085119.rw-valign-bottom, .rw-ui-report.rw-dir-ltr, .rw-ui-container.rw-size-medium .rw-report-link {
display: none!important;
}
#post-gag-top {
float: left;
width: 100%;
background: #ff3000;
}
#post-gag-top li {
float: left;
display: block;
color: #fff;
}
#post-gag-top .fa {
font-size: 25px;
}
#post-gag-top {
}
#post-gag-top li a {
color: #fff;
padding: 15px 25px 15px 25px;
float: left;
}
.reblog {
background: #F52E00;
border-right: 1px solid #F02D00;
border-left: 1px solid #F02D00;
}
.sright {
float: right;
background: #F52E00;
border-right: 1px solid #F02D00;
border-left: 1px solid #F02D00;
}
.sright {
float: right;
}
.sharetext {
color: #fff;
padding: 18px 35px 18px 35px;
float: left;
text-transform: uppercase;
font-size: 14px;
font-weight: bold;
}
.item-title a {
color: #868686;
text-decoration: none;
}
.item-title {
overflow: hidden;
}

.post h1 {
margin: 0px;
float: left;
width: 100%;
border-bottom: 1px solid #ddd;
padding-bottom: 20px;
margin-top: 10px;
font-family: Nunito, Arial, sans-serif;
text-transform: capitalize;
font-size: 25px;
color: #666;
font-weight: 400;
text-decoration: none;
}
.meta_categories {
float: left;
width: 100%;
margin-bottom: 5px;
margin-top: 10px;
text-transform: uppercase;
color: #b8b8b8;
}
.meta_categories a {
text-decoration: none;
}
#titles {
margin-bottom: 15px;
border-bottom: 1px solid #ddd;
padding-bottom: 15px;
margin-top: 10px;
}
.reblog {
display: none;
}
.sharetext {
width: 160px;
text-align: center;
}
.sright {
width: 230px;
}
a.toppost {
float: right;
text-decoration: none;
text-transform: uppercase;
}
#post-gag-top li a:hover {
background: #e83511;
}
.post h2 a:hover {
color: #ff3000;
}
a.random {
color: #fff;
font-size: 20px;
}
.fa.fa-random {
font-size: 25px;
float: right;
position: relative;
background: #F52E00;
color: #fff;
padding: 28px;
}

]]></b:skin>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[
(function(d, t, e, m){
// Async Rating-Widget initialization.
window.RW_Async_Init = function(){
RW.init({
huid: "149369",
uid: "c21d872a654e0a635442e1377029f7ea",
options: { "style": "oxygen" }
});
RW.render();
};
// Append Rating-Widget JavaScript library.
var rw, s = d.getElementsByTagName(e)[0], id = "rw-js",
l = d.location, ck = "Y" + t.getFullYear() +
"M" + t.getMonth() + "D" + t.getDate(), p = l.protocol,
f = (-1 < l.search.indexOf('DBG=') ? '' : '.min'),
a = ("https:" == p ? "secure." + m + "js/" : "js." + m);
if (d.getElementById(id)) return;
rw = d.createElement(e);
rw.id = id; rw.async = true; rw.type = "text/javascript";
rw.src = p + "//" + a + "external" + f + ".js?ck=" + ck;
s.parentNode.insertBefore(rw, s);
}(document, new Date(), "script", "rating-widget.com/"));

//]]>
</script>

<script type='text/javascript'>//<![CDATA[
$(document).ready(function() {
var dimension = 250;
$('#related-posts').find('img').each(function(n, image){
var image = $(image);
image.attr({src : image.attr('src').replace(/s\B\d{2,4}/,'s' + dimension)});
image.attr('width',dimension);
image.attr('height',dimension);
});
});

//]]></script>

</head>

<body>

<div id='outer-wrapper'>
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
<b:includable id='main' var='top'>
<div class='blog-posts hfeed'>
<b:loop values='data:posts' var='post'>
<b:include data='post' name='post'/>
</b:loop>
</div>
</b:includable>
<b:includable id='backlinkDeleteIcon' var='backlink'/>
<b:includable id='backlinks' var='post'/>
<b:includable id='comment-form' var='post'/>
<b:includable id='commentDeleteIcon' var='comment'/>
<b:includable id='comment_count_picker' var='post'/>
<b:includable id='comment_picker' var='post'/>
<b:includable id='comments' var='post'/>
<b:includable id='feedLinks'/>
<b:includable id='feedLinksBody' var='links'/>
<b:includable id='iframe_comments' var='post'/>
<b:includable id='mobile-index-post' var='post'/>
<b:includable id='mobile-main' var='top'/>
<b:includable id='mobile-nextprev'/>
<b:includable id='mobile-post' var='post'/>
<b:includable id='nextprev'/>

<b:includable id='post' var='post'>

<div class='wrapfullpost'>
<div class='post hentry'>

<a expr:name='data:post.id'/>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.title'>
<h2 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h2>
</b:if>
<b:else/>
<span class='meta_categories'>Tagged Under: <b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'><a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>, </b:if></b:loop></b:if></span>
<h1 class='post-title entry-title'>
<b:if cond='data:post.link'>
<data:post.title/>
<b:else/>
<b:if cond='data:post.url'>
<data:post.title/>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h1>
</b:if>

<div class='meta_posts'>
<span class='meta_autor'> <i class='fa fa-user'/> By: <a expr:href='data:post.authorProfileUrl'>
<data:post.author/>
</a></span> <span class='meta_date'><i class='fa fa-clock-o'/> On: <data:post.timestamp/></span>
<div class='rw-ui-container'/>
</div>
<b:if cond='data:blog.pageType != "static_page"'>
<div id='post-gag-top'>
<li><b:if cond='data:top.showBlogThisButton'>
<a class='reblog' expr:href='data:post.sharePostUrl + "&target=blog"' expr:onclick='"window.open(this.href, \"_blank\", \"height=270,width=475\"); return false;"' expr:title='data:top.blogThisMsg' target='_blank'><i class='fa fa-arrow-circle-left'/></a></b:if>
</li>
<li class='sharetext'>Share The Gag </li>
<div class='sright'>
<li class='twitter'><a expr:href='"http://twitter.com/intent/tweet?text=" + data:post.title + "&url=" + data:post.url' target='_blank' title='Tweet This !'><i class='fa fa-twitter'/></a> </li>
<li class='facebook'><a expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&t=" + data:post.title' target='_blank' title='Share On Facebook !'><i class='fa fa-facebook'/></a> </li>
<li class='gplus'><a expr:href='"https://plusone.google.com/_/+1/confirm?hl=" + "en&url=" + data:post.url' target='_blank' title='Share On Google Plus !'><i class='fa fa-google-plus'/></a> </li>
</div>
</div>
</b:if>

<div class='post-body'>

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>

<b:if cond='data:post.thumbnailUrl'>
<a expr:href='data:post.url'><img alt='thumbnail' class='post-thumbnail' expr:src='data:post.firstImageUrl'/></a>
<b:else/>
<a expr:href='data:post.url'><img alt='thumbnail' class='post-thumbnail' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcCuR6q9-11iuF0bnE-bfiy-V3V0FpS6Z2wMf4Z8p_Hmv1AT83TJz8YY-TcFpyi2camx3QHoMa5-bzIF6Og_WtE6o_F8_gj6Dq90H9LSQYRk0dn3KJ4iWtG5UPJhn8mCJDwB_NaPeCgpll/s1600/FBGadgets.jpg'/></a>
</b:if>

</b:if>
</b:if>

<b:if cond='data:blog.pageType == "item"'>
<div class='post'>
<data:post.body/>
</div>
</b:if>

</div>
</div>
</div>

</b:includable>

<b:includable id='postQuickEdit' var='post'/>
<b:includable id='shareButtons' var='post'/>
<b:includable id='status-message'/>
<b:includable id='threaded-comment-form' var='post'/>
<b:includable id='threaded_comment_js' var='post'/>
<b:includable id='threaded_comments' var='post'/>
</b:widget>
</b:section>
</div>
</div>
<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>
</body>
</html>

------------------------------------------------------------------------------------------------------
USE IMAGES IN THIS TUTORIAL
------------------------------------------------------------------------------------------------------

-------------------------------------------------------------------------------------------------------
READ MORE:
http://fbgadgets.blogspot.co.uk/2014/04/fb-post-thumbnail-with-star-rating_5.html