How to display the WeChat QR code of the website or customize social media links?

In today's digital marketing age, the close integration of websites with social media is crucial for enhancing user engagement and brand influence.AnQiCMS as an efficient content management system fully considers the user's needs and provides a flexible and convenient way to display the website's WeChat QR code and various custom social media links.In order 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 information in the background

First, you need to log in to the AnQiCMS backend management interface, find“Background Settings”ofthe "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'.For WeChat QR code, simply click the upload button and select the QR code image you have prepared.The system will automatically save and manage this image 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 you want to add some more personalized social media entries, you can do so through the page below."Custom Setting Parameters"To implement the function. Click "Add Parameter" to set a "Parameter Name" for your new social media link (for example:TelegramLink)，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 toTelegramLinkParameter value enteredhttps://t.me/your_channelNote: 'Telegram group link'.

After saving these settings, you have successfully configured all the necessary contact information and social media information on the AnQiCMS backend.

Step two: Call and display this information in the website template

After completing the background configuration, the next step is to display this information on the website's frontend.AnQiCMS uses a tag system similar to the Django template engine, making it very intuitive to call these contact methods in the template.You will mainly use a name calledcontacttags.

The common syntax of this tag is{% contact 变量名称 with name="字段名称" %}. Among them,字段名称These are the field names you filled in the "Contact Information Settings" in the background, such asWechat/QrcodeOr customizedTelegramLinketc.

1. Show WeChat QR code:To show the WeChat QR code, you can place it in the footer of the website (usuallypartial/footer.html）, in the sidebar or a dedicated “Contact Us” page, use<img>Label collaborationcontacttags to call.

<div class="wechat-qr">
    <span>关注我们的微信：</span>
    <img src="{% contact with name="Qrcode" %}" alt="微信二维码" class="responsive-image" />
</div>

Thus, the QR code images you upload on the backend will automatically display on the website.

2. Display WeChat personal number or WeChat ID text:If you only want to display the WeChat ID text for easy 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"Withname="Twitter"/name="Instagram"with the corresponding preset fields.

4. Display your custom social media link:If you have customizedTelegramLinkSo when calling in the template, just 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 in the custom field in the background (such as complex social media icon codes, or a segment of JavaScript code), when calling the template, in order to ensure that the content can be parsed correctly and not escaped as plain text, you may need to add after the variable|safea filter. For example:{{ customHtmlContent|safe }}. But for image URLs or plain text links, usually no additional processing is 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 not just a carrier of content, but also a powerful tool for connecting users and expanding brand influence.

Frequently Asked Questions (FAQ)

Q1: Why didn't the front-end page update after I modified the WeChat QR code or social media link in the "Contact Information Settings" in the background?A1: This is usually due to website caching. In AnQiCMS, in order to improve website access speed, the system generates cache.After 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 modifications.

Q2: Can I add an icon instead of plain text in a custom social media link?A2: Of course you can. In the background "Contact Information Settings" under "Custom Parameter Settings", when you fill in the "Parameter Value", you can directly enter HTML code, such as icons.<i>tags or<img>Tags, as well as links. For example, you can enter 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, to ensure that these HTML codes are correctly parsed by the browser, you need to add the variable after|safefor example:{{ telegramLinkVar|safe }}.

How can I make my social media link open in a new window or tab?A3: This is a standard HTML attribute setting. When you are building your social media link's<a>Add in the tag,target="_blank"Just attributes. For example:<a href="您的链接地址" target="_blank" rel="nofollow noopener">点击访问</a>Recommended to add at the same time,rel="nofollow noopener"Property,nofollowTell the search engine not to track this link,noopenerIt can enhance security, prevent new pages from accessing the original page.window.openerObject.