Help Nút Share bài viết XF lên FB + Hình đầu tiên hiển thị

Cu tí siêu nhân

Thượng Đế
Tham gia
14/01/2016
Bài viết
155
Được Like
54
E muốn làm cái nút share bài viết lên fb
Lướt nát cái google mà ko có cách nào giải quyết được.
Bác nào biết cách hiển thị Hình ảnh đầu tiên của bài viết khi chia sẽ nó lên fb ko chỉ e vs. giống vnxf nhưng vnxf củng bị lỗi, ko hiển thị ảnh.
Cám ơn các bác!
 

tpoclub

Thượng Đế
Tham gia
07/03/2015
Bài viết
116
Được Like
100
Vào addthis.com tạo TK rồi copy 2 đoạn code về dán vào site nha bạn! Có 2 mã, 1 mã vào Style->Templates-> ở cuối template Page_container và 1 vào vị trí bạn muốn đầu hay cuối bài viết, như site mình ở cuối thì mình chọn template ad_message_below nhé!

- Vấn đề hiện bài viết đầu khi share lên facebook bạn search lại trên vnxf, nhưng ở hiện tại mình thấy ko được nữa, nên chịu khó dùng thủ công thôi!

Thân!
 

Cu tí siêu nhân

Thượng Đế
Tham gia
14/01/2016
Bài viết
155
Được Like
54
Vào addthis.com tạo TK rồi copy 2 đoạn code về dán vào site nha bạn! Có 2 mã, 1 mã vào Style->Templates-> ở cuối template Page_container và 1 vào vị trí bạn muốn đầu hay cuối bài viết, như site mình ở cuối thì mình chọn template ad_message_below nhé!

- Vấn đề hiện bài viết đầu khi share lên facebook bạn search lại trên vnxf, nhưng ở hiện tại mình thấy ko được nữa, nên chịu khó dùng thủ công thôi!

Thân!
bạn cho m xem site b thử, ko biết share ra nó có hình lớn ko bạn. m thì gét mấy cái addthis này do site ngoài chèn vào, lỡ nó die cái mình củng die theo mất công tìm code xóa mệt
 

newbean

Thượng Đế
Tham gia
10/05/2017
Bài viết
50
Được Like
34
addthis còn khối mới die bạn nhé. cứ yên tâm mà xài đi. khi share lên fb nó hình nhỏ giống các page fb thôi
 

virutmt

Thượng Đế
Tham gia
03/10/2017
Bài viết
202
Được Like
40
Chào ACE. Mình muốn làm cái nút share lên facebook và google giống hệt vnxf thì phải làm thế nào. Giống từ vị trí tới kích thước :D
1 vấn đề nữa là. Facebook hiện nay tạo nút đăng nhập không được. nó cứ báo lỗi https . nhưng site đã có rồi cũng vẫn báo lỗi vậy
 

hacobi1102

Thượng Đế
Tham gia
10/03/2016
Bài viết
355
Được Like
164
Chào ACE. Mình muốn làm cái nút share lên facebook và google giống hệt vnxf thì phải làm thế nào. Giống từ vị trí tới kích thước :D
1 vấn đề nữa là. Facebook hiện nay tạo nút đăng nhập không được. nó cứ báo lỗi https . nhưng site đã có rồi cũng vẫn báo lỗi vậy
HTML:
<div class="share-container clearfix">
<ul class="rrssb-buttons clearfix">

<!-- START facebook button -->
<li class="rrssb-facebook">
<a href="[URL]https://www.facebook.com/sharer/sharer.php?u=https://vnxf.vn/nut-share-bai-viet-xf-len-fb-hinh-dau-tien-hien-thi.t14038.html[/URL]" class="popup">
<span class="rrssb-icon">
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" width="29" height="29" viewBox="0 0 29 29">
<path d="M26.4 0H2.6C1.714 0 0 1.715 0 2.6v23.8c0 .884 1.715 2.6 2.6 2.6h12.393V17.988h-3.996v-3.98h3.997v-3.062c0-3.746 2.835-5.97 6.177-5.97 1.6 0 2.444.173 2.845.226v3.792H21.18c-1.817 0-2.156.9-2.156 2.168v2.847h5.045l-.66 3.978h-4.386V29H26.4c.884 0 2.6-1.716 2.6-2.6V2.6c0-.885-1.716-2.6-2.6-2.6z"
class="cls-2" fill-rule="evenodd" />
</svg>
</span>
<span class="rrssb-text">Facebook</span>
</a>
</li>
<!-- END facebook button -->

<!-- START twitter button -->
<!-- END twitter button -->

<!-- START linkedin button -->
<!-- END linkedin button -->

