TUTORIAL IT

Facebook Invite Friends Button For Blogger

The Facebook 'Invite Friends' button for blogger can also be added as one of the best widget because it enables your blog readers to easily refer their friends to your Facebook fan page, thereby increasing your audience. Normally, this Facebook button can only be found on Facebook pages where Page administrators have to manually invite others to like the page and fans who have liked the page also inviting their friends. Taking advantage of thousands of users on a social networking site like Facebook can go a long way in improving your blog's audience.

Also Read: How to Add HTML Parse Tool To Blogger
                    Social Follow and Subscription Widget For Blogger


How does this facebook invite friends blogger widget work? Each time a person clicks on the 'invite friends button', a new pop-up window opens. They can invite as many as 50 friends (which is the limit) at once to like your page. Using this invite button can help in increasing the fans on your Facebook page, thereby bringing more traffic each time your blog post is shared on the page. Include this widget on your blog so that your readers can also invite their friends to like your page directly from your blog.

Also Read:   'Link to This Post Widget' For Blogger
                     Customized Labels Cloud Widget For Blogger

How to Add the Facebook Invite Friends Button to Blogger

1. Create a Facebook app by Going to Facebook Developer's Page.

2. You must be a registered developer before you can gain access to this to create apps on the page. To do this, click on the Register button on the top right corner.

3 Next, Click on 'Apps'  tab, then select 'Create new app'.

4. Enter a name of your choice for the app and also an identifier(optional), Select your app's category from the drop down menu. Then click 'create'.

5. You'll get an app Id, copy the ID into a notepad or text editor

6. Still on the Facebook developer's page, click on 'app page', and then go to 'settings'. Select 'Add a new platform' and then click on 'Website'. Fill the spaces appropriately with your URL and also mobile URL of your site, and then save your changes.

7.

• .Goto your blogger dashboard
• Click on 'layout' 
• then select 'add gadget' 
• select 'html/javascript'. 
• Copy the entire code below into the html/javascript editor. Before you save, edit the code by replacing the app ID in the code with your 'app ID' which you copied from Facebook developer's page. Also edit the 'facebook page url' in the code, replace it with yours. 
• Then Save the gadget

<style>
/*Facebook Invite Friends Button CSS http://www.informationtutorial15.blogspot.com*/
.MD_fb_invite a{
font-family: 'lucida grande', tahoma, verdana, arial, sans-serif !important;
font-weight:bold !important;
font-size:12px !important;
width:150px !important;
border:solid #3b6e22 1px !important;
border-bottom:solid #2c5115 1px !important;
cursor:pointer !important;
padding:6px 6px 6px 6px !important;
background-color:#68a64c !important;
border-top:solid #98c286 1px !important;
text-align:center !important;
color:#fff !important;
text-decoration:none ! important;
}

.MD_fb_invite a:active{
background-color:#609946 !important;
}
/*End CSS http://www.informationtutorial15.blogspot.com*/
</style>
<script src='http://connect.facebook.net/en_US/all.js'></script>
<script>
FB.init({
appId:'533069656825293',
cookie:true,
status:true,
xfbml:true
});
function FacebookInviteFriends()
{
FB.ui({
method: 'apprequests',
message: 'Invite your friends '
});
}
</script>
<div id='fb-root'></div>
<span class='MD_fb_invite'><a href='http://www.facebook.com/newsville' onclick='FacebookInviteFriends();'>
Invite your friends
</a></span>
<script type='text/javascript'>
if (top.location!= self.location)
{
top.location = self.location
}
</script>

• Save the gadget

<data:post.body/>

<data:post.body/>

