How to display WeChat QR code or social media account links in AnQiCMS templates

In this era where content is king, businesses and self-media operators all know the importance of establishing an effective connection with users.And social media, especially WeChat, is undoubtedly an efficient channel for connecting users, sharing information, and providing services.AnQiCMS (AnQiCMS) is a system designed for efficient content management and naturally understands this well, providing powerful and convenient support for users to flexibly display WeChat QR codes or links to various social media accounts in website templates.

This article will delve into the perspective of a website operations expert to analyze how to naturally integrate these key social elements into AnQiCMS templates, helping your website better serve visitors and increase interaction rates.

Social media, a bridge connecting users

In content marketing and brand building, simply publishing high-quality content is not enough; it also requires providing users with convenient interactive entry points.Whether it is to guide users to pay attention to the official account to get the latest dynamic, join the community for in-depth communication, or link to other social platforms to expand influence, WeChat QR codes and social media account links play a crucial role.They can effectively shorten the distance between users and you, transforming website traffic into a real user community.

Advantages and implementation path of AnQiCMS

AnQiCMS with its concise and efficient Go language architecture and flexible template mechanism makes content display extremely convenient.In integrating social media elements, it provides a set of intuitive 'contact information settings' features, allowing you to manage these information centrally in the background without touching complex code, and call them at any time in the front-end template.

The system is built with a series of commonly used social media fields, such as WeChat account, WeChat QR code, QQ, WhatsApp, Facebook, Twitter, and so on.That's even better, if your business has special requirements, AnQiCMS also supports custom contact information parameters to ensure your social media strategy is fully covered.This information is configured in the background, and it can be easily presented at any location on the website using the powerful Django-style template engine of AnQiCMS with simple tags.

Practical: skillfully using contact information tags in templates

In the AnQiCMS template file, all social media contact information is passed through a unifiedcontactLabel to obtain. This label is very flexible, you just need to specify the field name you need to retrieve, and you can easily retrieve the corresponding data.

Display the WeChat QR code: Make scanning and following within reach.

WeChat QR code is the key to connecting to the WeChat ecosystem. You can directly upload WeChat QR code pictures in the "Background Settings" of AnQiCMS backend "Contact Information Settings".Once uploaded, it becomes very simple to call it in the template.Usually, we would place the QR code at the footer, sidebar, or a dedicated "Contact Us" page:

