Next Blogger Tricks: Comments

How To Install Disqus Comment System In Blogger

Hi Friends previously we had discussed about creating a full width page in blogger which was good trick and 100% percent working in all blogger blogs. And now today here I am back with another tutorial and tricks which is fully working on all blogs. means this tricks also working in all platform blogs. This is a comments system which named as DISQUS. This comments system was very cool and awesome and also it working on all platform blogs like (wordpress, blogger, typad, joomla, drupal and others). But today I'm going to discuss and install DISCUS comments system in blogger blogs. This comments system is really beautiful and professional looking for all websites and blogs. This comment system are install in any kind of blogs and websites and you have seen the many popular websites where this system is integrated. The reason of its popularity are this comments system having lot of fantastic features so every one may like to install this DISQUS comments system in their blog or website. Before we get in to tutorial, let me tell you some fantastic feature of this Comment System.

Features Of DISQUS Comment System:-

I've listed some fantastic features of this DISQUS comment system I you may like its fantastic and awesome features read the following features below.

Cool, Clean and Simple Design.
Social Networking sites login
Awesome Threaded comments System
Star, Reaction and Emoctions in Comments
Thumbs Up and Down sign
Easily Edit and Delete the comments
Edit visitor comments
Relates comments or Discussions
Comments Awaiting Moderation
Spam Checker
Much More!

How To Install Disqus Comment System In Blogger Blogs?

After telling you the information and features of this DISQUS comments system, now you may want to add this in your blog or website. This is so easy to implement this in blog you will no need to edit the coding and other option. Just follow the below steps.

Go To Disqus>>Click On "Add Disqus To Your Site" Button.
There you will see the registration form, fill the full form to register.

In next step you will be asked your site name and unique disqus id fee the all fields.

After filling the all fields click on "Finish registration" Button.
In the next step, you will be asked for choosing the platform, so choose you platfor where your blog created.

After choosing the platform, you will see the new page where you can integrate that comments system in your blog or site and importing all blogger comments to this system.
Now, first of all you need to integrate the comment system and then we will import the all blogger published comments. follow below steps.

Click on "Add Your Blog to my Blogger Site" Button.

After click the button the new tab will be open where you will be install comments system. Choose your blog and then click on "Add widget" button.

Now you've successfully added the comments form in your blog.
Then import the all blogger existing published comments in this system.
Click on the 2nd line "Tools > Import".

Then click on Import Comments from Blogger.

Now Blogger will ask for the permission for grant access then click Grant Access button to give the permission.

Now choose your blog and then click on Import button to import blogger comments.

After the clicking on Import button you will see the message like below image.

Now you have to wait for 24 hours to completely imported all blogger comments into disqus comments system.
That's all
You're done and wait for 1 day.

Final Words

So friends this is our long and helpful tutorial of today. I hope you've add the disqus comments system in your blog and also imported all your blogger comments. I hope you have enjoying this long tutorial of us and you have any question or need some help then feel free to ask comments box for your answers and solution. Don't forget to like our Facebook page and please kee visiting us.

Happy Blogging!

Monday, August 11, 2014

Show Google+ and Blogger Comments Together In Blogger

Hello friends we're previously shared an amazing tricks for blogger that is How to add snow fall at background of blogger blog this tutorial is perfectly suite in christmas season because it is made for main purpose is christmas. Today's post are amazing for your blog commenting as you now that blogger has launched the new function is google+ comments on blogger blogs. but when we look at our blogs. But don't worry, we've got the great solution to add both Blogger and Google+ Commenting system in blogs. Yes it is possible in blog and here we are going to learn about this in our tutorial. Before we begin the tutorial, I would like explain and let me tell you something about this system.

How It Work?

You can see many commenting system like below this.

Recommended : Facebook Comments Inside the Tabs for Blogger Blogs

You can see the two images and between them a short message telling the visitors that they can use Blogger Commenting or Google+ Commenting systems? By default setting it will show the Blogger comments and when anyone click on Google+ logo then blogger comments will be hidden and Google+ comments will be appearing at the place of blogger comments. If anyone click on blogger or Google+ icon then other icon will seen in black and white styles otherwise it will not shown.

