Showing posts with label social share widget. Show all posts
Showing posts with label social share widget. Show all posts

Wednesday, May 14, 2014

In , by // 3:19 PM // Leave a Comment

How to add Blogger Share Buttons to Custom Blogger Templates

Blogger has released their new Share Buttons feature through which makes we can now easier bookmark, tweet, fshare, email ,etc your post of a website. It is associated with the blogger templates (given templates). But, if you're using any custom blogger template, you may not see the widget appearing in blog even though you activate it. In this fact you have to customize your blog a little. Follow the instructions below.

How to add Blogger Share Buttons to Custom Blogger Templates?

Note: before making any changes..first backup your template

Step: 1  Sign into Blogger > Design > Edit HTML

 2. Add this line anywhere you want the widget to appear.

<b:include data='post' name='shareButtons'/>
Normally, in most templates, you can add it after this line..

<data:post.body/>
and add this code after that line..

<p><data:post.body/></p>
<div style='clear:both; padding: 10px 10px 10px 10px;'> <b:include data='post' name='shareButtons'/> </div> 
Note: If you're using Magazine style blogger template, You can find the data:post.body line TWO TIMES.. So, try in both ways and find out which one is working..and remove the other one.

Be aware: If you still don't see it in your Blog, Make sure..you activated it by going to
Blogger Dashboard > Design > Click the 'edit' button of the Blog post section.

add Blogger Share Buttons to Custom Blogger Templates

You have done if you need more info please hit a comment below thanks for reading this article.

Read More

Saturday, April 26, 2014

In , , , , , , by // 4:30 PM // 2 comments

How To Add Facebook Like and Share Button in Every Posts

Adding a facebook like and facebook share button in each and every posts of blogger blogspot has become a common task of the professional blogger. In this post i am going to tell you “How to add facebook like and share button in all posts of blogger blog?”. If you add the like and share button below the blogger posts then the visitor of your blog will able to know the popularity of your post and will be more effective to read your posts and stay your site for long time. So your bounce rate will be decreased and your traffic will be increased. You may think that the coding knowledge such like HTML, CSS, JavaScript will be needed to add facebook like and facebook share button with the blogger posts. If you are more serious about that then the declaration for you that you

do not need the coding knowledge to add the buttons to your blogger blog. Just follow the tricks provided below and win to add facebook like and share button into every posts of your blogger blog. :)


Let's See The Simple Trick

Step 1 Html Tag

  • Go to Blogger.com
  • Choose your Blog where you want to add Facebook Like & Share Button
  • Click on Template on Left Side Menu
  • Now Click Edit Html
  • You will see the HTML tags in the beginning of the template coding Like this

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>

  • Now add the below code at the end of the <html> tag. As shown in the image

 xmlns:fb='http://ogp.me/ns/fb#'

Step 02: Editing Body Tag

Now find out the <body> tag [Click anywhere in the code box then press Ctrl+F]. Now type <body in the box and press “Enter” then you will get the <body> tag
Now add the below code just under the <body> tag. As shown in the picture.

<div id="fb-root"></div>
<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'));</script>

Now find out the <div class='post-footer'> tag [Click anywhere in the code box then press Ctrl+F. A Now write the code <div class='post-footer'> in the box and press “Enter” then you will get the <div class='post-footer'> tag ]
Now add the below code just after <div class='post-footer'> As shown in the picture


<div class="fb-like" expr:data-href='data:post.canonicalUrl' data-send="true" data-width="450" data-show-faces="true"></div>

Now Click on “Save template”

You have done if you need more help please let me know i will help you.
Read More

Powered By Blogger.

© 2014 Blogger Tricks