Hello Readers, In this post we will learn how to put social subscription buttons in post titles. You can also add this widget to the end of your article according to your preferences. This widget will help you improve your social statistics, giving your visitors an easy way to subscribe to you. Later in this article you will find a live demonstration and tutorial to add this widget
To add this widget you need to edit the template code. You need to follow the steps below to add this widget to your blog.
Add buttons in Blogger Social Subscription:
1. Login to your Blogger account and go to the desktop.
Two. Click Template and download a backup of your blogger to avoid any loss.
Three. Now click on Edit HTML to start editing. Place the following JavaScript code just below the <head> template.
Note: Some templates already include this JavaScript code, so no need to add it again.
Now Locate the body tag in the template by pressing CTRL + F. Just below this code, insert the following code:
Search <data:post.body/> in the template, there may be more than one in your template. If it occurs 3 times choose the latter. If you want to add this widget just below the post titles, add the following code before the code above and to place this widget after the article, add the following code just below the above code.
Change the names of users of social networks that are highlighted in red for theirs. Now Save your template code and click View Blog.
Note: This Widget will be visible only in your blog posts. If you want to appear on the home page, you need to remove the code green.
Just added a widget on your blog social subscription. If you have any problem adding this widget on my blog, feel free to comment here. I will be happy to help you.
To add this widget you need to edit the template code. You need to follow the steps below to add this widget to your blog.
Add buttons in Blogger Social Subscription:
1. Login to your Blogger account and go to the desktop.
Two. Click Template and download a backup of your blogger to avoid any loss.
Three. Now click on Edit HTML to start editing. Place the following JavaScript code just below the <head> template.
<script src='http://apis.google.com/js/plusone.js' type='text/javascript'></script>
Note: Some templates already include this JavaScript code, so no need to add it again.
Now Locate the body tag in the template by pressing CTRL + F. Just below this code, insert the following code:
<div id="fb-root"></div>
<script type="text/javascript">
<!-- Like Button Script-->
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
<!--Stumble upon Button-->
(function() {
var li = document.createElement('script'); li.type = 'text/javascript'; li.async = true;
li.src = ('https:' == document.location.protocol ? 'https:' : 'http:') + '//platform.stumbleupon.com/1/widgets.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(li, s);
})();
<!--Twitter-->
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
</script>
<script type="text/javascript">
<!-- Like Button Script-->
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
<!--Stumble upon Button-->
(function() {
var li = document.createElement('script'); li.type = 'text/javascript'; li.async = true;
li.src = ('https:' == document.location.protocol ? 'https:' : 'http:') + '//platform.stumbleupon.com/1/widgets.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(li, s);
})();
<!--Twitter-->
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
</script>
Search <data:post.body/> in the template, there may be more than one in your template. If it occurs 3 times choose the latter. If you want to add this widget just below the post titles, add the following code before the code above and to place this widget after the article, add the following code just below the above code.
<b:if cond='data:blog.pageType == "item"'><div id='UT-social' style='box-shadow:0px 0px 1px 2px #000;'>
<table border='0' width='100%'>
<tr>
<td width='25%'>
<div class='fb-like' data-font='lucida grande' data-href='https://www.facebook.com/pages/Internet-Computer-Tricks-and-Tips-Tech-Guru/189293217936960' data-layout='button_count' data-send='false' data-show-faces='false' data-width='90'/>
</td>
<td width='25%'>
<a class='twitter-follow-button' data-show-count='true' data-show-screen-name='false' href='https://twitter.com/Ankitohc' rel='nofollow'>Follow @unziptech</a>
</td>
<td align='center' width='25%'>
<g:plusone/>
</td>
<td width='25%'>
<su:badge layout='1'/>
</td>
</tr>
</table>
</div>
</b:if>
<table border='0' width='100%'>
<tr>
<td width='25%'>
<div class='fb-like' data-font='lucida grande' data-href='https://www.facebook.com/pages/Internet-Computer-Tricks-and-Tips-Tech-Guru/189293217936960' data-layout='button_count' data-send='false' data-show-faces='false' data-width='90'/>
</td>
<td width='25%'>
<a class='twitter-follow-button' data-show-count='true' data-show-screen-name='false' href='https://twitter.com/Ankitohc' rel='nofollow'>Follow @unziptech</a>
</td>
<td align='center' width='25%'>
<g:plusone/>
</td>
<td width='25%'>
<su:badge layout='1'/>
</td>
</tr>
</table>
</div>
</b:if>
Change the names of users of social networks that are highlighted in red for theirs. Now Save your template code and click View Blog.
Note: This Widget will be visible only in your blog posts. If you want to appear on the home page, you need to remove the code green.
Just added a widget on your blog social subscription. If you have any problem adding this widget on my blog, feel free to comment here. I will be happy to help you.
Posts
My brother recommended I might like this blog. He was totally right.
ReplyDeleteThis post actually made my day. You cann't imagine just how
much time I had spent for this information! Thanks!
Look at my blog post ... facebook password cracker