<section class="newsletter">
    <h2>
    Tired of checking for new posts ?
    </h2>
    <div id="form-newsletter">
    <div class="social facebook">
    <a href="https://www.facebook.com/newsville" target="_blank">
          <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWmKt7iajFocWE5-ggDsBFfDErQ2YM7dZxAe9hkazqRf0GHJHLAEnaDDjGSEYyuASFcvI1Eq7SNaMGgTvcrcbMbzpwmie2D-_FlMlSi3G-EfiGFPYhFVZhiGIsJ6itWy1KUFQR-8jGQQFY/s1600/nl-facebook@2x.png" />
        </a>
        <iframe allowtransparency="true" class="social-box fb-like" frameborder="0" scrolling="no" src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fnewsville&amp;width=90&amp;height=21&amp;colorscheme=light&amp;layout=button_count&amp;action=like&amp;show_faces=false&amp;send=false&amp;appId=519648428126767&amp;locale=en_US" style="border: none; height: 21px; overflow: hidden; width: 90px;">
        </iframe>
      </div>
    <div class="social twitter">
    <a href="https://twitter.com/news_ville" target="_blank">
          <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP4z0ZB7IaiU-tITV06aPK2ZA_RWGzDtci7XKA2kD5-knEeHxMUrSGYPY-UlsbSWpVrenswXt8FqWEviud7xDfWbbMHQtHHEYG196BCn5LxWz3jvgb03i7w-VzMKpWT2F6QXQPQJNHdD5h/s1600/nl-twitter@2x.png" />
        </a>
        <iframe allowtransparency="true" class="social-box twitter-follow-button twitter-follow-button" data-twttr-rendered="true" frameborder="0" id="twitter-widget-0" scrolling="no" src="http://platform.twitter.com/widgets/follow_button.1399599786.html#_=1399785529920&amp;id=twitter-widget-0&amp;lang=en&amp;screen_name=informationtutorial158&amp;show_count=false&amp;show_screen_name=false&amp;size=m" style="height: 20px; width: 60px;" title="Twitter Follow Button">
        </iframe>
        <script>
          !function(d,s,id){
            var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?&#39;http&#39;:&#39;https&#39;;
            if(!d.getElementById(id)){
              js=d.createElement(s);
              js.id=id;
              js.src=p+&#39;://platform.twitter.com/widgets.js&#39;;fjs.parentNode.insertBefore(js,fjs);}}(document, &#39;script&#39;, &#39;twitter-wjs&#39;);
        </script>
      </div>
    <div class="newsletter-form">
    <fieldset>
    <h2>
           Get all posts directly in your mail.
          </h2>
    <div class="fields">
    <form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.openundefined'http://feedburner.google.com/fb/a/mailverify?uri=informationtutorial158', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
    <input class="email" id="email" name="email" onblur="ifundefinedthis.value=='')this.value=this.defaultValue;" onfocus="ifundefinedthis.value==this.defaultValue)this.value='';" type="text" value="Enter Your Email here.." />
              <input name="uri" type="hidden" value="informationtutorial158" />
              <input name="loc" type="hidden" value="en_US" />
              <input class="subscribe" name="commit" type="submit" value="Subscribe" />
            </form>
    </div>
    </fieldset>
    </div>
    </div>
    </section>
    <style>
    .newsletter{text-align:center;margin:20px 0;}
    .newsletter .social.facebook{background:none repeat scroll 0 0 #3661A0}
    .newsletter .social{padding-top:20%;width:20%;float:left;position:relative}
    .newsletter #form-newsletter{display:block;width:90%;max-width:900px;min-width:500px;margin:0 auto}
    .newsletter:before,.newsletter:after{content:&quot; &quot;;display:table}
    .newsletter:after{clear:both}
    .newsletter h2{color:#3B434D;font-family:Open Sans,sans-serif;font-size:1.5em;font-weight:300;width:65%;margin:1em auto}
    .newsletter .social.twitter{background:none repeat scroll 0 0 #00ACED}
    .newsletter .social a{display:block;left:30%;position:absolute;top:20%;width:40%}
    .newsletter .social a img{max-width:100%;width:100%;transition: transform 0.3s ease-out 0s}
    .newsletter .social a:hover img{transform:scale(1.1)}
    .newsletter .social .social-box{bottom:20px;left:50%;position:absolute}
    .newsletter .social .social-box.fb-like{margin-left:-45px}
    .newsletter .social .social-box.twitter-follow-button{margin-left:-30px}
    .newsletter .newsletter-form{background:none repeat scroll 0 0 #1E293B;float:left;padding-top:20%;position:relative;width:60%}
    .newsletter .newsletter-form fieldset{height:38px;left:10%;position:absolute;top:10%;width:80%;border:none}
    .newsletter .newsletter-form fieldset h2{color:#FFF;font-family:Open Sans, sans-serif;font-weight:300;width:100%;margin:0 0 1.5625em;font-size:16px;}
    .newsletter .newsletter-form fieldset .fields{position:relative}
    .fields .email{border-radius:10px 0 0 10px;outline:0 none;width:84%;border:0;left:0;position:absolute;padding:10.5px}
    .fields .subscribe{background:none repeat scroll 0 0 #F0553B;border:medium none;border-radius:0 10px 10px 0;color:#FFF;right:0;position:absolute;padding:10px;transition:all ease 0.6s;}
    .fields .subscribe:hover {background: none repeat scroll 0 0 #161616;}
    </style>
    <script type="text/JavaScript">
    fontsize = function () {
        var abtSubs = $(".newsletter #form-newsletter").width() * 0.025; // 10% of container width
        $(".newsletter .newsletter-form fieldset h2").css('font-size', abtSubs);
    };
    $(window).resize(fontsize);
    $(document).ready(fontsize);
    </script> 

<data:post.body/>

How To Place Adsense Ads In The Middle Of Blogger Post

1.  Next is to parse the code you generated from your adsense account. Visit this link to parse the adsense code . On the html parse site, paste your code and click on 'convert' . Your parsed code will be generated. Copy this into a notepad or any text editor. The parse code you generated is what we"ll be using.
2. From your adsense account, create a new ad unit or get the code to any previous ad unit you have. Most preferred ones are usually 300*250 Medium Rectangle or 336*280 Large Rectangle ad sizes.   
3. Goto your blogger dashboard, click on 'template'. It will be advisable for you to backup your template first.
4.  Click on "edit html" in your template, Use Ctrl+F and search for this tag <data:post.body/> copy  the code below and paste  'above'  <data:post.body/>. This tag ( <data:post.body/>) will appear more than once in your template, paste the code either on the second or third tag, depending on which will work in displaying the adsense ad.

<b:if cond='data:blog.pageType == &quot;item&quot;'>

PLACE YOUR AD CODE HERE

</b:if>

How To Align Adsense Ad Within Blogger Post

• By default, the ad will be aligned to the left as shown in the image above. If you'll like your post to wrap around the adsense ad, then copy this code below and paste 'above' <data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

    <div style='float:left; margin:10px;'>  // type this line manually, dont copy and paste

    PLACE YOUR AD CODE HERE

    </div>

    </b:if>

How To Centralize Adsense Ad Within Blogger Post

• If you'll the ad to be centralized in your post, and the post below the Ad, copy this code instead..

<b:if cond='data:blog.pageType == &quot;item&quot;'>

    <div align='center'> 

    PLACE YOUR AD CODE HERE

    </div>

    </b:if>

• From your blogger dashboard 
• Click on 'layout'.
• Next,  click on 'Add Gadget'.
• Copy and Paste the code below into the text field

<!-- floating page sharers Start Share This With Friends-->
<style>
#pageshare {position:fixed; bottom:15%; right:10px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#fff;padding:0 0 2px 0;z-index:10;}
#pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}
.fb_share_count_top {width:48px !important;}
.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}
</style>
<div id='pageshare' title="Share This With Your Friends">
<div class='sbutton' id='rt'>
<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via='informationtutorial15' >Tweet</a>
<script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script>
</div>
<div class='sbutton' id='gb'>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:like layout="box_count" show_faces="false" font=""></fb:like></div>
<div class='sbutton' id='gplusone'>
<g:plusone size="tall"></g:plusone>
</div>
<div class='sbutton' id='at'>
<a class="addthis_counter"></a>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js"></script>
</div>
<div style="clear: both;font-size: 9px;text-align:center;"> <a href="http://informationtutorial15.blogspot.com/2015/11/how-to-add-floating-share-buttons-on.html">Get this</a></div>
</div>
<!-- floating page sharers End --> 

• Save the widget. View your blog to see the floating share buttons in your sidebar.