How To Add Animated Telegram Button In WordPress & Blogger
by JSM Hemant |
July 25, 2025
How To Add Animated Telegram Button In Wordpress & Blogger
Telegram is one of the popular messaging app and social media platforms. People use Telegram not just to chat with friends but to perform various things like join niche communities, download different types of files, etc
Creating a telegram community helps our website to bring our audience when we publish something new to our website. Adding a Telegram button to your website helps new visitors to join the Telegram community, which increases the size of the community.
In this blog post, we will learn how we can create and add an animated Telegram button to both WordPress and Blogger. We will use simple HTML and CSS code, so you don’t need any special plugin or tool.
How To Add Animated Telegram Button In Blogger?
Step 1
Login To Your Blogger Dashboard And Go To Theme Section Now Navigate To The ‘Edit As HTML’ As Shown In Above Image
Step 2
Now You Have To Go To The Blogger Theme Editor (Edit HTML) As Shown In Above Image.
Step 3
Now search For The </body> Tag And Past Following Code:
<div class='animate_telegram'>
<a href=''>
<svg class='bi bi-telegram' fill='currentColor' height='16' viewBox='0 0 16 16' width='16' xmlns='http://www.w3.org/2000/svg'>
<path d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M8.287 5.906q-1.168.486-4.666 2.01-.567.225-.595.442c-.03.243.275.339.69.47l.175.055c.408.133.958.288 1.243.294q.39.01.868-.32 3.269-2.206 3.374-2.23c.05-.012.12-.026.166.016s.042.12.037.141c-.03.129-1.227 1.241-1.846 1.817-.193.18-.33.307-.358.336a8 8 0 0 1-.188.186c-.38.366-.664.64.015 1.088.327.216.589.393.85.571.284.194.568.387.936.629q.14.092.27.187c.331.236.63.448.997.414.214-.02.435-.22.547-.82.265-1.417.786-4.486.906-5.751a1.4 1.4 0 0 0-.013-.315.34.34 0 0 0-.114-.217.53.53 0 0 0-.31-.093c-.3.005-.763.166-2.984 1.09'/>
</svg>
</a>
</div>
<style>
.animate_telegram {
width: 50px;
height: 50px;
position: fixed;
bottom: 70px;
right: 23px;
display: flex;
justify-content: center;
align-items: center;
background: white;
border-radius: 50%;
}
.animate_telegram a svg {
width: 40px;
height: 40px;
fill: #24a1dd;
animation: animatetel 2s ease infinite;
border-radius: 50%;
}
@keyframes animatetel{
0% {
box-shadow: 0 0 0 0px #24a1dd;
}
100% {
box-shadow: 0 0 0 20px rgba(0, 0, 0, 0);
}
}
</style>
Step 4
Now you have to add the link of your telegram group in <a href=””/> tag shown in above image that will allow user to go to telegram group when clicked on the button. In this way you can add animated telegram button in blogger.
How To Add Animated Telegram Button In WordPress?
Step 1
Login To Your WordPress Dashboard And Navigate to the theme editor, In the theme editor find the ‘footer.php’ file as shown in above image.
Step 2
Now Add The Code For Animated Telegram Button At The End Of Footer.php File As Shown In Above Image. Code:
<div class='animate_telegram'>
<a href=''>
<svg class='bi bi-telegram' fill='currentColor' height='16' viewBox='0 0 16 16' width='16' xmlns='http://www.w3.org/2000/svg'>
<path d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M8.287 5.906q-1.168.486-4.666 2.01-.567.225-.595.442c-.03.243.275.339.69.47l.175.055c.408.133.958.288 1.243.294q.39.01.868-.32 3.269-2.206 3.374-2.23c.05-.012.12-.026.166.016s.042.12.037.141c-.03.129-1.227 1.241-1.846 1.817-.193.18-.33.307-.358.336a8 8 0 0 1-.188.186c-.38.366-.664.64.015 1.088.327.216.589.393.85.571.284.194.568.387.936.629q.14.092.27.187c.331.236.63.448.997.414.214-.02.435-.22.547-.82.265-1.417.786-4.486.906-5.751a1.4 1.4 0 0 0-.013-.315.34.34 0 0 0-.114-.217.53.53 0 0 0-.31-.093c-.3.005-.763.166-2.984 1.09'/>
</svg>
</a>
</div>
<style>
.animate_telegram {
width: 50px;
height: 50px;
position: fixed;
bottom: 70px;
right: 23px;
display: flex;
justify-content: center;
align-items: center;
background: white;
border-radius: 50%;
}
.animate_telegram a svg {
width: 40px;
height: 40px;
fill: #24a1dd;
animation: animatetel 2s ease infinite;
border-radius: 50%;
}
@keyframes animatetel{
0% {
box-shadow: 0 0 0 0px #24a1dd;
}
100% {
box-shadow: 0 0 0 20px rgba(0, 0, 0, 0);
}
}
</style>You Can Add This Code By Installing Code Snippet Plugin If You are not able to find the footer.php file.
Bonus: Add You Tube, Instagram & WhatsApp Group Join Buttons In Posts
Now We Will See how to add Youtube, Instagram & WhatsApp Buttons as shown in following image in wordpress & blogger. These type of buttons helps you to create community and make your visitor to viewer.
Adding In Blogger
Step 1
Go to the Theme Editor Of Blogger Dashboard & Find The </head> Tag As Shown In Above Image:
Step 2
Now Past The Gives CSS Code Provided Below After </head> Tag As Shown In Above Image.
<style>
.join_community{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin: 0px auto;
text-align: center;
}
.whatsapp, .telegram, .instagram, .youtube {
display: flex;
width: 90%;
margin: 20px auto;
height: 60px;
background: #b4d1ff12;
justify-content: space-around;
align-items: center;
border-radius: 14px;
animation: animate 2s cubic-bezier(0.92, -0.06, 0.25, 1) infinite;
}
.whatsapp{
animation: whatsappBorder 2s cubic-bezier(0.92, -0.06, 0.25, 1) infinite;
}
.telegram{
animation: telegramBorder 2s cubic-bezier(0.92, -0.06, 0.25, 1) infinite;
}
.instagram{
animation: instagramBorder 2s cubic-bezier(0.92, -0.06, 0.25, 1) infinite;
}
.youtube{
animation: youtubeBorder 2s cubic-bezier(0.92, -0.06, 0.25, 1) infinite;
}
.btn_right button {
padding: 10px 50px;
border: none;
border-radius: 8px;
}
.btn_left {
display: flex;
justify-content: center;
align-items: center;
gap: 4px;
}
.btn_left svg{
width: 30px;
height: 30px;
margin-top: 5px;
}
.whatsapp svg{
fill: #075e54;
}
.whatsapp .btn_right button{
cursor: pointer;
background: #0fcc28;
border-radius: 22px;
color: white;
}
.telegram .btn_right button{
color: white;
background: #29b6f6;
border-radius: 22px;
cursor: pointer;
}
.youtube .btn_right button{
color: white;
background: #ff3d00;
border-radius: 22px;
cursor: pointer;
}
.instagram .btn_right button{
color: white;
background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
cursor: pointer;
border-radius: 22px;
}
@keyframes whatsappBorder {
0% { border: 2px solid transparent; }
100% { border: 2px solid #25D366;
box-shadow: rgb(229 255 229 / 10%) 0px 20px 25px -5px, rgb(179 255 176 / 8%) 0px 10px 10px -5px;
}
}
@keyframes telegramBorder {
0% { border: 2px solid transparent; }
100% { border: 2px solid #29b6f6;
box-shadow: #96f7ff1f 0px 20px 25px -5px, #96f7ff42 0px 10px 10px -5px;
}
}
@keyframes youtubeBorder {
0% { border: 2px solid transparent; }
100% { border: 2px solid #ff3d00;
box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, #ffa98d4d 0px 10px 10px -5px;
}
}
@keyframes instagramBorder {
0% { border: 2px solid transparent; }
100% { border: 2px solid #e6683c;
box-shadow: #ffd7ca3b 0px 20px 25px -5px, #ffd7ca3b 0px 10px 10px -5px;
}
}
@media screen and (max-width: 420px){
.btn_left {
display: flex;
justify-content: center;
align-items: center;
gap: 4px;
font-size: 14px;
}
.btn_right button {
padding: 10px 25px;
border: none;
border-radius: 8px;
}
}
</style>
Step 3
Now Find This Line Of code <data:post.body/> there may be two tags like this but you have to find one within <b:if cond=’data:view.isPost’>.
Step 4
Now But The code provided before in this step after the <data:post.body/> Tag And Save The File as shown in above image.
<div class='join_community'>
<div class='whatsapp'>
<div class='btn_left'>
<span>
<svg height='96' viewBox='0 0 48 48' width='96' x='0px' xmlns='http://www.w3.org/2000/svg' y='0px'>
<path d='M4.868,43.303l2.694-9.835C5.9,30.59,5.026,27.324,5.027,23.979C5.032,13.514,13.548,5,24.014,5c5.079,0.002,9.845,1.979,13.43,5.566c3.584,3.588,5.558,8.356,5.556,13.428c-0.004,10.465-8.522,18.98-18.986,18.98c-0.001,0,0,0,0,0h-0.008c-3.177-0.001-6.3-0.798-9.073-2.311L4.868,43.303z' fill='#fff'/>
<path d='M4.868,43.803c-0.132,0-0.26-0.052-0.355-0.148c-0.125-0.127-0.174-0.312-0.127-0.483l2.639-9.636c-1.636-2.906-2.499-6.206-2.497-9.556C4.532,13.238,13.273,4.5,24.014,4.5c5.21,0.002,10.105,2.031,13.784,5.713c3.679,3.683,5.704,8.577,5.702,13.781c-0.004,10.741-8.746,19.48-19.486,19.48c-3.189-0.001-6.344-0.788-9.144-2.277l-9.875,2.589C4.953,43.798,4.911,43.803,4.868,43.803z' fill='#fff'/>
<path d='M24.014,5c5.079,0.002,9.845,1.979,13.43,5.566c3.584,3.588,5.558,8.356,5.556,13.428c-0.004,10.465-8.522,18.98-18.986,18.98h-0.008c-3.177-0.001-6.3-0.798-9.073-2.311L4.868,43.303l2.694-9.835C5.9,30.59,5.026,27.324,5.027,23.979C5.032,13.514,13.548,5,24.014,5 M24.014,42.974C24.014,42.974,24.014,42.974,24.014,42.974C24.014,42.974,24.014,42.974,24.014,42.974 M24.014,42.974C24.014,42.974,24.014,42.974,24.014,42.974C24.014,42.974,24.014,42.974,24.014,42.974 M24.014,4C24.014,4,24.014,4,24.014,4C12.998,4,4.032,12.962,4.027,23.979c-0.001,3.367,0.849,6.685,2.461,9.622l-2.585,9.439c-0.094,0.345,0.002,0.713,0.254,0.967c0.19,0.192,0.447,0.297,0.711,0.297c0.085,0,0.17-0.011,0.254-0.033l9.687-2.54c2.828,1.468,5.998,2.243,9.197,2.244c11.024,0,19.99-8.963,19.995-19.98c0.002-5.339-2.075-10.359-5.848-14.135C34.378,6.083,29.357,4.002,24.014,4L24.014,4z' fill='#cfd8dc'/>
<path d='M35.176,12.832c-2.98-2.982-6.941-4.625-11.157-4.626c-8.704,0-15.783,7.076-15.787,15.774c-0.001,2.981,0.833,5.883,2.413,8.396l0.376,0.597l-1.595,5.821l5.973-1.566l0.577,0.342c2.422,1.438,5.2,2.198,8.032,2.199h0.006c8.698,0,15.777-7.077,15.78-15.776C39.795,19.778,38.156,15.814,35.176,12.832z' fill='#40c351'/>
<path clip-rule='evenodd' d='M19.268,16.045c-0.355-0.79-0.729-0.806-1.068-0.82c-0.277-0.012-0.593-0.011-0.909-0.011c-0.316,0-0.83,0.119-1.265,0.594c-0.435,0.475-1.661,1.622-1.661,3.956c0,2.334,1.7,4.59,1.937,4.906c0.237,0.316,3.282,5.259,8.104,7.161c4.007,1.58,4.823,1.266,5.693,1.187c0.87-0.079,2.807-1.147,3.202-2.255c0.395-1.108,0.395-2.057,0.277-2.255c-0.119-0.198-0.435-0.316-0.909-0.554s-2.807-1.385-3.242-1.543c-0.435-0.158-0.751-0.237-1.068,0.238c-0.316,0.474-1.225,1.543-1.502,1.859c-0.277,0.317-0.554,0.357-1.028,0.119c-0.474-0.238-2.002-0.738-3.815-2.354c-1.41-1.257-2.362-2.81-2.639-3.285c-0.277-0.474-0.03-0.731,0.208-0.968c0.213-0.213,0.474-0.554,0.712-0.831c0.237-0.277,0.316-0.475,0.474-0.791c0.158-0.317,0.079-0.594-0.04-0.831C20.612,19.329,19.69,16.983,19.268,16.045z' fill='#fff' fill-rule='evenodd'/>
</svg>
</span>
<span>whatsapp Group</span>
</div>
<div class='btn_right'>
<button>
Join Now
</button>
</div>
</div>
<div class='telegram'>
<div class='btn_left'>
<span>
<svg height='48' viewBox='0 0 48 48' width='48' x='0px' xmlns='http://www.w3.org/2000/svg' y='0px'>
<path d='M24 4A20 20 0 1 0 24 44A20 20 0 1 0 24 4Z' fill='#29b6f6'/>
<path d='M33.95,15l-3.746,19.126c0,0-0.161,0.874-1.245,0.874c-0.576,0-0.873-0.274-0.873-0.274l-8.114-6.733 l-3.97-2.001l-5.095-1.355c0,0-0.907-0.262-0.907-1.012c0-0.625,0.933-0.923,0.933-0.923l21.316-8.468 c-0.001-0.001,0.651-0.235,1.126-0.234C33.667,14,34,14.125,34,14.5C34,14.75,33.95,15,33.95,15z' fill='#fff'/>
<path d='M23,30.505l-3.426,3.374c0,0-0.149,0.115-0.348,0.12c-0.069,0.002-0.143-0.009-0.219-0.043 l0.964-5.965L23,30.505z' fill='#b0bec5'/>
<path d='M29.897,18.196c-0.169-0.22-0.481-0.26-0.701-0.093L16,26c0,0,2.106,5.892,2.427,6.912 c0.322,1.021,0.58,1.045,0.58,1.045l0.964-5.965l9.832-9.096C30.023,18.729,30.064,18.416,29.897,18.196z' fill='#cfd8dc'/>
</svg>
</span>
<span>Join Telegram</span>
</div>
<div class='btn_right'>
<button>
Join Now
</button>
</div>
</div>
<div class='youtube'>
<div class='btn_left'>
<span>
<svg height='96' viewBox='0 0 48 48' width='96' x='0px' xmlns='http://www.w3.org/2000/svg' y='0px'>
<path d='M43.2,33.9c-0.4,2.1-2.1,3.7-4.2,4c-3.3,0.5-8.8,1.1-15,1.1c-6.1,0-11.6-0.6-15-1.1c-2.1-0.3-3.8-1.9-4.2-4C4.4,31.6,4,28.2,4,24c0-4.2,0.4-7.6,0.8-9.9c0.4-2.1,2.1-3.7,4.2-4C12.3,9.6,17.8,9,24,9c6.2,0,11.6,0.6,15,1.1c2.1,0.3,3.8,1.9,4.2,4c0.4,2.3,0.9,5.7,0.9,9.9C44,28.2,43.6,31.6,43.2,33.9z' fill='#FF3D00'/>
<path d='M20 31L20 17 32 24z' fill='#FFF'/>
</svg>
</span>
<span>Join Youtube</span>
</div>
<div class='btn_right'>
<button>
Join Now
</button>
</div>
</div>
<div class='instagram'>
<div class='btn_left'>
<span>
<svg height='96' viewBox='0 0 48 48' width='96' x='0px' xmlns='http://www.w3.org/2000/svg' y='0px'>
<radialGradient cx='19.38' cy='42.035' gradientUnits='userSpaceOnUse' id='yOrnnhliCrdS2gy~4tD8ma_Xy10Jcu1L2Su_gr1' r='44.899'>
<stop offset='0' stop-color='#fd5'/>
<stop offset='.328' stop-color='#ff543f'/>
<stop offset='.348' stop-color='#fc5245'/>
<stop offset='.504' stop-color='#e64771'/>
<stop offset='.643' stop-color='#d53e91'/>
<stop offset='.761' stop-color='#cc39a4'/>
<stop offset='.841' stop-color='#c837ab'/>
</radialGradient>
<path d='M34.017,41.99l-20,0.019c-4.4,0.004-8.003-3.592-8.008-7.992l-0.019-20 c-0.004-4.4,3.592-8.003,7.992-8.008l20-0.019c4.4-0.004,8.003,3.592,8.008,7.992l0.019,20 C42.014,38.383,38.417,41.986,34.017,41.99z' fill='url(#yOrnnhliCrdS2gy~4tD8ma_Xy10Jcu1L2Su_gr1)'/>
<radialGradient cx='11.786' cy='5.54' gradientTransform='matrix(1 0 0 .6663 0 1.849)' gradientUnits='userSpaceOnUse' id='yOrnnhliCrdS2gy~4tD8mb_Xy10Jcu1L2Su_gr2' r='29.813'>
<stop offset='0' stop-color='#4168c9'/>
<stop offset='.999' stop-color='#4168c9' stop-opacity='0'/>
</radialGradient>
<path d='M34.017,41.99l-20,0.019c-4.4,0.004-8.003-3.592-8.008-7.992l-0.019-20 c-0.004-4.4,3.592-8.003,7.992-8.008l20-0.019c4.4-0.004,8.003,3.592,8.008,7.992l0.019,20 C42.014,38.383,38.417,41.986,34.017,41.99z' fill='url(#yOrnnhliCrdS2gy~4tD8mb_Xy10Jcu1L2Su_gr2)'/>
<path d='M24,31c-3.859,0-7-3.14-7-7s3.141-7,7-7s7,3.14,7,7S27.859,31,24,31z M24,19c-2.757,0-5,2.243-5,5 s2.243,5,5,5s5-2.243,5-5S26.757,19,24,19z' fill='#fff'/>
<circle cx='31.5' cy='16.5' fill='#fff' r='1.5'/>
<path d='M30,37H18c-3.859,0-7-3.14-7-7V18c0-3.86,3.141-7,7-7h12c3.859,0,7,3.14,7,7v12 C37,33.86,33.859,37,30,37z M18,13c-2.757,0-5,2.243-5,5v12c0,2.757,2.243,5,5,5h12c2.757,0,5-2.243,5-5V18c0-2.757-2.243-5-5-5H18z' fill='#fff'/>
</svg>
</span>
<span>Join Instagram
</span>
</div>
<div class='btn_right'>
<button>
Join Now
</button>
</div>
</div>
</div>(Add Your Social Media Links)
Step 5
If You Visit Any Post Of Your Blog You Can See The Nice Social Media As Shown In Above Image.
Adding In WordPress:
Step 1
Go To The Theme File Editor And Navigate to the single.php file as show in above image.
Step 2
Now put the CSS code given in the Step 2 of add these button in blogger and put the css code at the end of single.php as shown in following image. (You can put this code in css file of theme)
Step 3
Now Find the post title code ‘<?php the_title(); ?>’ This is code of displaying the post title. We will add social media buttons after this code. Copy the HTML code of social media buttons provided in the Step 4 above and paste this code after the ‘<?php the_title(); ?>’ as shown in above image.
What Is An Animated Telegram Button & Why Add A Telegram Button
Animated Telegram Button Simply Means: A Clickable Telegram Icon With Cool Motion Effects Like Hover, Slide, Glow, Or Bounce. It’s Not Just A Normal Button — It’s A Modern-Looking, Attention-Grabbing Button That Increases the chance of clicking.
It Makes Your Website Look More Interactive And Encourages Visitors To Join Your Telegram Community Instantly.
- Telegram Is One Of The Fastest Ways To Send new published content on your site after push notifications
- Adding A Telegram Button On Your Website Makes It Easy For Visitors To Join Your Channel.
- It Builds A Direct Relationship Between You And Your Readers — No Algorithm In Between.
- And Most Importantly, It Helps You Grow Your Telegram Community From Your Website Itself — Without Doing Extra Promotions.