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

Thảo luận trong 'Addon, Styling and Customization Questions' bắt đầu bởi Cu tí siêu nhân, 29/07/2017.

  1. Cu tí siêu nhân

    Cu tí siêu nhân Thượng Đế

    Tham gia:
    14/01/2016
    Bài viết:
    155
    Đã được thích:
    50
    Điểm thành tích:
    28
    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ích bài này.
  2. tpoclub

    tpoclub Thượng Đế

    Tham gia:
    07/03/2015
    Bài viết:
    116
    Đã được thích:
    97
    Điểm thành tích:
    28
    Giới tính:
    Nam
    Nghề nghiệp:
    t. Blog! Admin
    Nơi ở:
    Đồng Nai - Việt Nam
    Web:
    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ích bài này.
  3. Cu tí siêu nhân

    Cu tí siêu nhân Thượng Đế

    Tham gia:
    14/01/2016
    Bài viết:
    155
    Đã được thích:
    50
    Điểm thành tích:
    28
    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
     
  4. newbean

    newbean Thượng Đế

    Tham gia:
    10/05/2017
    Bài viết:
    48
    Đã được thích:
    32
    Điểm thành tích:
    18
    Giới tính:
    Nam
    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
     
  5. virutmt

    virutmt Thượng Đế

    Tham gia:
    03/10/2017
    Bài viết:
    52
    Đã được thích:
    4
    Điểm thành tích:
    8
    Giới tính:
    Nam
    Nơi ở:
    Hải Dương
    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
     
  6. hacobi1102

    hacobi1102 Thượng Đế

    Tham gia:
    10/03/2016
    Bài viết:
    353
    Đã được thích:
    142
    Điểm thành tích:
    43
    Giới tính:
    Nam
    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;
    }
     
  7. virutmt

    virutmt Thượng Đế

    Tham gia:
    03/10/2017
    Bài viết:
    52
    Đã được thích:
    4
    Điểm thành tích:
    8
    Giới tính:
    Nam
    Nơi ở:
    Hải Dương
    Gì thế này. view rồi copy ra đây à
     

Chia sẻ trang này