Adding social share and like button to your websites and blogs definitely helps you to get more visitors and at the same time it allows the visitors to share what they like to others. It is not very difficult to add facebook like, share and comment buttons. You can easily do it by visiting Facebook Developers page here.
But what I am going to share here is how to add both facebook like and share button in a line as the one I have on my blog for every post either before post( below title) or after post.
Step 1:Copy the following code
Step 2: Go to Design(Layout for updated interface)> Edit HTML. Then check the "Expand Widget Templates" check box and press Ctrl+f to find <data:post.body/>.
Step 3:If you want to add like and share buttons before post, then paste the code copied in step one just before the code( in red) in step 2 and if you want to add the buttons after post, the paste the copied code after the code(in red) in step 2.
Step 4: Do simple customization for like button. The codes written in red in step 2 are the ones which you can change. You can replace "standard" with "button_count" or "box_count" as desired. Check here how each of them looks. Next you can replace "true" for show_faces with "false". If you do so, then the profile photo will not be displayed bellow the button. Finally change the width and height as you wish.
Step 5: Preview the template. Everything should work fine. Then save template.
Click here for more blogger tricks.
But what I am going to share here is how to add both facebook like and share button in a line as the one I have on my blog for every post either before post( below title) or after post.
Step 1:Copy the following code
<!-- Facebook like button Start --> <iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=standard&show_faces=true& width=100&action= like&font=arial&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:55px;'/> <!-- Facebook share button Start --> <b:if cond='data:blog.pageType != "static_page"'> <div style='float:left;padding:0px 5px 5px 0;'> <a expr:share_url='data:post.url' href='http://www.facebook.com/sharer.php' name='fb_share' type='box_count'>Share</a><script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/> </div> </b:if> <!-- Facebook share button End --> |
Step 2: Go to Design(Layout for updated interface)> Edit HTML. Then check the "Expand Widget Templates" check box and press Ctrl+f to find <data:post.body/>.
Step 3:If you want to add like and share buttons before post, then paste the code copied in step one just before the code( in red) in step 2 and if you want to add the buttons after post, the paste the copied code after the code(in red) in step 2.
Step 4: Do simple customization for like button. The codes written in red in step 2 are the ones which you can change. You can replace "standard" with "button_count" or "box_count" as desired. Check here how each of them looks. Next you can replace "true" for show_faces with "false". If you do so, then the profile photo will not be displayed bellow the button. Finally change the width and height as you wish.
Step 5: Preview the template. Everything should work fine. Then save template.
Click here for more blogger tricks.
No comments:
Post a Comment