Google released recently there +1 Button that will show publicly what you like, agree with, or recommend on the web. When you +1 an article or tutorial, your name will appear under that article when that article appears in search results. You can also find out what articles your friends read and liked. This according to Google is aimed to make Google Search results more relevant and useful. For Bloggers like you, I am sure this is another great tool to increase the PR, relevancy and importance of your blog. According to me, the more +1'd this you receive the chances for your blog's PR to improve will increase also because the PageRank algorithm is linked to all activities that takes place in your blog. The video below will demonstrate better,How to add the +1 Button to Blogger?
- Go To Blogger > Design > Edit HTML
- Backup your template
- Search for </head>
- Paste the code below just above </head>
<script type="text/javascript" src="http://apis.google.com/js/plusone.js"> {lang: 'en-US'} </script>5. Now Check the "Expand Widgets Templates" Box at the top right corner. In order to place the button just below Post titles then search for this code <data:post.body> and place the +1 button code given below just above it,
<div style='float:left'>
<g:plusone size="standard" expr:href="data:post.url"/>
</div>
- You can display it to "left" and "right" by adjusting left
- You can change standard to medium, small or tall. Choose the size that may blend your template.
6. If you want the button to appear below blog posts then add the button code just below <data:post.body>
7. Save your template to see it working. Have fun! :>
Alternative Method
To add the +1 button to your blog directly without any code then you’ll need to enable Share buttons on Blogger. To do this, go to Design > Page Elements on your Blogger dashboard, find the Blog posts area, click on Edit, and select the “Show Share Buttons” option. If you are already using Share buttons, then you don't need to worry as the +1 button will automatically show up as a new share button.
If you enjoyed this post and wish to be informed whenever a new post is published, then make sure you
Subscribe to our regular Email Updates!
If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »
Hi Bro
ReplyDeleteCan you integrate this button with this widget:
http://www.mybloggertricks.com/2010/12/add-facebook-like-button-retweet.html
I tried a lot but just can't get it right :(
I've been ignoring Google's +1 ever since i heard it, but this post made me to integrate it to my site.... Thanks for the post and widget Mohammad.
ReplyDeleteWell, I wish to thank "SamSexy98" too because he gave me the idea to merge the two widgets...
@Vamsi
ReplyDeleteI see that you have already integrated it successfully. I did exactly the same thing which you have done but I am having some alignment issues. It just not getting fit in my current template.
Thanks for this trick. Though, after implementing it; That is adding the +1 button below my posts title. I couldn't trace the button, what could be the problem? Why can't I place the button just like I did add Facebook Like and Send Button To my Blogger Blogs?
ReplyDelete@Sam
ReplyDeleteDude use this code for that,
<b:if cond='data:blog.pageType == "item"'>
<table border='0'>
<tr>
<td><div style='padding-top:6px;'>
<script type='text/javascript'>
tweetmeme_style = "compact";
</script>
<script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/>
</div></td>
<td>
<script expr:src='"http://www.stumbleupon.com/hostedbadge.php?s=1&r=" + data:post.url'/>
</td>
<td><div style='margin-left:35px;'>
<script type='text/javascript'>
undefinedfunctionundefined) {
var s = document.createElementundefined'SCRIPT'), s1 = document.getElementsByTagNameundefined'SCRIPT')[0];
s.type = 'text/javascript';
s.async = true;
s.src = 'http://widgets.digg.com/buttons.js';
s1.parentNode.insertBeforeundefineds, s1);
})undefined);
</script>
<a class='DiggThisButton DiggCompact'/>
</div></td>
<td><div style='margin-left:35px;'>
<g:plusone size="standard" expr:href="data:post.url"/>
</div>
</td>
<td>
<iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=button_count&show_faces=false&width=100& action=like&font=arial&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; margin-left:35px; width:100px; height:20px;'/>
</td>
</tr>
</table> </b:if><br/>
@Vamsi
ReplyDeleteI thank you for that. :>
@Felix
Dude kindly add it just after your Facebook send button code. Let me know if it worked.
Can't even see the buttons buddy..
ReplyDeleteCheck this:
http://samsexy98downloads.blogspot.com/2010/12/makeover-of-our-site.html
@samsexy98
ReplyDeleteTell me how to post code with tags here. I've got it worked :D
yup, now my page has 5 buttons, with +1 button on far right
Have a look:
ReplyDeletehttp://rumiiqbalandme.blogspot.com/
@rIZ
ReplyDeleteDo u mean the whole code stuff like Mohammad did. If yes then you cannot post. Only Mohammad can post such things as he is admin. If you try to post you will get error and after trying multiple times blogger will consider you as spammer.
And I looked at your site and yea yours looks fine but look at the gap between like button and new +1 button. That doesn't looks good to me :(
Hello Mohammad,
ReplyDeleteanother master one bro..
thanks for your regular update and i am eagerly waiting for that sliding facebook widget.
@bhavesh
ReplyDeleteThe button is not showing up because you didn't add the +1 button code above </head> i.e
<script type="text/javascript" src="http://apis.google.com/js/plusone.js"> {lang: 'en-US'} </script>
And sorry for the inconvenience. The Javascript for digg code was not encoded So I have emailed you the correct code.
@rIZ
To add HTML to Blogger Comment Form, you will need to encode the code. You can do that using this tool -> MBT Encoder
@Jeet
Always welcomed bro! :>
@Mohammad
ReplyDeleteLook at my demo blog. Looks pretty bad. I have already done this before asking you. Looking for a solution.
Btw do we have the power to post the full codes like you post.
Hi Mohammad! Anyone trying to use +1 with the old-style "classic" blogger may want to have a look at my blog - I've got it running - it's not perfect on the landing page, but works with 100% functionality on individual post pages!
ReplyDeleteHere's the link:
http://dave-lucas.blogspot.com/2011/06/add-google-1.html
@sam
ReplyDeleteI emailed you the code. Did you check it? I am using the same on this demo blog and it looks just fine -> http://bloggertricks-testblog.blogspot.com/2009/10/this-is-how-peacful-land-turned-into.html
You can change the button size to small for better visibility.
Yes sure you can post codes using the Encoder tool
@Dav
ReplyDeleteThanks pal for the share. :>
@Mohammad
ReplyDeleteYup buddy I have used the same code which you have mailed me and it doesn't looks good.
Wait I will send you my demo blog template. Check it out.
@ Mohmd, I did as you instructed but it didn't work. Pl do try an find a solution. Thanks
ReplyDelete@Sam
ReplyDeleteOk send it I am waiting. Do you like how it appears here? -> http://bloggertricks-testblog.blogspot.com/2009/10/this-is-how-peacful-land-turned-into.html
@Felix
Its the most simplest tutorial friend. Where exactly are you facing problem. did you pasted it below data:post.body ?
Thanks for the MBT Encoder :D
ReplyDeletei've placed +1 in the end:
<table border='0' class='center'>
<tr>
<td><div style='padding-top:6px;'>
<script type='text/javascript'>
tweetmeme_style = "compact";
</script>
<script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/>
</div></td>
<td>
<script expr:src='"http://www.stumbleupon.com/hostedbadge.php?s=1&r=" + data:post.url'/>
</td>
<td><div style='margin-left:35px;'>
<script type='text/javascript'>
undefinedfunctionundefined) {
var s = document.createElementundefined'SCRIPT'), s1 = document.getElementsByTagNameundefined'SCRIPT')[0];
s.type = 'text/javascript';
s.async = true;
s.src = 'http://widgets.digg.com/buttons.js';
s1.parentNode.insertBeforeundefineds, s1);
})undefined);
</script>
<a class='DiggThisButton DiggCompact'/>
</div></td>
<td>
<iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=button_count&show_faces=false&width=100& action=like&font=arial&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; margin-left:35px; width:100px; height:20px;'/>
</td>
<td><div style='margin-left:5px;'>
<script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: 'en-US'} </script><g:plusone expr:href='data:post.url' size='small'/>
</div></td>
</tr>
</table>
it's fine. but can i pad the +1 button to top a bit?, by 1px or 2px? because it's not in the middle of the box/table (vertically middle)
@ Mohmd, I noticed in your instruction that you did'nt specify after adding the script above head, that I should save then check and cont.....hence, my confusion. Otherwise, all is well. Thanks. Keep up the good job.
ReplyDeleteMBT always brings something awesome to list. I'll soon add this button to my blogger page. Thank you
ReplyDeleteI have implemented it at the end of my posts ;) check it out http://www.hackersthirst.com/2011/01/explaining-phishing-to-new-bies.html
ReplyDeleteoh, i've solved.... ummm.. no! not solved but overcame my +1 vertical center problem :D
ReplyDeleteI added share button in between the +1 button and Facebook like button, so it's looking fine. Plus i changed tweet-meme button to official tweet button (Facebook look-a-like) and removed digg button ( yellow color looked annoying :P ... yeah yeah i like neatly arranged things :D )
my code now:
<data:post.body/>
<table border='0' class='center'>
<tr>
<td><div style='padding-top:6px;'>
<a class='twitter-share-button' data-count='horizontal' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
</div></td>
<td><div style='margin-left:25px;'>
<script expr:src='"http://www.stumbleupon.com/hostedbadge.php?s=1&r=" + data:post.url'/>
</div></td>
<td>
<iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=button_count&show_faces=false&width=100& action=like&font=arial&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; margin-left:35px; width:100px; height:20px;'/>
</td>
<td><div class='addthis_toolbox addthis_default_style '>
<a class='addthis_counter addthis_pill_style'/>
</div>
<script src='http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4de3b2d654f56f28' type='text/javascript'/>
<script type='text/javascript'>
var addthis_config = {
ui_cobrand: "RUMI, IQBAL AND ME",
ui_header_color: "#ffffff",
ui_header_background: "#0080FF"
}
</script></td>
<td><div style='margin-left:35px;'>
<script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: 'en-US'} </script><g:plusone expr:href='data:post.url' size='medium'/>
</div></td>
</tr>
</table><br/>
Thank you sssooo much Mustafa. m very happy to get my customized share box! :D which wasn't possible without you....
Thanks mate! ::thumbsup::
@Riz
ReplyDeletegreat work bro! You will surely develop the skills soon. More power :>
@Felix
Oh I see pal. Glad it finally worked for you and if still needed help I am always at your service. :>
@NRUPEN|DEVIL'S BLOG ON SECURITY
I thank you for your kindness brother. :)
@Wamiq
Looks nice there. good job bro! =)
@Mohd
ReplyDeleteI have already sent you the demo template which is same as my original one. And Sorry for late reply. I was not available for some days due to some health issues yet again.
@Mohammad Mustafa Ahmedzai
ReplyDeleteThanks Mustafa.
Its working fineon my blog
ebooks2000.blogspot.com
bro. how to align the sharing button in one line like in your blog? at the top of the post? i just cant align the buttons to make it straight
ReplyDeletethats cute dude :) keep it up :D
ReplyDeleteHallo frnd i want to integrate g+1 at top of the blog.pls mail me @ prasanth.be.eee@gmail.com
ReplyDeleteHI there,
ReplyDeleteCan you please provide me the code share buttons below your posts and your email subscription box code????
bro. i like your current google +1 widget at the right side. can you make it tutorial for that? please bro. thanks a lot.
ReplyDeleteit is exactly that which i need Cute Facebook Status
ReplyDeleteThis comment has been removed by the author.
ReplyDelete<a href="http://google.com/" target="_blank">My Name is Khan</a>
ReplyDeleteUsing the +1 button, users can see the number of 'plus' the site has, meaning how many others have liked the web page. Websites having the button, allow users to share whatever they like at the run time. Amongst the Google circles, users share content using +1, so the button is actually fueling social interaction.
ReplyDeletebuy google followers
Nice Post-
ReplyDeleteClick Here For Latest Blogger Tricks And SEO Tips
Simple and great thanks for the post :)
ReplyDeleteThanks !
ReplyDelete