Google+ has introduced a share button which is more user friendly and easiest way to share your site content on Google+. Google+ share button is different from Google +1 button because Google +1 button just only for +1 and share button is to increase your content sharing on Google+. Like Google +1 button Google+ share button is available in four annotations: 1. None 2. Bubble Horizontal 3. Bubble Vertical 4. Inline. It is also available in three different sizes: 1. Small 2. Medium 3. Large. Well you can easily get Google+ share button from official page.
Google+ Share button Official Page: https://developers.google.com/+/web/share/
 |
| Google+ share button annotations |
But when you add this button to your blog or site that is on Blogger and have more than one post on home page then this button shares home page not the posts. So in this article I will cover how to add a Google+ share button on Blogger blogs which will be valid for each post not only to home page. For this purpose we'll modify default Google+ share button code. Let proceed to modification:
Default Google+ share button code:
<!-- Place this tag where you want the share button to render. -->
<div class="g-plus" data-action="share" data-annotation="bubble"></div>
Modified Google+ share button code:
<!-- Place this tag where you want the share button to render. -->
<div class='g-plus' data-action='share' data-annotation='bubble' expr:data-href='data:post.url'/>
Above highlighted part is added to work code as per our objective of this article.
How to insert this modified button code to Blogger template?
- Go to Blogger Dashboard › Select blog › Switch to Template tab › Edit HTML › Check Expand widget template
- Now search template for <data:post.body/>
- If you want to place Google+ share button above post then insert code above <data:post.body/> or if you want to place Google+ share button below post then insert code below <data:post.body/>
- Save the template changes › Done
Note: you have to add javascript give below under <head> if you are not using it.
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
› Other important thing -
› Learn how to edit Blogger template
I need to to thank you for this fantastic read!! I absolutely loved every bit of it. I have got you bookmarked to look at new things you post.
ReplyDeletewebsite design