Addon 2x A Personalized Share this page Widget - Cá nhân hóa Widget Chia sẻ trang này cho XenForo 2

[PVS]

A Personalized Share this page Widget - Cá nhân hóa Widget Chia sẻ trang này cho XenForo 2


Đầu tiên, tạo một trường người dùng tùy chỉnh userRealName trong thông tin chi tiết hồ sơ dưới dạng Single-line text box để lấy tên thật của người dùng (dù là tên hay họ). Điều này sẽ giúp tùy chỉnh tin nhắn có thể chia sẻ để cá nhân hóa cho người nhận.

Tải tệp Invite.png (đính kèm) lên thư mục gốc của bạn hoặc bất kỳ nơi nào bạn lưu trữ hình ảnh. Nếu bạn thay đổi thư mục, hãy đảm bảo thẻ <img> phản ánh đường dẫn hình ảnh mới.

Sau đó, tạo widget HTML.

Đối với widget template, hãy sử dụng đoạn code này mà không có Advanced mode:

<div class="block" {{ widget_data($widget) }}>
  <div class="block-container">
    <div class="block-row">
      <a class="shareButtons-button shareButtons-button--share is-hidden"
        data-xf-init="web-share"
        data-text="<xf:if is="$xf.visitor.Profile.custom_fields.userRealName">{{ $xf.visitor.Profile.custom_fields.userRealName }} (@{{ $xf.visitor.username }})<xf:elseif is="$xf.visitor.username" /> @{{ $xf.visitor.username }}<xf:else /> Someone </xf:if> thought that you would enjoy {{ $xf.options.boardTitle }} — {{ $xf.options.boardDescription }}.
     
        {{ $xf.options.boardTitle }} can be found at: {{ $xf.options.homePageUrl }}
     
        However, they might think that you would be more interested in this:
        " data-hide=".shareButtons-button:not(.shareButtons-button--share)">
      <img src="{{ $xf.homePageUrl }}/invite.png">
        </a>
    </div>
  </div>
</div>

Và nó sẽ xuất hiện như thế này: Nếu bạn không muốn nó nằm trong hộp có đường viền, hãy bật advanced mode và sử dụng chế độ này làm template:

​

<div class="block" {{ widget_data($widget) }}>
      <a class="shareButtons-button shareButtons-button--share is-hidden"
        data-xf-init="web-share"
        data-text="<xf:if is="$xf.visitor.Profile.custom_fields.userRealName">{{ $xf.visitor.Profile.custom_fields.userRealName }} (@{{ $xf.visitor.username }})<xf:elseif is="$xf.visitor.username" /> @{{ $xf.visitor.username }}<xf:else /> Someone </xf:if> thought that you would enjoy {{ $xf.options.boardTitle }} — {{ $xf.options.boardDescription }}.
     
        {{ $xf.options.boardTitle }} can be found at: {{ $xf.options.homePageUrl }}
     
        However, they might think that you would be more interested in this:
        " data-hide=".shareButtons-button:not(.shareButtons-button--share)">
      <img src="{{ $xf.homePageUrl }}/invite.png">
        </a>
</div>

Nó sẽ xuất hiện như sau: Thử nghiệm với vị trí widget và hình ảnh được sử dụng để xem hình ảnh nào phù hợp nhất với trang của bạn. Điều này sẽ cho phép bạn chia sẻ diễn đàn theo cách thân thiện hơn như được thấy bên dưới (với Gmail, đã thử nghiệm với các cuộc trò chuyện trên Messenger):

Đã đăng nhập

Đã đăng nhập với tên đã đặt

Đã đăng xuất
​

Bạn sẽ phải thêm điều này vào extra.less để ẩn block này khỏi bất kỳ ai không sử dụng thiết bị di động (XF 2.2.9 và mới hơn):

​

@media (min-width: 480px) {
    [data-widget-key="inviteFriends"] {
        display: none;
    }
}

Ẩn chỉ hoạt động trên XF 2.2.9 trở lên. Nếu bạn đang chạy phiên bản XF cũ hơn, bạn sẽ phải sử dụng Advanced mode với template đi kèm. Theo cách này, hình ảnh/liên kết sẽ không hiển thị trên bất kỳ thiết bị nào khác ngoài thiết bị di động.

<div class="block" {{ widget_data($widget) }}>
  <div class="block-container">
    <div class="block-row">
      <a class="shareButtons-button shareButtons-button--share is-hidden"
        data-xf-init="web-share"
        data-text="<xf:if is="$xf.visitor.Profile.custom_fields.userRealName">{{ $xf.visitor.Profile.custom_fields.userRealName }} (@{{ $xf.visitor.username }})<xf:elseif is="$xf.visitor.username" /> @{{ $xf.visitor.username }}<xf:else /> Someone </xf:if> thought that you would enjoy {{ $xf.options.boardTitle }} — {{ $xf.options.boardDescription }}.
     
        {{ $xf.options.boardTitle }} can be found at: {{ $xf.options.homePageUrl }}
     
        However, they might think that you would be more interested in this:
        " data-hide=".shareButtons-button:not(.shareButtons-button--share)">
      <img src="{{ $xf.homePageUrl }}/invite.png">
        </a>
    </div>
  </div>
</div>

Để tương thích ngược, không cần chỉnh sửa extra.less vì widget HTML không thể ẩn trong XF 2.2.8 trở xuống. Thay vào đó, hãy sử dụng template này với advanced mode được bật để xem cùng kết quả như nhau

Lưu ý : "can be found at" để trống vì không định cấu hình URL trang trong bản demo XF. Điều này sẽ không thành vấn đề trên các bản cài đặt XF mới được thiết lập đúng cách hoặc nếu các biến được thay đổi thành văn bản. URL thứ hai là trang hiện tại mà người dùng đang truy cập và cố gắng chia sẻ, sẽ là một chủ đề nếu bạn đặt widget ở Thread view: Sidebar, v.v.

Chúc các bạn thành công.

Nguồn: xenforo.com​