In today's digital marketing era, the close integration of websites and social media is the key to enhancing user interaction and brand influence.AnQiCMS as an efficient content management system, fully considers this user's needs and provides a flexible and convenient way to display the WeChat QR code of the website and various custom social media links.Whether it is to facilitate users to add WeChat consultation or guide them to visit your Facebook, Twitter and other platforms, AnQiCMS can help you easily achieve this, making your website a bridge connecting users.
Step 1: Configure contact information and social media on the backend
Firstly, you need to log in to the backend management interface of AnQiCMS, find“Backend Settings”of“Contact Information Settings”Options. This page is where you can centrally manage all contact information.
On this page, you will see some preset contact information fields, such as 'Contact Person', 'Contact Phone', 'Contact Email', as well as 'WeChat ID' and 'WeChat QR Code' related to WeChat.For WeChat QR code, just click the upload button and select the QR code image you have prepared.The system will automatically save and manage this picture properly.
The strength of AnQiCMS lies in its high customizability. If the preset social media platforms (such as QQ, WhatsApp, Facebook, Twitter, Tiktok, Pinterest, Linkedin, Instagram, Youtube) do not fully meet your needs, or if you want to add some more personalized social media entries, you can do so by clicking on theCustom setting parametersTo implement the function. Click "Add ParameterTelegramLink），and fill in the corresponding "parameter value" (i.e., the link address). Don't forget to add a "note" for future management and identification. For example, you can set the parameter name asTelegramLinkEnglish, parameter value filled inhttps://t.me/your_channelEnglish, note is "Telegram group link".
After saving these settings, you have successfully configured all the necessary contact information and social media details in the AnQiCMS backend.
第二步：In the website template, call and display this information.
Completed the background configuration, the next step is to display this information on the website frontend.AnQiCMS uses a tag system similar to Django template engine, making it very intuitive to call these contact methods in the template.contactlabel.
The common syntax of this label is{% contact 变量名称 with name="字段名称" %}.字段名称which is the field names you filled in the "Contact Information Settings" in the background, such asWechat/Qrcode, or you can customize itTelegramLinketc.
1. Display WeChat QR code:To display the WeChat QR code, you can do so in the footer of the website (usuallypartial/footer.html）、Side bar or a dedicated "Contact Us" page, use<img>label combined withcontacttags to call. For example:
<div class="wechat-qr">
<span>关注我们的微信：</span>
<img src="{% contact with name="Qrcode" %}" alt="微信二维码" class="responsive-image" />
</div>
In this way, the QR code images you upload on the backend will be automatically displayed on the website.
2. Show WeChat personal number or WeChat ID text:If you only want to show the WeChat ID text for ease of copying and adding, you can call it like this:
<p>我们的微信号：{% contact with name="Wechat" %}</p>
3. Show other preset social media links:For other social media links, such as your Facebook homepage link, you can call it like this:
<p>访问我们的Facebook：<a href="{% contact with name="Facebook" %}" target="_blank" rel="nofollow noopener">点击这里</a></p>
You can replace it as neededname="Facebook"response forname="Twitter"/name="Instagram"with the corresponding preset fields.
4. Display your customized social media link:If you have customizedTelegramLinkThen, when calling in the template, you just need to use the parameter name you set:
<p>加入我们的Telegram群组：<a href="{% contact with name="TelegramLink" %}" target="_blank" rel="nofollow noopener">Telegram</a></p>
Important reminder: about|safeFilterIt is worth noting that when you enter content containing HTML code (such as complex social media icon codes, or a JavaScript code snippet) in the custom field on the backend, in order to ensure that the content can be correctly parsed and not escaped as plain text when the template is called, you may need to add|safefilter. For example:{{ customHtmlContent|safe }}. But for image URLs or plain text links, no additional processing is usually required.
By following these simple steps, you can flexibly display your WeChat QR code and various social media links on the AnQiCMS website, greatly enhancing the interactivity and user experience of the site.AnQiCMS powerful content management capabilities make your website more than just a carrier of content, but also a powerful tool for connecting with users and expanding brand influence.
Common Questions (FAQ)
Q1：Why doesn't the front-end page update when I modify the WeChat QR code or social media link in the "Contact Information Settings" on the back-end?A1：This is usually caused by website caching.In AnQiCMS, to improve the speed of website access, the system will generate cache.When you modify the data in the background, the front-end page may not immediately reflect these changes.You can try to find the 'Update Cache' button in the background management interface (usually in the top navigation bar or sidebar), click to clear all caches, and then refresh the front-end page to see the latest changes.
Q2：Can I add an icon instead of plain text in a custom social media link?A2：Of course, you can. When filling in the "Parameter Value" under the "Custom Settings" in the "Contact Information Settings" in the background, you can directly enter HTML code, for example, including icons.<i>or<img>Tags, as well as links. For example, you can fill in the parameter value as<a href="https://t.me/your_channel" target="_blank"><img src="/path/to/telegram-icon.png" alt="Telegram"></a>. When calling the template, in order to ensure that these HTML codes can be correctly parsed by the browser, you need to add|safeFilter, for example:{{ telegramLinkVar|safe }}.
Q3：How can I make my social media link open in a new window or tab?A3：This is a standard HTML attribute setting. In the construction of your social media link,<a>Tag within, addtarget="_blank"Attribute. For example:<a href="您的链接地址" target="_blank" rel="nofollow noopener">点击访问</a>. It is recommended to add at the same timerel="nofollow noopener"attributes,nofollowTell the search engine not to track this link,noopenerwhich can enhance security and prevent new pages from accessing the original page.window.openerobject.