How to Add a Facebook and Twitter Like, Share Button on blogger Mobile View Only

Today, I'm sharing with you, how to add Facebook Share, like buttons as well as Twitter tweet button to the mobile view of Blogger blogs. This will make it easy for your blog readers to easily share and tweet your blog posts while accessing your blog on their mobile phones browsers.

Social Media Sharing Image

By default, you should notice a SHARE button with a Google+ button on the mobile view of your blog. If not, you should activate it by following the steps below:

1. Sign in to www.blogger.com
2. Click on your blog and go to "Layout"
3. Click on the "edit" link on the "Blog Posts" section

4. Click on Edit as shown Below:

5. Click "Save"

Once it starts displaying on the mobile view of your blog, if you click on SHARE, a new window should pop up, where you can select where you want to share the post.

To be honest, most of your blog visitors might not know they can also share to Facebook, etc using that default share button. Hence, the need to add a separate Facebook share and Twitter button below it.

Now the main work is here:

To do that, go to "Template" > "Edit HTML"

1. Click inside the Html Codes and use CTRL F to find
<b:if cond='data:top.showMobileShare'>

2. Carefully find the ending </div> as seen in the screenshot below:

3. There are three ending </div> as seen in the screenshot above 

4. Directly below the third one, copy and paste the code below:

<b:if <span class="goog-spellcheck-word" id=":dg.22" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">cond</span>='data:<span class="goog-spellcheck-word" id=":dg.23" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">blog</span>.<span class="goog-spellcheck-word" id=":dg.24" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">pageType</span> == "item"'><<span class="goog-spellcheck-word" id=":dg.25" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">br</span> /><span style='font-size: 15px;font-weight:bold;'>Share : </span><<span class="goog-spellcheck-word" id=":dg.26" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">br</span> /><p align='center'><div class='fb-like' data-action='like' data-layout='button_count' data-share='true' data-show-faces='false'/><a <span class="goog-spellcheck-word" id=":dg.27" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">href</span>="<span class="goog-spellcheck-word" id=":dg.28" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">http</span>://twitter.com/share" class="twitter-share-button" data-count-value="horizontal">Tweet</a><<span class="goog-spellcheck-word" id=":dg.29" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">br</span> /><script <span class="goog-spellcheck-word" id=":dg.30" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">src</span>='http://platform.twitter.com/widgets.js' type="text/<span class="goog-spellcheck-word" id=":dg.31" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">javascript</span>"></script><<span class="goog-spellcheck-word" id=":dg.32" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">br</span> /></p></b:if>

5. Save your template.

Check out the posts on the mobile view of your Blogger blog and you should notice the share and tweet buttons been displayed below the posts.

IMPORTANT NOTE:

Be completely careful when using the html file section, it may cause more harm than good to your blogger files to avoid changing new templates...

Apply and preview your changes to confirm if it is work.