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

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!

 

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

 

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

 

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
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;
}

 

Gì thế này. view rồi copy ra đây à