Wednesday, October 05, 2011

How to remove G+ and add proper sharing buttons to your Blogger Blog like Facebook, and Twitter!

If you’re not one of the few that uses Google+, then Google’s Sharing defaults inside of Google Blogger aren’t necessarily for you.  The scream Google sharing only.  The e-mail button is an icon of GMail, Google+ is the biggest sharing button.  Sure you can get to the others, but they are little buttons.  Don’t you want to be mainstream?

Here’s how I changed it with a little help from A Consuming Experience.

Getting your sharing code snippets

First, before I even touched my blog, I went to the appropriate sites to obtain my sharing buttons.  For me, that was the Facebook Like Button, Twitter’s Tweet Button, and LinkedIn’s Share Button (although I don’t use this one on my photo blog).  From these pages, you should use the UI to decide how you want the button to look for your site.  Make sure you specify a URL to Like, Tweet, or Share, this is a temporary URL, I used http://foo.bar.com. This is a placeholder for later.

I saved each of these code snippets into Notepad for copy/paste later.

Adding the sharing code to the Blogger blog

Inside your Blogger Dashboard, select the blog you wish to add your sharing buttons to, then click the “template” modification and choose to Edit the HTML:

Templete / Edit HTML

Choose to Proceed when you edit the HTML, and then make sure you select Expand Widget Templates that’s at the top:

Expand Widget Templates

Scroll down until you find the <b:include id=’shareButtons’ var=’post’> tag.  I deleted everything between that tag, and </b:includable> and replaced it with my own sharing code.

This is where things get fun. 

You need to replace that http://foo.bar.com with the URL of the blog post.  Google puts that information into a variable and replaces it at the time the page is rendered.  So we simply need to do this as well.  Let’s take a look at the twitter code, because it’s the simplest. 

Here is what Twitter gave me:

<a class='twitter-share-button' data-count='horizontal' data-via='seandaniel' data-url=”http://foo.bar.com” href='https://twitter.com/share'>Tweet</a><script src='//platform.twitter.com/widgets.js' type='text/javascript'/>

note that I have bolded the temporary URL we need to replace with the URL of the blog post.  With the help of the above website, this is what I changed it to:

<a class='twitter-share-button' data-count='horizontal' data-via='seandaniel' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a><script src='//platform.twitter.com/widgets.js' type='text/javascript'/>

Note I have added the expr: phrase which tells Google there is something to replace after the “=” sign.  I then put in the URL variable data:post.url, and also changed the quotes from double quotes to single quotes.  Google interprets that code and inserts the actual URL of the individual blog post.  Thus if they tweet on the main page with all the posts, they still only tweet the one that they are intending to, instead of the entire feed of posts.

So yeah, a little harder than their previous format where you had just put in <$BlogPostPermanentURL$>, but not too difficult all the same. 

Now on my blog you can see the following at the bottom of each post, without having to put that Google + link there.

Sharing Buttons

Cleans things up and standardizes them all in one.  Enjoy.


34 comments:

caroline jesi said...

Nowadays, most of the businesses rely on cloud based CRM tool to power their business process. They want to access the business from anywhere and anytime. In such scenarios, salesforce CRM will ensure massive advantage to the business owners.
Regards,
Cloud Computing Training in Chennai | Cloud Computing Courses|Cloud computing course in Chennai

Hani VJ said...

Very useful information in this article! its really useful in 
Mobile app development chennai

lenin christ said...

This was an nice and amazing and the given contents were very useful and the precision has given here is good.
Java Training in Chennai

yalini win said...

interesting writeups. thanks for sharing.
Data Science Training in Chennai

akshay kumar said...

Your blog was awesome.Devops Training in Chennai
Devops Training in Bangalore

SRI said...

Very usefull content. thanks for posting dude.

RPA Training in Chennai

Anonymous said...

DevOps career opportunities are thriving worldwide. DevOps was featured as one of the 11 best jobs in America for 2017, according to CBS News, and data from Payscale.com shows that DevOps Managers earn as much as $122,234 per year, with DevOps engineers making as much as $151,461. DevOps jobs are the third-highest tech role ranked by employer demand on Indeed.com but have the second-highest talent deficit