Why Using These Two Commenting Systems?

The main purpose is that we should use Google+ with its comments system but due to it's disadvantages it creates many problem for blogger comments system. This will be fine from every side. You will not loosing your blogger comments by enabled only Google+ comments. By this method of both comments are using in blogger blog are effect any part of your blog it just only show both systems comments. This systems will be more Google friendly that is simple and pretty for every posts and pages of your blogger blog. It also improve your rank which is the future.

How It Made?

We've made this system with the help of JavaScript and CSS and it will not affected on your blog loading speed. Google+ comments system is added the JavaScript which we are going to add in blogger template the posts and you will not need to again enable from Google+ section of blogger. This Both systems are developed by Syed Faizan Ali and David Kutcher so all credits goes to them.

How To Show Google+ & Blogger Comments Together?

Well, after explain it, now it's time to add this in your blogger blog. Now follow the simple steps and don't forget to before the editing your template make its backup.

Go to Blogger Dashboard>>Template>>Edit HTML
Find the below code using (Ctrl+F)

<b:includable id='comment_picker' var='post'>
.
.
.
</b:includable>

Replace the above code with the following below coe.

<b:includable id='comment_picker' var='post'>
<b:if cond='data:post.forceIframeComments'>
<b:include data='post' name='iframe_comments'/>
<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>
<b:else/>
<b:if cond='data:post.commentSource == 1'>
<b:include data='post' name='iframe_comments'/>
<b:else/>
<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='threaded_comments'/>
</b:if>
</b:if>
</b:if>
</b:includable>

Now find the below code.

<b:includable id='threaded_comments' var='post'>
.
.
.
</b:includable>

Replace the above code with following below code.

<b:includable id='threaded_comments' var='post'>
<div id='com-header'>
<img class='com-on' id='com-norm' src='https://lh4.googleusercontent.com/-lpZEcOM0zb0/U7K69Q84wJI/AAAAAAAAAR0/ICqZsVUJqac/h120/blogger.jpg' title='view Blogger comments'/><h6><h6>← Blogger OR Google+ →</h6></h6> <image id='com-gplus' src='https://lh6.googleusercontent.com/-23L5rFcsPlE/U7K4MvDhmLI/AAAAAAAAARk/zi0J_g2L-_4/h120/google%2B.JPG' title='view Google+ comments'/><h6>The Choice is Yours!</h6>
<div id='copyrigtsmbl'><a href='http://nextbloggertricks.blogspot.com/2014/07/show-google-and-blogger-comments.html' id="mblrights">Get This Widget</a></div>
</div>
<div id='comment-zone'>
<div class='comments' id='comments'>
<a name='comments'/>
<h4><data:post.commentLabelFull/>:</h4>
<div class='comments-content'>
<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='threaded_comment_js'/>
</b:if>
<div id='comment-holder'>
<data:post.commentHtml/>
</div>
</div>
<p class='comment-footer'>
<b:if cond='data:post.allowNewComments'>
<b:include data='post' name='threaded-comment-form'/>
<b:else/>
<data:post.noNewCommentsText/>
</b:if>
</p>
<b:if cond='data:showCmtPopup'>
<div id='comment-popup'>
<iframe allowtransparency='true' frameborder='0' id='comment-actions' name='comment-actions' scrolling='no'>
</iframe>
</div>
</b:if>
<div id='backlinks-container'>
<div expr:id='data:widget.instanceId + "_backlinks-container"'>
<b:if cond='data:post.showBacklinks'>
<b:include data='post' name='backlinks'/>
</b:if>
</div>
</div>
</div>
<div id='gcontainer'><div id='gcomments'/></div>
<script src='http://apis.google.com/js/plusone.js'/>
<script src='https://googledrive.com/host/0B0WJjcJEFNziQU01STJVc3RzeWc'/>
<style>
#gcontainer {
display:none;
}
#com-norm,#com-gplus {
cursor:pointer;
padding:0 5px;
float:left
}
#com-header {
border: 1px solid #d2d2d2;
padding: 10px;
float: left;
width: 580px;
margin-bottom: 20px;
background: #f5f5f5;
}
#com-header h6{
font-size: 20px;
text-transform: uppercase;
font-weight: bold;
float: left;
padding-top: 15px;
margin: 0px;
margin-right: 7px;
margin-left: 7px;
}
#copyrigtsmbl {
float: right;
margin-top: 20px;
border-top: 1px solid #d2d2d2;
margin-right: -10px;
padding-right: 10px;
padding-top: 5px;
padding-left: 10px;
border-left: 1px solid #d2d2d2;
padding-bottom: 5px;
margin-bottom: -10px;
font-size:11px;
background: #fff;
}
#copyrigtsmbl a {
text-decoration:none;
color:111!important;
}
</style>
</div>
</b:includable>