{# 获取并显示微信二维码图片 #}
{% contact qrcodeUrl with name="Qrcode" %}
{% if qrcodeUrl %}
    <div class="wechat-qrcode">
        <p>扫描微信二维码,获取更多精彩内容</p>
        <img src="{{ qrcodeUrl|safe }}" alt="微信二维码" class="responsive-img">
    </div>
{% endif %}

Here, qrcodeUrlThis is a temporary variable defined for the address of the WeChat QR code image we obtained.name="Qrcode"Explicitly tell the system that we need the WeChat QR code field configured on the backend.|safeThe use of the filter here is to ensure that the image path string is not unexpectedly escaped, although thesrcattribute is not usually required, but it is good practice to use it for output that may contain special characterssafeThe habit is good, it can effectively avoid potential rendering problems.{% if qrcodeUrl %}This judgment ensures that related elements will be displayed on the page only when the background is configured with a QR code, avoiding the embarrassment of an empty image frame.

Integrate links to multiple social platforms: Expand your online footprint

In addition to WeChat, AnQiCMS also preset fields for links to various mainstream social media platforms, such as Facebook, Twitter, Instagram, LinkedIn, YouTube, and so on.You can selectively display these links on the website according to your brand strategy.For example, display your social media matrix consistently in the website footer:

<div class="social-media-links">
    {% contact wechatAccount with name="Wechat" %}
    {% if wechatAccount %}
        <a href="https://weixin.qq.com/r/{{ wechatAccount }}" target="_blank" rel="nofollow">
            <i class="icon-wechat"></i>
            <span>微信</span>
        </a>
    {% endif %}

    {% contact facebookLink with name="Facebook" %}
    {% if facebookLink %}
        <a href="{{ facebookLink }}" target="_blank" rel="nofollow">
            <i class="icon-facebook"></i>
            <span>Facebook</span>
        </a>
    {% endif %}

    {% contact twitterLink with name="Twitter" %}
    {% if twitterLink %}
        <a href="{{ twitterLink }}" target="_blank" rel="nofollow">
            <i class="icon-twitter"></i>
            <span>Twitter</span>
        </a>
    {% endif %}

    {# 您可以根据需要,继续添加其他社交媒体链接,如: #}
    {% contact instagramLink with name="Instagram" %}
    {% if instagramLink %}
        <a href="{{ instagramLink }}" target="_blank" rel="nofollow">
            <i class="icon-instagram"></i>
            <span>Instagram</span>
        </a>
    {% endif %}
    
    {% contact whatsappNumber with name="WhatsApp" %}
    {% if whatsappNumber %}
        <a href="https://wa.me/{{ whatsappNumber }}" target="_blank" rel="nofollow">
            <i class="icon-whatsapp"></i>
            <span>WhatsApp</span>
        </a>
    {% endif %}
</div>

Here we create a link for each social platform and use it in the same way{% if ... %}Make a judgment. Please note that you may need to adjust according to the actual situation for WeChat official account links.hrefFor example, the format of the attribute is.https://weixin.qq.com/r/{{ wechatAccount }}And in this form.target="_blank" rel="nofollow"It is the standard practice for web page link, the former ensures that the link opens in a new tab, and the latter informs the search engine not to pass the weight, often used for external links.<i>Tags are usually used to display font icons, you may need to integrate icon libraries like Font Awesome to display corresponding social media icons.

Custom social media link: meet your personalized needs

If the built-in social media fields of AnQiCMS do not cover your needs, for example, if you want to add a Telegram group link or a Xiaohongshu account, the 'Custom Parameters' feature in the 'Contact Information Settings' of AnQiCMS can come in handy.You can add a parameter named "Telegram" in the background and enter its link address.In the template, the calling method is consistent with the preset field:

{# 调用自定义的Telegram链接 #}
{% contact telegramLink with name="Telegram" %}
{% if telegramLink %}
    <a href="{{ telegramLink }}" target="_blank" rel="nofollow">
        <i class="icon-telegram"></i>
        <span>Telegram</span>
    </a>
{% endif %}

In this way, you can infinitely expand the social media connection capabilities of your website, making your website truly the hub for connecting world content.

Picture Resource Management: Uploading and Optimization of QR Codes

It is worth mentioning that whether it is a WeChat QR code or other required images, such as custom social media icons, they can all be uploaded and managed centrally in the "Page Resources" -> "Image Resource Management" of the AnQiCMS backend.Here, not only can you easily upload images, but you can also compress them, generate WebP format (enabled in "Content Settings") and thumbnail processing, which all help to optimize website loading speed and improve user experience.

Tips for Content Operation

Displaying social media links on a website is not about quantity, but about reasonable layout and strategy.

  • Footer: is a common place to put social media icons, because users usually expect to find this kind of information here.
  • Sidebar (Sidebar)For pages with rich content, the sidebar can effectively attract users' attention to social media while browsing.
  • “Contact Us” pageThis is a dedicated area to display all contact information, social media links are essential here.
  • Content insideFor certain specific articles or products, naturally embedding related social media links or QR codes in the content can effectively guide users to engage in specific interactions.

By using AnQiCMS's flexible configuration and template tags, you can easily adjust the display position and style of these social elements, presenting them in a **way to visitors, thereby maximizing the effect of your content operation.

Summary

The Anqi CMS, with its powerful content management capabilities and flexible template mechanism, provides website operators with a solution for easily displaying WeChat QR codes and links to various social media accounts. From centralized management in the background to convenient calls to front-end templates, every