Are you seeing DevOps in your future? Perhaps you are already exploring where to start learning DevOps, choose myTectra the market leader in Devops training.
CHAPTER 2: UNDERSTAND COMMON INFRASTRUCTURE SERVERS
CHAPTER 3: IMPLEMENT AUTOMATED INSTALLATIONS AND DEPLOYMENTS
CHAPTER 4: UNDERSTAND PERFORMANCE TUNING ASPECTS AND BASIC SECURITY FOR INFRASTRUCTURE
CHAPTER 5: INSTALLATION & CONFIGURATION OF JENKINS AND PUPPET
CHAPTER 6: INTRODUCTION TO AUTOMATION WITH ANSIBLE AND SALTSTACK
CHAPTER 7: AUTOMATION WITH CHEF
CHAPTER 8: MONITORING, LOGGING, TOMCAT AND SYSTEM TOOLS

Priya Rajesh said...

Thanks for taking to share this page admin. It is really helpful.
RPA Training in Chennai
RPA courses in Chennai
Blue Prism Training in Chennai
UiPath Training in Chennai

Sri Nithya said...

Thanks for sharing this information with us.
DevOps Training in Chennai
DevOps course in Chennai
DevOps course
Best DevOps Training in Chennai
DevOps foundation certificate

cynthia williams said...

Learned a lot from your blog. Good creation and hats off to the creativity of your mind. Share more like this.
ccna Training center in Chennai
Best CCNA Training Institute in Chennai
ccna certification in Chennai

Priya Rajesh said...

Interesting blog, it gives lots of information to me. Thanks for sharing such a nice blog.
Machine Learning Training in Chennai
Machine Learning Certification
Machine Learning Training in Adyar
AWS course in Chennai
Angularjs Training in Chennai
R Training in Chennai

Pankaj Singh said...

Thank you much for this tutorial; this is an informative and valuable blog. Visit for
Outsourced Web Hosting Support

Meera Kumar said...

Great Article… I love to read your articles because your writing style is too good, its is very very helpful for all of us. Do check R Programming training in chennai & Get trained by an expert who will enrich you with the latest trends.

Ananya Krishnan said...

Good job in presenting the correct content with the clear explanation. The content looks real with valid information. Good Work

DevOps is currently a popular model currently organizations all over the world moving towards to it. Your post gave a clear idea about knowing the DevOps model and its importance.

Good to learn about DevOps at this time.

devops training in chennai | devops training in chennai with placement | devops training in chennai omr | devops training in velachery | devops training in chennai tambaram | devops institutes in chennai | devops certification in chennai

Meera Kumar said...

Amazing article. Your blog helped me to improve myself in many ways thanks for sharing this kind of wonderful informative blogs in live. I have bookmarked more article from this website. Such a nice blog you are providing! Kindly Visit Us R Programming institutes in Chennai | R Programming Training in Chennai

kavinilavu G said...

Great blog.This was really informative and helpful.Thank you for shared.keep update..check it also big data Hadoop training and certification in Chennai
Big data course fees
hadoop training in chennai velachery

Anbarasan14 said...

I believe this will surely help the readers who are really in need of this vital piece of information.

Best TOEFL Institute in Chennai
TOEFL Course in Chennai
TOEFL Courses in Chennai
TOEFL Class in Chennai
Spanish Institute near me
Spanish Institute in Chennai
Spanish Training in Chennai 

Sakthi Murugan said...

Thanks for sharing a valuable information to us. your article inspired me more. I Would like to get more updates in future.
Selenium Training in Chennai
Best Selenium Training Institute in Chennai
ios developer training in chennai
Digital Marketing Training in Chennai
Best hadoop training institute in chennai
Big Data Hadoop Training in Chennai
Hadoop Course in Chennai

Anbarasan14 said...

Thanks for your efforts in sharing this information in detail. This was very helpful to me.

French classes in chennai
French language classes in chennai
French courses in Chennai
German Training Institute near me
German Language Classes in Chennai
German Course in Chennai
German Coaching Center in Chennai

Shadeep shree said...

Great information!!! Thanks for your blog
Computer Education Franchise in India
Franchise in Education Sector
Franchise India
Franchise Business in India
Top 10 Franchise Business in India

Annie said...


