Integrating Telegram Comments to Your Website
Tags: tutorial, blog, jekyll
Published: 2020-06-23 04:17:38

<small>_Cover image: <span>Photo by <a href="https://unsplash.com/@glenncarstenspeters?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Glenn Carstens-Peters</a> on <a href="/s/photos/typing-comment?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></span>_</small>

Comments are often a good way to increase engagement in your site. The most common comment hosting service is Disqus. However, there are some disadvantages to using Disqus:

- Bizarre and clickbaity ads if you are using the free plan
- Corresponding privacy concerns
- Increase in page loading time owing to ads

In this post, I would like to introduce to telegram comments! :star2: Before showing how to integrate telegram comments to your site, let us briefly discuss the pros and cons.

:heavy_plus_sign: **Pros**:
- Telegram is highly privacy focussed
- Free
- No ads
- Telegram has over 400 million monthly users and they can use the same account to comment to your blog post
- Lots of customization options + dark theme
- Moderate your comment section and add new moderators
- Users can upload multimedia attachments
- Users can subscribe to comments

:heavy_minus_sign: **Cons**:
- One needs to provide a mobile number to sign up
- It appears at max 100 comments can be added to a post
- There is no thread system, the reply is like GitHub issues

## Integrating to your blog

The process is fairly straight-forward and simple. First, go to https://comments.app and then go to `Connect Website`. Then, add your site name and domains and then click on `Connect Website`. This will give you a site id and code that you can now embed to your website. Note that, you can also perform a lot of customizations in this step.

## Using with Jekyll

I prefer to have the site id in the `_config.yml` file.

```yaml
...

# telegram comments
telegram_site_id: "123abc"

...
```
> :heavy_exclamation_mark: Add your own site id that you have obtained from telegram.

Now, in the `_includes` directory, create a file `telegram.html`.

```html
{% if page.comments %}
<script async src="https://comments.app/js/widget.js?3" data-comments-app-website={{ site.telegram_site_id}} data-limit="100"></script>
{% endif %}
```

In my posts, I have front matter `comments`. If it is set to true, then only comment appears. That's why I have the `if page.comments` conditional statement. Change if according to your preference. If you have customizations, add that too inside the `script` tag.

`data-limit` represents the number of comments that can appear, as of now, the maximum possible value is 100.

In the end, simply include `telegram.html` to your post layout (or any other layout where you want the comment section to appear).

```html
...

{% if site.telegram_site_id %}
    {% include telegram.html %}
{% endif %}

...
```

Here's how the comment section will appear:

![telegram-comment](https://dev-to-uploads.s3.amazonaws.com/i/77756nzn3ktcwpu4e3c1.png)

You can see it in action here: [link](https://ayan-b.github.io/jekyll-materialize-blog-theme/top_posts/2018/08/30/The-Earth.html).

I hope now it is clear how you can add a comment section using the telegram comments widget. Please let me know if something is not clear.