TUTORIAL IT: facebook share

Showing posts with label facebook share. Show all posts

Wednesday, November 11, 2015

Social Media Subscription And Follow Widget For Blogger

Using Social media subscription and Follow widget on your blog allows your visitors to easily bookmark your pages on facebook, twitter, stumbleupon, reddit and the likes. Once you get lots of followers/subscribers, you will definitely get more regular visitors from these followers, because your post will be shared to their social accounts after subscribing from the social media subscription and follow widget. Top social networking sites like Facebook, Twitter follow, Google plus, and others are part of this blogger widget. Email subscription for your blog post can also be done directly in this blogger widget. Follow the steps below to add the social media/network subscription box to your blog.

Also Read: Facebook Popup Like Box With Timer For Blogger
Related Posts Widget For Blogger / Blogspot with jQuery
How to Customze Labels Cloud In Blogger

How to Add Social Media Subscription And Follow Gadget to Blogger

Go to your Blogger Dashboard
Then Layout.
Click on “Add A Gadget”.
Next, Select “HTML/JavaScript”. Copy and paste this code below into the box.

Save the widget. You've successfully added the social network share widgets in your blog.

Social Follow Blogger Gadget

One of the best blogger gadgets which allows your readers to follow you and get your blog's updates on social networking sites is the social follow gadget. This means more loyal readers, increased traffic and number of followers. You don't have to fill up your blog with seperate social follow gadgets which can increase your blog's page load time. Socializing is necessary to increase you blog's popularity and another SEO technique since it appears in search results.

Also Read: Twitter Feeds Widget For Blogger

How to Add Social Follow Gadget to Blogger

1. From your Blogger dashboard, go to 'Template'. As usual Backup your template before making any new changes to it.

2. Click 'Edit HTML'.Press ctrl+F and search for

<data:post.body/>

code in your blogger template and paste this code just 'below'

<data:post.body/>

Also Read: How to Add 'Link to This Post Widget' to Blogger Post

<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>

Also Read: Sliding Recent Posts Gadget For Blogger

4. After adding the code given above on either the second or third

<data:post.body/>

edit it and make some necessary changes in the USER-ID for each social network. The first two are for Facebook which is the Username, the third and fourth are the Twitter handles and the last two are for Feedburner ID. Save the Template.

How to Add Floating Share Buttons to Blogger

Below are guidelines on how to add floating share buttons to blogger blogs. This blogger widget appears at the side of all pages on your blog, clearly seen by your audience. Having your post shared by your readers with share buttons on social networking sites like facebook and twitter could be rewarding by bringing more traffic to your blog and with more blog traffic, better chances to get clicks on your ads. This is because each time your readers use the Floating Share Buttons to share your blog post on facebook or any other social network, if it is of interest to their friends they can also click on the link or reshare the post. Follow the steps below to add the Floating Share Buttons to your blog.

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.

How to Share Blogger Post Automatically to Social Networks

Sharing blogger post automatically to best social networking sites like facebook, and twitter can help bring meaningful traffic to your blog depending on your fan size. The more the fans, the more page views for you. With the steps below, your post on blogger will be sent automatically to your facebook page instead of sharing them manually each time you update your blog. Should make blogging easier for you and help in efficient use of your time. Twitterfeed and dlvr can be used to share your blog post to social networks.

Also Read: How To Add Floating Share Buttons On Blogger

How to Share Blogger Post to Social Networks with twitterfeed

1. Goto twitterfeed and create a new account if you don't have one already.

2. Click On 'create new feed'.

3. Enter feed name (your desired name) and your URL in the spaces provided. Then click on 'continue'.

3. Click on 'connect a service', select facebook or twitter depending on which social network you want to share your blog post to.

4. Authenticate your facebook or twitter accounts, then select 'create service'.

5. If the service you selected was facebook then continue, Choose facebook page or select facebook profile to share your blogger post on your facebook profile.

6. You can edit the number of times you want your post to be sent to your facebook page by clicking edit (optional), then advanced settings on twitterfeed. Save when your'e through.

Also Read: Social Media Follow And Subscription Follow Gadget For Blogger

How To Share Blogger Post To Social Networks Using Dlvr

1. Goto dlvr.

2. Signup for a new account or sign in if your'e a registered user.

3. Link your accounts.

TUTORIAL IT

Pages