Hướng dẫn thay đổi hình ảnh chia sẻ mạng xã hội cho XenForo

Đăng bởi vanthoi, 17/10/17, trong Xenforo Template. Trả lời: 2 Lượt xem: 4,559.

  1. vanthoi

    vanthoi Administrator
    Quản Trị Viên
    • 163/202

    Tham gia:
    1/9/12
    Bài viết:
    2,731
    Được thích:
    14,023
    Thành tích:
    163
    Giới tính:
    Nam
    Nghề nghiệp:
    Lập trình viên
    Đến từ:
    Bình Phục, Quảng Nam
    #1 vanthoi, 17/10/17 Lượt xem: 4,559
    Thấy nhiều bạn hỏi cách thay đổi hình ảnh mô tả khi chia sẻ lên các mạng xã hội của XenForo như Facebook, Google+, Twitter,... Nên mình mạng phép hướng dẫn cho các bạn làm thế nào để thay đổi thông tin này. Nếu có gì không đúng các bạn góp ý nha!

    chia-se-facebook-xenforo.

    Đối với XenForo mặc định thì các thẻ meta chia sẻ lên các mạng xã hội thường không được tích hợp đầy đủ. Để khắc phục nhược điểm này cũng như tăng seo cho website của bạn. Hãy làm theo các hướng dẫn bên dưới.

    LƯU Ý:

    Đối với cách này các bài viết nào có hình ảnh đính kèm lên đầu tiên thì sẽ được lấy làm hình ảnh mô tả cho bài viết đó. Trường hợp nếu là đính kèm không có hoặc là file không phải hình ảnh thì sẽ sử dụng logo.og mặc định của site để làm ảnh mô tả cho bài viết!

    Bước 1: Thay đổi template Thread_view

    Bạn tìm đến code sau và thêm vào bên trên nó:
    PHP:
    <xen:container var="$head.openGraph"><xen:include template="open_graph_meta">
    Thêm vào bên trên code sau:
    PHP:
    <xen:if is="{$firstPost.attachments}">
        <
    xen:foreach loop="$firstPost.attachments" value="$attachmenti="$icount="$count">
            <
    xen:if is="{$i} == 1 AND {$attachment.thumbnailUrl}">
                <
    xen:set var="$ogThumb">{xen:link full:attachments$attachment}</xen:set>
            </
    xen:if>
        </
    xen:foreach>
        </
    xen:if>
    Thay đổi đoạn sau:
    PHP:
    <xen:set var="$avatar">{xen:helper fullurl, @ogLogoPath1}</xen:set>
    Thành đoạn code này:
    PHP:
    <xen:set var="$avatar"><xen:if is="{$ogThumb}">{$ogThumb}<xen:else />{xen:helper fullurl, @ogLogoPath1}</xen:if></xen:set>
    Bước 2: Thay đổi Template open_graph_meta

    Thay đổi toàn bộ lại thành như sau:
    PHP:
        <meta property="og:site_name" content="{$xenOptions.boardTitle}/>
        <
    xen:if is="{$avatar}"><meta property="og:image" content="{$avatar}/></xen:if>
        <
    xen:if is="!{$avatar}"><meta property="og:image" content="{xen:helper fullurl, @ogLogoPath, 1}" /></xen:if>
        <
    meta property="og:type" content="{xen:if $ogType$ogType, article}" />
        <
    meta property="og:url" content="{xen:raw $url}" />
        <
    meta property="og:title" content="{xen:raw $title}" />
        <
    xen:if is="{$description}"><meta property="og:description" content="{xen:raw $description}" /></xen:if>
        <
    xen:if is="!{$description}"><meta property="og:description" content="{$xenOptions.boardDescription}/></xen:if>
        {
    xen:raw $ogExtraHtml}
        <
    xen:if is="{$xenOptions.facebookAppId}"><meta property="fb:app_id" content="{$xenOptions.facebookAppId}/></xen:if>
        <
    xen:if is="{$xenOptions.facebookAdmins}"><meta property="fb:admins" content="{xen:helper implode, {$xenOptions.facebookAdmins}, ','}" /></xen:if>
    Trường hợp có cài [bd] Social Share:

    Thay đổi template bdsocialshare_open_graph_meta như sau:
    PHP:
    <xen:if is="{xen:helper bdSocialShare_getOption, twitterCard}">
        <
    meta property="twitter:card" content="summary" />
        <
    meta property="twitter:title" content="{xen:raw $title}" />
        <
    xen:if is="{$description}"><meta property="twitter:description" content="{xen:raw $description}" /></xen:if> 
        <
    xen:if is="!{$description}"><meta property="twitter:description" content="{$xenOptions.boardDescription}/></xen:if>
        <
    xen:if is="{$bdSocialShare_imageSrc}">
            <
    meta property="twitter:image" content="{$ogThumb}/>
        <
    xen:else />
            <
    xen:if is="{$avatar}"><meta property="twitter:image" content="{$avatar}/></xen:if>
            <
    xen:if is="!{$avatar}"><meta property="twitter:image" content="{xen:helper fullurl, @ogLogoPath, 1}" /></xen:if>
        </
    xen:if>
        <
    meta property="twitter:url" content="{xen:raw $url}" />
    </
    xen:if>

    <
    xen:edithint template="open_graph_meta" />
    Vậy là xong rồi. Bạn muốn thử có thể vào đây: Công cụ thu thập thông tin của Facebook & Clear Cache


    Cuối cùng chúc các bạn thành công!
     

    Chia sẻ

    Đang tải...
    Đang tải...
  2. chinameat

    chinameat Thành viên mới
    Thành Viên
    • 1/13

    Tham gia:
    20/7/18
    Bài viết:
    1
    Được thích:
    0
    Thành tích:
    1
    Giới tính:
    Nam
    #2 chinameat, 30/7/18 Lượt xem: 4,559
    Đã làm theo hướng dẫn và khi chia sẻ lên FB thì hiển thị đúng Logo của Forum.

    Nhưng có 1 vấn đề muốn hỏi bác Admin là,làm thế nào để hiển thị hình ảnh khi trong bài viết có link hình ản đính kèm?

    Với setup hiện tại thì topic có hình ảnh + ko có hình ảnh đều chỉ hiện thị logo của forum khi share lên FB thôi.
     
  3. vanthoi

    vanthoi Administrator
    Quản Trị Viên
    • 163/202

    Tham gia:
    1/9/12
    Bài viết:
    2,731
    Được thích:
    14,023
    Thành tích:
    163
    Giới tính:
    Nam
    Nghề nghiệp:
    Lập trình viên
    Đến từ:
    Bình Phục, Quảng Nam
    #3 vanthoi, 1/8/18 Lượt xem: 4,559
    Chào bạn. Đối với bài hướng dẫn này là đã fix hình ảnh đính kèm làm hình đại diện trên facebook. Còn nều bạn bị lỗi không hiển thị, thì kiểm tra lại phần thông tin bài viết đó. Có thể nhấn F12 view meta og image xem lúc đó là hình ảnh gì. Nếu hình ảnh đúng rồi thì vào link công cụ facebook cuối bài rồi bấm thu thập lại để nó cập nhật!
     

Chia sẻ

Loading...
Đang tải...