- Compatible XF Versions
- 2.2 , 2.3
- Visible Branding
- No
First, create a custom user field userRealName in the profile details as a Single-line text box to capture the user's real name (either first or last name). This will help customize the shareable message to personalize it for the recipient. Upload the Invite.png (attachment)
file to your root directory or wherever you store your images. If you change directories, make sure the tag reflects the new image path. Then, create the HTML widget. For the widget template, use this code without Advanced mode:
And it will appear like this: If you don't want it in a bordered box, enable advanced mode and use this as a template:
It will look like this: Experiment with the widget placement and the image used to see which image best fits your page. This will allow you to share the forum in a more user-friendly way as seen below (with Gmail, tested with Messenger chats):
You will need to add this
Hiding only works on XF 2.2.9 and above. If you are running an older version of XF, you will have to use Advanced mode with the included template. This way the image/link will not show up on anything other than mobile.
For backwards compatibility, no edits are needed
Note : "can be found at" is left blank because the page URL is not configured in the XF demo. This will not be an issue on properly setup new XF installations or if the variables are changed to text. The second URL is the current page the user is on and trying to share, which will be a thread if you place the widget in Thread view: Sidebar, etc.
Good luck!
file to your root directory or wherever you store your images. If you change directories, make sure the tag reflects the new image path. Then, create the HTML widget. For the widget template, use this code without Advanced mode:
<img>
HTML:
<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>And it will appear like this: If you don't want it in a bordered box, enable advanced mode and use this as a template:
HTML:
<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>It will look like this: Experiment with the widget placement and the image used to see which image best fits your page. This will allow you to share the forum in a more user-friendly way as seen below (with Gmail, tested with Messenger chats):
You will need to add this
extra.less to hide this block from anyone not using a mobile device (XF 2.2.9 and newer):
CSS:
@media (min-width: 480px) {
[data-widget-key="inviteFriends"] {
display: none;
}
}Hiding only works on XF 2.2.9 and above. If you are running an older version of XF, you will have to use Advanced mode with the included template. This way the image/link will not show up on anything other than mobile.
HTML:
<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>For backwards compatibility, no edits are needed
extra.less as the HTML widget cannot be hidden in XF 2.2.8 and below. Instead, use this template with advanced mode enabled to see the same result.Note : "can be found at" is left blank because the page URL is not configured in the XF demo. This will not be an issue on properly setup new XF installations or if the variables are changed to text. The second URL is the current page the user is on and trying to share, which will be a thread if you place the widget in Thread view: Sidebar, etc.
Good luck!