Now finally. Click on "Save Template" Button.
CONGRATULATION You're successfully add this plugin in your blogger blog.

Last Words

So Bloggers, this was our small tutorial or blogger trick. I hope you can add this both systems in your blogger blog, if not? so please leave a comments for your solution and don't forget to like our Facebook Page and also share this post with your friends on social networking sites.

Happy Blogging!

Tuesday, July 01, 2014

How To Show Facebook & Blogger Comments Inside Tabs In Blogger {Updated}!

Hello Friends we're previously discussed about the Statistics Data of blogs and websites this is the very important thing for run your blog or website in search optimization if you are not read this statistics tutorial so, don't worry click this link to go this tutorial that is How to Install Google Analytics in blogs and websites. And today I'm going to share an amazing but useful social plugin that is Facebook comment box. As you know about Facebook comments box and you can see this at your Facebook Timeline but you can not see in any blogs if you can see this comment box in some blogs but there are not in tabs. Today I share this amazing Facebook comments system inside the tabs do you know ? that's contain both Facebook and Blogger Comments Tab so, you no need to add specially after install blogger comments after it. Every blogger want to know their blog is different from another blogs and unique. You can visit some popular website and the end of their post you have seen an blue color Facebook comments box this is the best plugin to increase your posts or articles like and also gain more social traffic from this.

Facebook Comments box has a like a third party commenting box like a discus and some other. They are now also being Index by Search Robots. In our first Social Widget posts on Facebook Popup Like Box for Blogger and also Social Subscription Widget for Blogger this two widget of social networking sites for blogger blogs was most appreciate by most of the visitors and helped most of you. If you are like to first see this Facebook & Blogger comments box in blogger blog so, click this live demo link.

LIVE DEMO

After see this plugin's demo I would like to explain this comments box and how it work on blogger blogs. This widget are useful widget but complicated to install. This plugin show bot Facebook and Blogger comments inside the tabs which can be easily to choose and switched to write comments. The Tabs like two comments provider that let the user decide which commenting provider to choose, also it include Yahoo, Hotmail and AOL. This plugin are complicated to install but once this plugin installed in your blogger blog then your blog look like a Facebook Post. Don't waiting read the following steps to install it.
Just follow below steps.

How To Show Blogger + Facebook Comments Inside The Tabs?

Step#1:In order to install Facebook Comments box in blogger box you need to create a application or app on Facebook follow below steps.

Go to Facebook Developer Page
Create a new app and enter your blog URL and fill the full form with your choices, like below image.

After filled the form Hit the "Create App" and go to next step
Now copy your App ID which have got from Facebook and save it in notepad because this used in later, like below image

Now Click On "+Add Platform" Button.
and choose the "Website" Platform
Enter your blog URL and Mobile URL, like below image

After enter your blog URL then click on "Save Changes" Button.

Step#2:Creating Tabs of Facebook Comments and Blogger Comments for decide to write comment in which provider this tabs show in your each posts ending follow below steps.

Go to Blogger Dashboard>>Template>>Edit HTML
Search this tag <head> using (Ctrl+F)
Paste Below code just after it.