<!-- START googleplus button -->
<li class="rrssb-googleplus">
<a href="[URL]https://plus.google.com/share?url=https://vnxf.vn/nut-share-bai-viet-xf-len-fb-hinh-dau-tien-hien-thi.t14038.html[/URL]" class="popup">
<span class="rrssb-icon">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="28px" height="28px" viewBox="0 0 28 28" enable-background="new 0 0 28 28" xml:space="preserve">
<g>
<g>
<path d="M14.703,15.854l-1.219-0.948c-0.372-0.308-0.88-0.715-0.88-1.459c0-0.748,0.508-1.223,0.95-1.663
c1.42-1.119,2.839-2.309,2.839-4.817c0-2.58-1.621-3.937-2.399-4.581h2.097l2.202-1.383h-6.67c-1.83,0-4.467,0.433-6.398,2.027
C3.768,4.287,3.059,6.018,3.059,7.576c0,2.634,2.022,5.328,5.604,5.328c0.339,0,0.71-0.033,1.083-0.068
c-0.167,0.408-0.336,0.748-0.336,1.324c0,1.04,0.551,1.685,1.011,2.297c-1.524,0.104-4.37,0.273-6.467,1.562
c-1.998,1.188-2.605,2.916-2.605,4.137c0,2.512,2.358,4.84,7.289,4.84c5.822,0,8.904-3.223,8.904-6.41
c0.008-2.327-1.359-3.489-2.829-4.731H14.703z M10.269,11.951c-2.912,0-4.231-3.765-4.231-6.037c0-0.884,0.168-1.797,0.744-2.511
c0.543-0.679,1.489-1.12,2.372-1.12c2.807,0,4.256,3.798,4.256,6.242c0,0.612-0.067,1.694-0.845,2.478
c-0.537,0.55-1.438,0.948-2.295,0.951V11.951z M10.302,25.609c-3.621,0-5.957-1.732-5.957-4.142c0-2.408,2.165-3.223,2.911-3.492
c1.421-0.479,3.25-0.545,3.555-0.545c0.338,0,0.52,0,0.766,0.034c2.574,1.838,3.706,2.757,3.706,4.479
c-0.002,2.073-1.736,3.665-4.982,3.649L10.302,25.609z"/>
<polygon points="23.254,11.89 23.254,8.521 21.569,8.521 21.569,11.89 18.202,11.89 18.202,13.604 21.569,13.604 21.569,17.004
23.254,17.004 23.254,13.604 26.653,13.604 26.653,11.89 "/>
</g>
</g>
</svg>
</span>
<span class="rrssb-text">Google+</span>
</a>
</li>
<!-- END googleplus button -->

<!-- START pocket button -->
<!-- END pocket button -->

<!-- START buffer button -->
<!-- END buffer button -->

<!-- START tumblr button -->
<!-- END tumblr button -->

<!-- START reddit button -->
<!-- END reddit button -->

<!-- START pinterest button -->
<!-- END pinterest button -->

<!-- START delicious button -->
<!-- END delicious button -->

<!-- START stumbleupon button -->
<!-- END stumbleupon button -->

<!-- START hackernews button -->
<!-- END hackernews button -->

<!-- START vk.com button -->
<!-- END vk.com button -->

<!-- START email button -->
<!-- END email button -->

</ul>
</div>

Mã:
/* --- SV_rrssbDefault.css --- */

