How to Get an Automatic Youtube Subscription Link and Button: Grow your Subscribers
Here in this article, I you would learn how to create a link and button at which when clicked, it makes viewer subscribe directly to your Youtube Channel. For installation on blog or blog posts, this action requires no use of Javascript which assures that your SEO features won't be affected
Youtube Subscription Link
Please note that on any click or tap of this URL, a confirmation is needed to subscribe but this is more easier to gain subscribers than using the usual link target. See picture below
Apart from posting this Link on a blog or website, you can also get it posted accross social media or any other web platforms which makes you grow your channel faster
Giudes on activating Youtube subscriotion link
https://www.youtube.com/c/ChannelName/?sub_confirmation=1
Or
https://www.youtube.com/ChannelID/?sub_confirmation=1
Looking at the link above is a form of a Youtube Channel link. For Longtechy Youtube Channel, you see in the picture below;
As you can see it ends ?view_as=subscriber. Now all you need to do is to replace this with ?sub_confirmation=1
If you ALREADY have a youtube custom URL your link will be in form of:
https://www.youube.com/c/longtechy?sub_confirmation=1
If you haven't gotten a custon URL, so it will be in this form:
https://www.youtube.com/channel/UCY-1sueSdpFoR_zVe1iRj1w?sub_confirmation=1
Creating a Youtube Channel Subscribe Button
After getting the automatic subscription link, now to make a well designed Youtube channel subscribe button on blog with the use of pure CSS and HTML to make it more cooler.
In this action, we will make use of SVG Icon, don't worry it's a simple method of installation!
Here, its provided with two types of display, you have to pick your best choice.
Default Button
This display only the youtube button and the link in an enclosed button. To use this, Add CSS code below just ABOVE ]]></b:skin> or </style> in the Edit HTML Tab
.longtechysubs { background-color: #e62117; color: #fefefe; font-weight: 400; padding: 3px 7px; display: inline-block; border-radius: 3px; -moz-border-radius: 3px; box-shadow: 0 1px 0 rgba(0,0,0,0.05); outline: 0; line-height 0px; }
.longtechysubs svg { width: 24px; height: 24px; vertical-align: -6px; margin-right: 3px; } .longtechysubs svg path { fill: #fff; }
Then save the HTML code below wherever you want the button to display, either in blog posts, pages or widgets.
<a href='https://www.youtube.com/channel/UCY-1sueSdpFoR_zVe1iRj1w?sub_confirmation=1' title='Igniel on Youtube' target='_blank'>
<div class='longtechysubs'>
<svg viewBox='0 0 24 24'> <path d='M10,15L15.19,12L10,9V15M21.56,7.17C21.69,7.64 21.78,8.27 21.84,9.07C21.91,9.87 21.94,10.56 21.94,11.16L22,12C22,14.19 21.84,15.8 21.56,16.83C21.31,17.73 20.73,18.31 19.83,18.56C19.36,18.69 18.5,18.78 17.18,18.84C15.88,18.91 14.69,18.94 13.59,18.94L12,19C7.81,19 5.2,18.84 4.17,18.56C3.27,18.31 2.69,17.73 2.44,16.83C2.31,16.36 2.22,15.73 2.16,14.93C2.09,14.13 2.06,13.44 2.06,12.84L2,12C2,9.81 2.16,8.2 2.44,7.17C2.69,6.27 3.27,5.69 4.17,5.44C4.64,5.31 5.5,5.22 6.82,5.16C8.12,5.09 9.31,5.06 10.41,5.06L12,5C16.19,5 18.8,5.16 19.83,5.44C20.73,5.69 21.31,6.27 21.56,7.17Z'/></svg>Subscribe
</div>
</a>
Don't forget to change to your Youtube channel link above.
See result;
Advance button
This shows the thumbnail image of the channel together with the youtube button and the link. Add the CSS code below ABOVE ]]></b:skin> or </style>
.longtechysubsadv {
margin: 0px;
padding: 0px;
line-height: 21px;
}
.longtechysubsadv_img {
float: left;
margin-right: 7px;
}
.longtechysubdadv_img img {
width: 55px;
height: 55px;
}
.longtechysubsadv_name, a.longtechysubsadv_name {
color: #555;
text-align: left;
line-height: 16px;
}
.longtechysubsadv_button {
background-color: #e62117;
color: #fefefe;
font-weight: 400;
font-size: 16px;
padding: 3px 7px;
display: table;
border-radius: 3px;
-moz-border-radius: 3px;
box-shadow: 0 1px 0 rgba(0,0,0,0.05);
outline: 0;
margin-top: 8px;
line-height: 0px;
}
.longtechysubsadv svg {
width:24px;
height:24px;
vertical-align: -6px;
margin-right: 3px;
}
.longtechysubsadv svg path {
fill: #fff;
}
Add the HTML code below anywhere you want the button to appear. Don't forget to change to your channel URL.
<a href='https://www.youtube.com/channel/UCY-1sueSdpFoR_zVe1iRj1w?sub_confirmation=1' title='Longtechy on Youtube' target='_blank'>
<div class='longtechysubsadv'>
<div class='longtechysubsadv_img'><img src='https://lh3.googleusercontent.com/ogw/ADGmqu_mKJcYo2U4dGOTqKnSbNlcAXpqF80H5Sj0-S4_=s32-c-mo' title='Longtechy on Youtube' alt='Longtechy on Youtube'/>
</div>
<span class='longtechysubsadv_name'>Longtechy</span>
<div class='longtechysubsadv_button'>
<svg viewBox='0 0 24 24'> <path d='M10,15L15.19,12L10,9V15M21.56,7.17C21.69,7.64 21.78,8.27 21.84,9.07C21.91,9.87 21.94,10.56 21.94,11.16L22,12C22,14.19 21.84,15.8 21.56,16.83C21.31,17.73 20.73,18.31 19.83,18.56C19.36,18.69 18.5,18.78 17.18,18.84C15.88,18.91 14.69,18.94 13.59,18.94L12,19C7.81,19 5.2,18.84 4.17,18.56C3.27,18.31 2.69,17.73 2.44,16.83C2.31,16.36 2.22,15.73 2.16,14.93C2.09,14.13 2.06,13.44 2.06,12.84L2,12C2,9.81 2.16,8.2 2.44,7.17C2.69,6.27 3.27,5.69 4.17,5.44C4.64,5.31 5.5,5.22 6.82,5.16C8.12,5.09 9.31,5.06 10.41,5.06L12,5C16.19,5 18.8,5.16 19.83,5.44C20.73,5.69 21.31,6.27 21.56,7.17Z'/></svg>Subscribe
</div>
</div>
</a>
See result:
Notice!!!
You may experience the automatic link not working on mobile devices, but it works so well on desktop devices, this issue might be as a result of some bugs needed to be fixed, i hope so soon it's gonna be see through!
Enjoy! Thanks for using Longtechy. Drop comments and share, you may have issues, it will be solved here.
Comments