<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta expr:content='data:blog.url' property='og:url'/>
<meta content='article' property='og:type'/>
<meta content='YOUR-BLOG-LOGO-IMAGE-LINK' property='og:image'/> <meta content='YOUR-FACEBOOK-APP-ID' property='fb:app_id'/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<script src='http://code.jquery.com/jquery-latest.js'/>
<script type='text/javascript'>
function commentToggle(selectTab) {
$(".comments-tab").addClass("inactive-select-tab");
$(selectTab).removeClass("inactive-select-tab");
$(".comments-page").hide();
$(selectTab + "-page").show();
}
</script>

Replace YOUR-BLOG-LOGO-IMAGE-LINK with your Blog Logo Image link or your blog Favicon link.Your logo image size should be as square or 30px by 30px in size.
Replace YOUR-FACEBOOK-APP-ID with your Facebook App ID which has got from facebook and you can save it in notepad in fourth line of step#1.

Now again search this code or tag

<html

Replace the above code with the below code

<html xmlns:fb='http://www.facebook.com/2008/fbml'

Note : Give a space ate the end of the above code.

Now find this code

]]></b:skin>

Just above it paste the following below code

<--- Start Tabbed FB Comments By NBT ---->
.comments-page { background-color: #f2f2f2; width:450px;}
#blogger-comments-page { padding: 0px 5px; display: none;}
.comments-tab { float: left; padding: 5px; margin-right: 3px; cursor: pointer; background-color: #f2f2f2;}
.comments-tab-icon { height: 14px; width: auto; margin-right: 3px;}
.comments-tab:hover { background-color: #eeeeee;}
.inactive-select-tab { background-color: #d1d1d1;}
<--- End Tabbed FB Comments By NBT ---->

Now find this below code

<div class='comments' id='comments'>

Note : After the first occurrence of the above available code paste below given code.

<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle("#fb-comments");' title='Comments made with Facebook'>
<img class='comments-tab-icon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrYTj9I3adYXm2-RPth5Kct7faYxzJc5f5tUTBOKf5q9GbWpLSitbri5I1WFb7ftiS4bFXBCrmmDEYR8K2HLW_lx4RxXa1XZ2TDSlw-p5jNmk4sIeY305sTV6G4laR9f8FltR8TBMzj00/s400/fbcomment.png'/>
<fb:comments-count expr:href='data:post.url'/> Facebook
</div>
<div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle("#blogger-comments");' title='Comments from Blogger'>
<img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/> <data:post.numComments/> Blogger
</div><div class='clear'/> </div><div class='comments-page' id='fb-comments-page'>
<b:if cond='data:blog.pageType == "item"'>
<div id='fb-root'/>
<fb:comments colorscheme='light' expr:href='data:post.canonicalUrl' expr:title='data:post.title' expr:xid='data:post.id' width='450'/> <div style='color:#fff; background-color:#3B5998;border: solid 1px #ddd; font-size:10px; padding:3px; width:440px;'>Facebook Comments by
<b><a href='http://www.mybloggertricks.com/' style='text-decoration:underline; color:#fff;' target='_blank' title='Blogger Widgets'>Blogger Widgets</a></b>
</div>
</b:if>
</div>

Note : If the above code gave error during the save template the delete the red bolded code in above code.

Now, Finally Save Your Template.

How To add Other comments providers?
If you can enable more emails and comments provider in this Facebook Comments system you can add maximum four email and comments provide see name below.

Yahoo!
AOL
Hotmail
Windows Live

To Enable other login providers to this facebook comments box, click on setting link on the top of this comments box inside your post and then click on check box to allow other login providers

then click on save button.

Final Words

I hope you can add this Facebook comments box in blog if you're facing problem then you can leave comments for your solution and don't forget to like our Facebook page.

Happy Blogging!

Saturday, June 28, 2014

Subscribe to: Comments ( Atom )

How To Install Disqus Comment System In Blogger

Show Google+ and Blogger Comments Together In Blogger

How To Show Facebook & Blogger Comments Inside Tabs In Blogger {Updated}!

Register To Our Newsletter!

Popular This Week