Awwsome informative blog ,Very good information thanks for sharing such wonderful blog with us ,after long time came across such knowlegeble blog. keep sharing such informative blog with us.
Airport Management Courses in Chennai | Airport Management Training in Chennai | Diploma in Airport Management Course in Chennai | Airlines Training Chennai | Airline Academy in Chennai

Arunaram said...

This blog is really good.Your content is very creativity information. I learn more from this post.
Web Designing Course in Aminjikarai
Web Designing Training in Vadapalani
Web Designing course in Chennai kknagar
Web Designing Training in Karappakkam
Web Designing Course in Padur
Web Designing Course in Tambaram

sultana mohammed said...

Thanks for sharing this valuable information to our vision. You have posted a worthy blog keep sharing.
hadoop training in bangalore
hadoop training in bangalore
big data training in bangalore
big data courses in bangalore
hadoop training institutes in bangalore

Arunaram said...

This post is marvelous!!! I read this blog very great content and i learn more details. Thank you so much.
Big Data Hadoop Admin Training in Bangalore
Big Data Hadoop Administrator Training in Bangalore
Big Data Hadoop Course in Aminjikarai
Big Data Hadoop Training in Vadapalani
Big Data Hadoop Training in sholinganallur
Big Data Hadoop Course in navalur

pavithra dass said...

Thank you for taking the time and sharing this information with us. It was indeed very helpful and insightful while being straight forward and to the point.
Cloud computing Training in Chennai
Hadoop Training in Chennai
Cloud computing Training centers in Chennai
Cloud computing Training institutes in Chennai
Big Data Course in Chennai
Big Data Hadoop Training in Chennai

nanadhini chandran said...

Nice Article,Great experience for me by reading this info.
thanks for sharing the information with us.keep updating your ideas.
Cloud computing courses in Bangalore
Cloud Computing Course in Anna Nagar
Cloud Computing Courses in T nagar
Cloud Computing Training Institutes in OMR

suresh H said...

I am feeling grateful to read this. you gave a nice info for us.please update more stories.
Angular 6 Training in Chennai
RPA Training in Chennai
DevOps Training
Java Training in Chennai
Python Online training

sharmi chithra said...

Nice post. I learned some new information. Thanks for sharing.

Xamarin Training Institute in Chennai
Xamarin Training Institutes in Chennai
Xamarin Training in Velachery
Xamarin Courses in Velachery
Xamarin Training in Tambaram
Xamarin Courses in Tambaram
Xamarin Training in Adyar
Xamarin Courses in Adyar

vishnu said...

It is an informative post. I have found it very useful. Good job.

C C++ Training in Chennai
C Training in Chennai
C C++ Training in Adyar
C C++ Training in Tambaram
C C++ Training in Velachery

Aruna ram said...

Fantastic concept, this is very helpful for improve my knowledge. I like more content from your blog....
Machine Learning Training in Aminjikarai
Machine Learning Course in Vadapalani
Machine Learning Course in Chennai
Machine Learning Training in Chennai Velachery
Machine Learning Course in Tnagar

Aman CSE said...

Your blog on RPA is so attractive that i am not able to stop myself to read this blog of yours on RPA.This blog contains all the important topics and points of RPA. Requesting you keep updating this post on RPAand help them who is eager to gain knowledge on RPA.
Thanks and Regards,
Uipath training in chennai
blue prism training institute in chennai
blue prism training with certification in chennai

Sathish K said...

Thank you for sharing this wonderful information with us.

IoT Training in Chennai
IoT certification
IoT Training in Velachery
IoT Training in Tambaram
IoT Training in Adyar


pavithra dass said...

I am obliged to you for sharing this piece of information here and updating us with your resourceful guidance. Hope this might benefit many learners. Keep sharing this gainful articles and continue updating us.
RPA Training in Chennai
Robotics Process Automation Training in Chennai
Robotic Process Automation Courses
learn Robotic Process Automation
RPA Training Course

aruna ram said...

Thank you for such a wonderful post. I really apprecite for your great information. keep posting...
Big Data Hadoop Training institutes in Bangalore
Big Data Hadoop Training institute in Bangalore
Best Big Data Hadoop Training in Bangalore
Big Data Hadoop Training in Vadapalani
Big Data Hadoop Classes near me
Big Data Hadoop Training in Omr
Big Data Hadoop Training in velachery