.clearfix:after {
    clear: both;
}
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
.rrssb-buttons {
    box-sizing:border-box;
    height: 36px;
    margin: 0;
    padding: 0;
    width: 100%;
}
.rrssb-buttons li {
    box-sizing:border-box;
    float: left;
    height: 100%;
    line-height: 13px;
    list-style: none;
    margin: 0;
    padding: 0 2px;
}
.rrssb-buttons li.rrssb-facebook a {
    background-color: #3b5998;
}
.rrssb-buttons li.rrssb-facebook a:hover {
    background-color: #2C4A89;
}
.rrssb-buttons li.rrssb-twitter a {
    background-color: #00aced;
}
.rrssb-buttons li.rrssb-twitter a:hover {
    background-color: #009FE0;
}
.rrssb-buttons li.rrssb-linkedin a {
    background-color: #007bb6;
}
.rrssb-buttons li.rrssb-linkedin a:hover {
    background-color: #006EA9;
}
.rrssb-buttons li.rrssb-googleplus a {
    background-color: #dd4b39;
}
.rrssb-buttons li.rrssb-googleplus a:hover {
    background-color: #D03E2C;
}
.rrssb-buttons li.rrssb-pocket a {
    background-color: #d3505a;
}
.rrssb-buttons li.rrssb-pocket a:hover {
    background-color: #C6434D;
}
.rrssb-buttons li.rrssb-buffer a {
    background-color: #323b43;
}
.rrssb-buttons li.rrssb-buffer a:hover {
    background-color: #252E36;
}
.rrssb-buttons li.rrssb-tumblr a {
    background-color: #32506d;
}
.rrssb-buttons li.rrssb-tumblr a:hover {
    background-color: #254360;
}
.rrssb-buttons li.rrssb-reddit a {
    background-color: #5f99cf;
}
.rrssb-buttons li.rrssb-reddit a:hover {
    background-color: #528CC2;
}
.rrssb-buttons li.rrssb-pinterest a {
    background-color: #cc2127;
}
.rrssb-buttons li.rrssb-pinterest a:hover {
    background-color: #BF141A;
}
.rrssb-buttons li.rrssb-delicious a {
    background-color: #3271cb;
}
.rrssb-buttons li.rrssb-delicious a:hover {
    background-color: #2362BC;
}
.rrssb-buttons li.rrssb-stumbleupon a {
    background-color: #EB4823;
}
.rrssb-buttons li.rrssb-stumbleupon a:hover {
    background-color: #DC3914;
}
.rrssb-buttons li.rrssb-hackernews a {
    background-color: #f60;
}
.rrssb-buttons li.rrssb-hackernews a:hover {
    background-color: rgb(245, 92, 0)
}
.rrssb-buttons li.rrssb-vk a {
    background-color: #4d71a9;
}
.rrssb-buttons li.rrssb-vk a:hover {
    background-color: #43679F;
}
.rrssb-buttons li.rrssb-email a {
    background-color: #3498db;
}
.rrssb-buttons li.rrssb-email a:hover {
    background-color: #278BCE;
}
.rrssb-buttons li a {
    font-weight: bold;
font-size: 11px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #fff;
border-radius: 2px;
text-transform: uppercase;
text-decoration: none !important;

    box-sizing:border-box;
    display: block;
    height: 100%;
    padding: 11px 7px 12px 27px;
    position: relative;
    text-align: center;
    width: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-transition: background-color 0.2s ease-in-out;
    -moz-transition: background-color 0.2s ease-in-out;
    -o-transition: background-color 0.2s ease-in-out;
    transition: background-color 0.2s ease-in-out;
}
.rrssb-buttons li a .rrssb-icon {
    display: block;
    left: 10px;
    padding-top: 9px;
    position: absolute;
    top: 0;
    width: 10%;
}
.rrssb-buttons li a .rrssb-icon svg {
    height: 17px;
    width: 17px;
}
.rrssb-buttons li a .rrssb-icon svg path,
.rrssb-buttons li a .rrssb-icon svg polygon {
    fill: #fff;
}
.rrssb-buttons li a .rrssb-text {
    color: #fff;
}
.rrssb-buttons li a:active {
    box-shadow: inset 1px 3px 15px 0 rgba(22, 0, 0, 0.25);
}
.rrssb-buttons li.small a {
    padding: 0;
}
.rrssb-buttons li.small a .rrssb-icon {
    left: auto;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    top: auto;
    width: 100%;
}
.rrssb-buttons li.small a .rrssb-text {
    visibility: hidden;
}
.rrssb-buttons.large-format {
    height: auto;
}
.rrssb-buttons.large-format li {
    height: auto;
}
.rrssb-buttons.large-format li:first-child:nth-last-child(1) a {
    font-size: 20px;
    font-size: 4vw;
}
.rrssb-buttons.large-format li:first-child:nth-last-child(2) a,
.rrssb-buttons.large-format li:first-child:nth-last-child(2) ~ li a {
    font-size: 16px;
    font-size: 2vw;
}
.rrssb-buttons.large-format li:first-child:nth-last-child(3) a,
.rrssb-buttons.large-format li:first-child:nth-last-child(3) ~ li a {
    font-size: 14px;
    font-size: 1.7vw;
}
.rrssb-buttons.large-format li:first-child:nth-last-child(4) a,
.rrssb-buttons.large-format li:first-child:nth-last-child(4) ~ li a {
    font-size: 13px;
    font-size: 1.4vw;
}
.rrssb-buttons.large-format li:first-child:nth-last-child(5) a,
.rrssb-buttons.large-format li:first-child:nth-last-child(5) ~ li a {
    font-size: 13px;
    font-size: 1.2vw;
}
.rrssb-buttons.large-format li:first-child:nth-last-child(6) a,
.rrssb-buttons.large-format li:first-child:nth-last-child(6) ~ li a {
    font-size: 12px;
    font-size: 1.05vw;
}
.rrssb-buttons.large-format li:first-child:nth-last-child(7) a,
.rrssb-buttons.large-format li:first-child:nth-last-child(7) ~ li a {
    font-size: 11px;
    font-size: .9vw;
}
.rrssb-buttons.large-format li:first-child:nth-last-child(8) a,
.rrssb-buttons.large-format li:first-child:nth-last-child(8) ~ li a {
    font-size: 11px;
    font-size: .8vw;
}
.rrssb-buttons.large-format li:first-child:nth-last-child(9) a,
.rrssb-buttons.large-format li:first-child:nth-last-child(9) ~ li a {
    font-size: 11px;
    font-size: .7vw;
}
.rrssb-buttons.large-format li:first-child:nth-last-child(10) a,
.rrssb-buttons.large-format li:first-child:nth-last-child(10) ~ li a {
    font-size: 11px;
    font-size: .6vw;
}
.rrssb-buttons.large-format li:first-child:nth-last-child(11) a,
.rrssb-buttons.large-format li:first-child:nth-last-child(11) ~ li a {
    font-size: 11px;
    font-size: .5vw;
}
.rrssb-buttons.large-format li a {
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
    border-radius: 0.2em;
    padding: 8.5% 0 8.5% 12%;
}
.rrssb-buttons.large-format li a .rrssb-icon {
    height: 100%;
    left: 7%;
    padding-top: 0;
    width: 12%;
}
.rrssb-buttons.large-format li a .rrssb-icon svg {
    height: 100%;
    position: absolute;
    top: 0;
    width: 100%;
}
.rrssb-buttons.large-format li a .rrssb-text {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.rrssb-buttons.small-format {
    padding-top: 5px;
}
.rrssb-buttons.small-format li {
    height: 80%;
    padding: 0 1px;
}
.rrssb-buttons.small-format li a .rrssb-icon {
    height: 100%;
    padding-top: 0;
}
.rrssb-buttons.small-format li a .rrssb-icon svg {
    height: 48%;
    position: relative;
    top: 6px;
    width: 80%;
}
.rrssb-buttons.tiny-format {
    height: 22px;
    position: relative;
}
.rrssb-buttons.tiny-format li {
    padding-right: 7px;
}
.rrssb-buttons.tiny-format li a {
    background-color: transparent;
    padding: 0;
}
.rrssb-buttons.tiny-format li a .rrssb-icon svg {
    height: 70%;
    width: 100%;
}
.rrssb-buttons.tiny-format li a:hover,
.rrssb-buttons.tiny-format li a:active {
    background-color: transparent;
}
.rrssb-buttons.tiny-format li.rrssb-facebook a .rrssb-icon svg path,
.rrssb-buttons.tiny-format li.rrssb-facebook a .rrssb-icon svg polygon {
    fill: #3b5998;
}
.rrssb-buttons.tiny-format li.rrssb-facebook a .rrssb-icon:hover .rrssb-icon svg path,
.rrssb-buttons.tiny-format li.rrssb-facebook a .rrssb-icon:hover .rrssb-icon svg polygon {
    fill: #2C4A89;
}
.rrssb-buttons.tiny-format li.rrssb-twitter a .rrssb-icon svg path,
.rrssb-buttons.tiny-format li.rrssb-twitter a .rrssb-icon svg polygon {
    fill: #00aced;
}
.rrssb-buttons.tiny-format li.rrssb-twitter a .rrssb-icon:hover .rrssb-icon svg path,
.rrssb-buttons.tiny-format li.rrssb-twitter a .rrssb-icon:hover .rrssb-icon svg polygon {
    fill: #009FE0;
}
.rrssb-buttons.tiny-format li.rrssb-linkedin a .rrssb-icon svg path,
.rrssb-buttons.tiny-format li.rrssb-linkedin a .rrssb-icon svg polygon {
    fill: #007bb6;
}
.rrssb-buttons.tiny-format li.rrssb-linkedin a .rrssb-icon:hover .rrssb-icon svg path,
.rrssb-buttons.tiny-format li.rrssb-linkedin a .rrssb-icon:hover .rrssb-icon svg polygon {
    fill: #006EA9;
}
.rrssb-buttons.tiny-format li.rrssb-googleplus a .rrssb-icon svg path,
.rrssb-buttons.tiny-format li.rrssb-googleplus a .rrssb-icon svg polygon {
    fill: #dd4b39;
}
.rrssb-buttons.tiny-format li.rrssb-googleplus a .rrssb-icon:hover .rrssb-icon svg path,
.rrssb-buttons.tiny-format li.rrssb-googleplus a .rrssb-icon:hover .rrssb-icon svg polygon {
    fill: #D03E2C;
}
.rrssb-buttons.tiny-format li.rrssb-pocket a .rrssb-icon svg path,
.rrssb-buttons.tiny-format li.rrssb-pocket a .rrssb-icon svg polygon {
    fill: #d3505a;
}
.rrssb-buttons.tiny-format li.rrssb-pocket a .rrssb-icon:hover .rrssb-icon svg path,
.rrssb-buttons.tiny-format li.rrssb-pocket a .rrssb-icon:hover .rrssb-icon svg polygon {
    fill: #C6434D;
}
.rrssb-buttons.tiny-format li.rrssb-buffer a .rrssb-icon svg path,
.rrssb-buttons.tiny-format li.rrssb-buffer a .rrssb-icon svg polygon {
    fill: #323b43;
}
.rrssb-buttons.tiny-format li.rrssb-buffer a .rrssb-icon:hover .rrssb-icon svg path,
.rrssb-buttons.tiny-format li.rrssb-buffer a .rrssb-icon:hover .rrssb-icon svg polygon {
    fill: #252E36;
}
.rrssb-buttons.tiny-format li.rrssb-tumblr a .rrssb-icon svg path,
.rrssb-buttons.tiny-format li.rrssb-tumblr a .rrssb-icon svg polygon {
    fill: #32506d;
}
.rrssb-buttons.tiny-format li.rrssb-tumblr a .rrssb-icon:hover .rrssb-icon svg path,
.rrssb-buttons.tiny-format li.rrssb-tumblr a .rrssb-icon:hover .rrssb-icon svg polygon {
    fill: #254360;
}
.rrssb-buttons.tiny-format li.rrssb-reddit a .rrssb-icon svg path,
.rrssb-buttons.tiny-format li.rrssb-reddit a .rrssb-icon svg polygon {
    fill: #5f99cf;
}
.rrssb-buttons.tiny-format li.rrssb-reddit a .rrssb-icon:hover .rrssb-icon svg path,
.rrssb-buttons.tiny-format li.rrssb-reddit a .rrssb-icon:hover .rrssb-icon svg polygon {
    fill: #528CC2;
}
.rrssb-buttons.tiny-format li.rrssb-pinterest a .rrssb-icon svg path,
.rrssb-buttons.tiny-format li.rrssb-pinterest a .rrssb-icon svg polygon {
    fill: #cc2127;
}
.rrssb-buttons.tiny-format li.rrssb-pinterest a .rrssb-icon:hover .rrssb-icon svg path,
.rrssb-buttons.tiny-format li.rrssb-pinterest a .rrssb-icon:hover .rrssb-icon svg polygon {
    fill: #BF141A;
}
.rrssb-buttons.tiny-format li.rrssb-delicious a .rrssb-icon svg path,
.rrssb-buttons.tiny-format li.rrssb-delicious a .rrssb-icon svg polygon {
    fill: #3271cb;
}
.rrssb-buttons.tiny-format li.rrssb-delicious a .rrssb-icon:hover .rrssb-icon svg path,
.rrssb-buttons.tiny-format li.rrssb-delicious a .rrssb-icon:hover .rrssb-icon svg polygon {
    fill: #2362BC;
}
.rrssb-buttons.tiny-format li.rrssb-stumbleupon a .rrssb-icon svg path,
.rrssb-buttons.tiny-format li.rrssb-stumbleupon a .rrssb-icon svg polygon {
    fill: #EB4823;
}
.rrssb-buttons.tiny-format li.rrssb-stumbleupon a .rrssb-icon:hover .rrssb-icon svg path,
.rrssb-buttons.tiny-format li.rrssb-stumbleupon a .rrssb-icon:hover .rrssb-icon svg polygon {
    fill: #DC3914;
}
.rrssb-buttons.tiny-format li.rrssb-hackernews a .rrssb-icon svg path,
.rrssb-buttons.tiny-format li.rrssb-hackernews a .rrssb-icon svg polygon {
    fill: #f60;
}
.rrssb-buttons.tiny-format li.rrssb-hackernews a .rrssb-icon:hover .rrssb-icon svg path,
.rrssb-buttons.tiny-format li.rrssb-hackernews a .rrssb-icon:hover .rrssb-icon svg polygon {
    fill: rgb(245, 92, 0);
}
.rrssb-buttons.tiny-format li.rrssb-vk a .rrssb-icon svg path,
.rrssb-buttons.tiny-format li.rrssb-vk a .rrssb-icon svg polygon {
    fill: #4d71a9;
}
.rrssb-buttons.tiny-format li.rrssb-vk a .rrssb-icon:hover .rrssb-icon svg path,
.rrssb-buttons.tiny-format li.rrssb-vk a .rrssb-icon:hover .rrssb-icon svg polygon {
    fill: #43679F;
}
.rrssb-buttons.tiny-format li.rrssb-email a .rrssb-icon svg path,
.rrssb-buttons.tiny-format li.rrssb-email a .rrssb-icon svg polygon {
    fill: #3498db;
}
.rrssb-buttons.tiny-format li.rrssb-email a .rrssb-icon:hover .rrssb-icon svg path,
.rrssb-buttons.tiny-format li.rrssb-email a .rrssb-icon:hover .rrssb-icon svg polygon {
    fill: #278BCE;
}
 

virutmt

Thượng Đế
Tham gia
03/10/2017
Bài viết
202
Được Like
40
Gì thế này. view rồi copy ra đây à
HTML:
<div class="share-container clearfix">
<ul class="rrssb-buttons clearfix">

<!-- START facebook button -->
<li class="rrssb-facebook">
<a href="[URL]https://www.facebook.com/sharer/sharer.php?u=https://vnxf.vn/nut-share-bai-viet-xf-len-fb-hinh-dau-tien-hien-thi.t14038.html[/URL]" class="popup">
<span class="rrssb-icon">
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" width="29" height="29" viewBox="0 0 29 29">
<path d="M26.4 0H2.6C1.714 0 0 1.715 0 2.6v23.8c0 .884 1.715 2.6 2.6 2.6h12.393V17.988h-3.996v-3.98h3.997v-3.062c0-3.746 2.835-5.97 6.177-5.97 1.6 0 2.444.173 2.845.226v3.792H21.18c-1.817 0-2.156.9-2.156 2.168v2.847h5.045l-.66 3.978h-4.386V29H26.4c.884 0 2.6-1.716 2.6-2.6V2.6c0-.885-1.716-2.6-2.6-2.6z"
class="cls-2" fill-rule="evenodd" />
</svg>
</span>
<span class="rrssb-text">Facebook</span>
</a>
</li>
<!-- END facebook button -->

<!-- START twitter button -->
<!-- END twitter button -->

<!-- START linkedin button -->
<!-- END linkedin button -->

<!-- START googleplus button -->
<li class="rrssb-googleplus">
<a href="[URL]https://plus.google.com/share?url=https://vnxf.vn/nut-share-bai-viet-xf-len-fb-hinh-dau-tien-hien-thi.t14038.html[/URL]" class="popup">
<span class="rrssb-icon">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="28px" height="28px" viewBox="0 0 28 28" enable-background="new 0 0 28 28" xml:space="preserve">
<g>
<g>
<path d="M14.703,15.854l-1.219-0.948c-0.372-0.308-0.88-0.715-0.88-1.459c0-0.748,0.508-1.223,0.95-1.663
c1.42-1.119,2.839-2.309,2.839-4.817c0-2.58-1.621-3.937-2.399-4.581h2.097l2.202-1.383h-6.67c-1.83,0-4.467,0.433-6.398,2.027
C3.768,4.287,3.059,6.018,3.059,7.576c0,2.634,2.022,5.328,5.604,5.328c0.339,0,0.71-0.033,1.083-0.068
c-0.167,0.408-0.336,0.748-0.336,1.324c0,1.04,0.551,1.685,1.011,2.297c-1.524,0.104-4.37,0.273-6.467,1.562
c-1.998,1.188-2.605,2.916-2.605,4.137c0,2.512,2.358,4.84,7.289,4.84c5.822,0,8.904-3.223,8.904-6.41
c0.008-2.327-1.359-3.489-2.829-4.731H14.703z M10.269,11.951c-2.912,0-4.231-3.765-4.231-6.037c0-0.884,0.168-1.797,0.744-2.511
c0.543-0.679,1.489-1.12,2.372-1.12c2.807,0,4.256,3.798,4.256,6.242c0,0.612-0.067,1.694-0.845,2.478
c-0.537,0.55-1.438,0.948-2.295,0.951V11.951z M10.302,25.609c-3.621,0-5.957-1.732-5.957-4.142c0-2.408,2.165-3.223,2.911-3.492
c1.421-0.479,3.25-0.545,3.555-0.545c0.338,0,0.52,0,0.766,0.034c2.574,1.838,3.706,2.757,3.706,4.479
c-0.002,2.073-1.736,3.665-4.982,3.649L10.302,25.609z"/>
<polygon points="23.254,11.89 23.254,8.521 21.569,8.521 21.569,11.89 18.202,11.89 18.202,13.604 21.569,13.604 21.569,17.004
23.254,17.004 23.254,13.604 26.653,13.604 26.653,11.89 "/>
</g>
</g>
</svg>
</span>
<span class="rrssb-text">Google+</span>
</a>
</li>
<!-- END googleplus button -->

<!-- START pocket button -->
<!-- END pocket button -->

<!-- START buffer button -->
<!-- END buffer button -->

<!-- START tumblr button -->
<!-- END tumblr button -->

<!-- START reddit button -->
<!-- END reddit button -->

<!-- START pinterest button -->
<!-- END pinterest button -->

<!-- START delicious button -->
<!-- END delicious button -->

<!-- START stumbleupon button -->
<!-- END stumbleupon button -->

<!-- START hackernews button -->
<!-- END hackernews button -->

<!-- START vk.com button -->
<!-- END vk.com button -->

<!-- START email button -->
<!-- END email button -->

</ul>
</div>

Mã:
/* --- SV_rrssbDefault.css --- */

.clearfix:after {
    clear: both;
}
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
.rrssb-buttons {
    box-sizing:border-box;
    height: 36px;
    margin: 0;
    padding: 0;
    width: 100%;
}
.rrssb-buttons li {
    box-sizing:border-box;
    float: left;
    height: 100%;
    line-height: 13px;
    list-style: none;
    margin: 0;
    padding: 0 2px;
}
.rrssb-buttons li.rrssb-facebook a {
    background-color: #3b5998;
}
.rrssb-buttons li.rrssb-facebook a:hover {
    background-color: #2C4A89;
}
.rrssb-buttons li.rrssb-twitter a {
    background-color: #00aced;
}
.rrssb-buttons li.rrssb-twitter a:hover {
    background-color: #009FE0;
}
.rrssb-buttons li.rrssb-linkedin a {
    background-color: #007bb6;
}
.rrssb-buttons li.rrssb-linkedin a:hover {
    background-color: #006EA9;
}
.rrssb-buttons li.rrssb-googleplus a {
    background-color: #dd4b39;
}
.rrssb-buttons li.rrssb-googleplus a:hover {
    background-color: #D03E2C;
}
.rrssb-buttons li.rrssb-pocket a {
    background-color: #d3505a;
}
.rrssb-buttons li.rrssb-pocket a:hover {
    background-color: #C6434D;
}
.rrssb-buttons li.rrssb-buffer a {
    background-color: #323b43;
}
.rrssb-buttons li.rrssb-buffer a:hover {
    background-color: #252E36;
}
.rrssb-buttons li.rrssb-tumblr a {
    background-color: #32506d;
}
.rrssb-buttons li.rrssb-tumblr a:hover {
    background-color: #254360;
}
.rrssb-buttons li.rrssb-reddit a {
    background-color: #5f99cf;
}
.rrssb-buttons li.rrssb-reddit a:hover {
    background-color: #528CC2;
}
.rrssb-buttons li.rrssb-pinterest a {
    background-color: #cc2127;
}
.rrssb-buttons li.rrssb-pinterest a:hover {
    background-color: #BF141A;
}
.rrssb-buttons li.rrssb-delicious a {
    background-color: #3271cb;
}
.rrssb-buttons li.rrssb-delicious a:hover {
    background-color: #2362BC;
}
.rrssb-buttons li.rrssb-stumbleupon a {
    background-color: #EB4823;
}
.rrssb-buttons li.rrssb-stumbleupon a:hover {
    background-color: #DC3914;
}
.rrssb-buttons li.rrssb-hackernews a {
    background-color: #f60;
}
.rrssb-buttons li.rrssb-hackernews a:hover {
    background-color: rgb(245, 92, 0)
}
.rrssb-buttons li.rrssb-vk a {
    background-color: #4d71a9;
}
.rrssb-buttons li.rrssb-vk a:hover {
    background-color: #43679F;
}
.rrssb-buttons li.rrssb-email a {
    background-color: #3498db;
}
.rrssb-buttons li.rrssb-email a:hover {
    background-color: #278BCE;
}
.rrssb-buttons li a {
    font-weight: bold;
font-size: 11px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #fff;
border-radius: 2px;
text-transform: uppercase;
text-decoration: none !important;

    box-sizing:border-box;
    display: block;
    height: 100%;
    padding: 11px 7px 12px 27px;
    position: relative;
    text-align: center;
    width: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-transition: background-color 0.2s ease-in-out;
    -moz-transition: background-color 0.2s ease-in-out;
    -o-transition: background-color 0.2s ease-in-out;
    transition: background-color 0.2s ease-in-out;
}
.rrssb-buttons li a .rrssb-icon {
    display: block;
    left: 10px;
    padding-top: 9px;
    position: absolute;
    top: 0;
    width: 10%;
}
.rrssb-buttons li a .rrssb-icon svg {
    height: 17px;
    width: 17px;
}
.rrssb-buttons li a .rrssb-icon svg path,
.rrssb-buttons li a .rrssb-icon svg polygon {
    fill: #fff;
}
.rrssb-buttons li a .rrssb-text {
    color: #fff;
}
.rrssb-buttons li a:active {
    box-shadow: inset 1px 3px 15px 0 rgba(22, 0, 0, 0.25);
}
.rrssb-buttons li.small a {
    padding: 0;
}
.rrssb-buttons li.small a .rrssb-icon {
    left: auto;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    top: auto;
    width: 100%;
}
.rrssb-buttons li.small a .rrssb-text {
    visibility: hidden;
}
.rrssb-buttons.large-format {
    height: auto;
}
.rrssb-buttons.large-format li {
    height: auto;
}
.rrssb-buttons.large-format li:first-child:nth-last-child(1) a {
    font-size: 20px;
    font-size: 4vw;
}
.rrssb-buttons.large-format li:first-child:nth-last-child(2) a,
.rrssb-buttons.large-format li:first-child:nth-last-child(2) ~ li a {
    font-size: 16px;
    font-size: 2vw;
}
.rrssb-buttons.large-format li:first-child:nth-last-child(3) a,
.rrssb-buttons.large-format li:first-child:nth-last-child(3) ~ li a {
    font-size: 14px;
    font-size: 1.7vw;
}
.rrssb-buttons.large-format li:first-child:nth-last-child(4) a,
.rrssb-buttons.large-format li:first-child:nth-last-child(4) ~ li a {
    font-size: 13px;
    font-size: 1.4vw;
}
.rrssb-buttons.large-format li:first-child:nth-last-child(5) a,
.rrssb-buttons.large-format li:first-child:nth-last-child(5) ~ li a {
    font-size: 13px;
    font-size: 1.2vw;
}
.rrssb-buttons.large-format li:first-child:nth-last-child(6) a,
.rrssb-buttons.large-format li:first-child:nth-last-child(6) ~ li a {
    font-size: 12px;
    font-size: 1.05vw;
}
.rrssb-buttons.large-format li:first-child:nth-last-child(7) a,
.rrssb-buttons.large-format li:first-child:nth-last-child(7) ~ li a {
    font-size: 11px;
    font-size: .9vw;
}
.rrssb-buttons.large-format li:first-child:nth-last-child(8) a,
.rrssb-buttons.large-format li:first-child:nth-last-child(8) ~ li a {
    font-size: 11px;
    font-size: .8vw;
}
.rrssb-buttons.large-format li:first-child:nth-last-child(9) a,
.rrssb-buttons.large-format li:first-child:nth-last-child(9) ~ li a {
    font-size: 11px;
    font-size: .7vw;
}
.rrssb-buttons.large-format li:first-child:nth-last-child(10) a,
.rrssb-buttons.large-format li:first-child:nth-last-child(10) ~ li a {
    font-size: 11px;
    font-size: .6vw;
}
.rrssb-buttons.large-format li:first-child:nth-last-child(11) a,
.rrssb-buttons.large-format li:first-child:nth-last-child(11) ~ li a {
    font-size: 11px;
    font-size: .5vw;
}
.rrssb-buttons.large-format li a {
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
    border-radius: 0.2em;
    padding: 8.5% 0 8.5% 12%;
}
.rrssb-buttons.large-format li a .rrssb-icon {
    height: 100%;
    left: 7%;
    padding-top: 0;
    width: 12%;
}
.rrssb-buttons.large-format li a .rrssb-icon svg {
    height: 100%;
    position: absolute;
    top: 0;
    width: 100%;
}
.rrssb-buttons.large-format li a .rrssb-text {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.rrssb-buttons.small-format {
    padding-top: 5px;
}
.rrssb-buttons.small-format li {
    height: 80%;
    padding: 0 1px;
}
.rrssb-buttons.small-format li a .rrssb-icon {
    height: 100%;
    padding-top: 0;
}
.rrssb-buttons.small-format li a .rrssb-icon svg {
    height: 48%;
    position: relative;
    top: 6px;
    width: 80%;
}
.rrssb-buttons.tiny-format {
    height: 22px;
    position: relative;
}
.rrssb-buttons.tiny-format li {
    padding-right: 7px;
}
.rrssb-buttons.tiny-format li a {
    background-color: transparent;
    padding: 0;
}
.rrssb-buttons.tiny-format li a .rrssb-icon svg {
    height: 70%;
    width: 100%;
}
.rrssb-buttons.tiny-format li a:hover,
.rrssb-buttons.tiny-format li a:active {
    background-color: transparent;
}
.rrssb-buttons.tiny-format li.rrssb-facebook a .rrssb-icon svg path,
.rrssb-buttons.tiny-format li.rrssb-facebook a .rrssb-icon svg polygon {
    fill: #3b5998;
}
.rrssb-buttons.tiny-format li.rrssb-facebook a .rrssb-icon:hover .rrssb-icon svg path,
.rrssb-buttons.tiny-format li.rrssb-facebook a .rrssb-icon:hover .rrssb-icon svg polygon {
    fill: #2C4A89;
}
.rrssb-buttons.tiny-format li.rrssb-twitter a .rrssb-icon svg path,
.rrssb-buttons.tiny-format li.rrssb-twitter a .rrssb-icon svg polygon {
    fill: #00aced;
}
.rrssb-buttons.tiny-format li.rrssb-twitter a .rrssb-icon:hover .rrssb-icon svg path,
.rrssb-buttons.tiny-format li.rrssb-twitter a .rrssb-icon:hover .rrssb-icon svg polygon {
    fill: #009FE0;
}
.rrssb-buttons.tiny-format li.rrssb-linkedin a .rrssb-icon svg path,
.rrssb-buttons.tiny-format li.rrssb-linkedin a .rrssb-icon svg polygon {
    fill: #007bb6;
}
.rrssb-buttons.tiny-format li.rrssb-linkedin a .rrssb-icon:hover .rrssb-icon svg path,
.rrssb-buttons.tiny-format li.rrssb-linkedin a .rrssb-icon:hover .rrssb-icon svg polygon {
    fill: #006EA9;
}
.rrssb-buttons.tiny-format li.rrssb-googleplus a .rrssb-icon svg path,
.rrssb-buttons.tiny-format li.rrssb-googleplus a .rrssb-icon svg polygon {
    fill: #dd4b39;
}
.rrssb-buttons.tiny-format li.rrssb-googleplus a .rrssb-icon:hover .rrssb-icon svg path,
.rrssb-buttons.tiny-format li.rrssb-googleplus a .rrssb-icon:hover .rrssb-icon svg polygon {
    fill: #D03E2C;
}
.rrssb-buttons.tiny-format li.rrssb-pocket a .rrssb-icon svg path,
.rrssb-buttons.tiny-format li.rrssb-pocket a .rrssb-icon svg polygon {
    fill: #d3505a;
}
.rrssb-buttons.tiny-format li.rrssb-pocket a .rrssb-icon:hover .rrssb-icon svg path,
.rrssb-buttons.tiny-format li.rrssb-pocket a .rrssb-icon:hover .rrssb-icon svg polygon {
    fill: #C6434D;
}
.rrssb-buttons.tiny-format li.rrssb-buffer a .rrssb-icon svg path,
.rrssb-buttons.tiny-format li.rrssb-buffer a .rrssb-icon svg polygon {
    fill: #323b43;
}
.rrssb-buttons.tiny-format li.rrssb-buffer a .rrssb-icon:hover .rrssb-icon svg path,
.rrssb-buttons.tiny-format li.rrssb-buffer a .rrssb-icon:hover .rrssb-icon svg polygon {
    fill: #252E36;
}
.rrssb-buttons.tiny-format li.rrssb-tumblr a .rrssb-icon svg path,
.rrssb-buttons.tiny-format li.rrssb-tumblr a .rrssb-icon svg polygon {
    fill: #32506d;
}
.rrssb-buttons.tiny-format li.rrssb-tumblr a .rrssb-icon:hover .rrssb-icon svg path,
.rrssb-buttons.tiny-format li.rrssb-tumblr a .rrssb-icon:hover .rrssb-icon svg polygon {
    fill: #254360;
}
.rrssb-buttons.tiny-format li.rrssb-reddit a .rrssb-icon svg path,
.rrssb-buttons.tiny-format li.rrssb-reddit a .rrssb-icon svg polygon {
    fill: #5f99cf;
}
.rrssb-buttons.tiny-format li.rrssb-reddit a .rrssb-icon:hover .rrssb-icon svg path,
.rrssb-buttons.tiny-format li.rrssb-reddit a .rrssb-icon:hover .rrssb-icon svg polygon {
    fill: #528CC2;
}
.rrssb-buttons.tiny-format li.rrssb-pinterest a .rrssb-icon svg path,
.rrssb-buttons.tiny-format li.rrssb-pinterest a .rrssb-icon svg polygon {
    fill: #cc2127;
}
.rrssb-buttons.tiny-format li.rrssb-pinterest a .rrssb-icon:hover .rrssb-icon svg path,
.rrssb-buttons.tiny-format li.rrssb-pinterest a .rrssb-icon:hover .rrssb-icon svg polygon {
    fill: #BF141A;
}
.rrssb-buttons.tiny-format li.rrssb-delicious a .rrssb-icon svg path,
.rrssb-buttons.tiny-format li.rrssb-delicious a .rrssb-icon svg polygon {
    fill: #3271cb;
}
.rrssb-buttons.tiny-format li.rrssb-delicious a .rrssb-icon:hover .rrssb-icon svg path,
.rrssb-buttons.tiny-format li.rrssb-delicious a .rrssb-icon:hover .rrssb-icon svg polygon {
    fill: #2362BC;
}
.rrssb-buttons.tiny-format li.rrssb-stumbleupon a .rrssb-icon svg path,
.rrssb-buttons.tiny-format li.rrssb-stumbleupon a .rrssb-icon svg polygon {
    fill: #EB4823;
}
.rrssb-buttons.tiny-format li.rrssb-stumbleupon a .rrssb-icon:hover .rrssb-icon svg path,
.rrssb-buttons.tiny-format li.rrssb-stumbleupon a .rrssb-icon:hover .rrssb-icon svg polygon {
    fill: #DC3914;
}
.rrssb-buttons.tiny-format li.rrssb-hackernews a .rrssb-icon svg path,
.rrssb-buttons.tiny-format li.rrssb-hackernews a .rrssb-icon svg polygon {
    fill: #f60;
}
.rrssb-buttons.tiny-format li.rrssb-hackernews a .rrssb-icon:hover .rrssb-icon svg path,
.rrssb-buttons.tiny-format li.rrssb-hackernews a .rrssb-icon:hover .rrssb-icon svg polygon {
    fill: rgb(245, 92, 0);
}
.rrssb-buttons.tiny-format li.rrssb-vk a .rrssb-icon svg path,
.rrssb-buttons.tiny-format li.rrssb-vk a .rrssb-icon svg polygon {
    fill: #4d71a9;
}
.rrssb-buttons.tiny-format li.rrssb-vk a .rrssb-icon:hover .rrssb-icon svg path,
.rrssb-buttons.tiny-format li.rrssb-vk a .rrssb-icon:hover .rrssb-icon svg polygon {
    fill: #43679F;
}
.rrssb-buttons.tiny-format li.rrssb-email a .rrssb-icon svg path,
.rrssb-buttons.tiny-format li.rrssb-email a .rrssb-icon svg polygon {
    fill: #3498db;
}
.rrssb-buttons.tiny-format li.rrssb-email a .rrssb-icon:hover .rrssb-icon svg path,
.rrssb-buttons.tiny-format li.rrssb-email a .rrssb-icon:hover .rrssb-icon svg polygon {
    fill: #278BCE;
}
 

Hướng dẫn sử dụng

XenForo 1 XenForo 2
Translate by PVS


Nhà Tài Trợ

Mút Xốp Không Gian
pallet Thịnh Phát
Điện Lạnh Thịnh Phát
Top Bottom