Showing posts with label Social Sharing Widgets. Show all posts
Showing posts with label Social Sharing Widgets. Show all posts
  1. Go to Template > Edit HTML.
  2. Back up your template.
  3. Tick the Expand Widget Templates checkbox on top right of the code window.
Next, locate the first instance of <data:post.body/> tag and paste the following code immediately above it: 























Note: 




    

  • Pin It button will only appear on post  pages. We place this limit  because the button only pins the page on  which it appears. As such  on homepage (if we were to allow it there), every  instance of the button will pin the homepage, not the post (as it’s “supposed”  to). 
    • 

  • The Pinterest script in line 45 must occur only once in your blog. Omit this  line if you’ve already had the script in your blog. 
    • 



  • Buttons positioning 
To position the buttons at the bottom of post, place  the code below (instead of above) <data:post.body/>. 
    • 

  • Preview before saving. 
    • 
Enjoy!

    Nihal





    In order to keeping busy visitors on our blogs finally we got the plugin which we have been waiting from long time,recently facebook has launched their "Recommendation Bar" in beta version,the Recommendation Bar is a plugin which shows a number of some recommended articles for your readers or visitors and you can set number of recommended articles,when any visitor visits to your any post,after some specific time the plugin pop ups at the right/left corner of your blog with the recommended articles,thats why its helps you to keep busy your visitors on your blog.The plugin contains title of your post,thumbnail and number of likes just below of that post and the plugin shows the only those articles which are previously liked or shared on facebook.If you want more such plugins then I am listing some similar widgets and plugins -

    Now lets see how to add facebook recommendations bar to blogger?

    How To Add Facebook Recommendations Bar To Blogger?


    For better understanding I am dividing this post in two parts and they are as below,


    1. Creating new Facebook App
    2. Adding Facebook Recommendations Bar To Blogger

    Part 1 : Creating new Facebook App

    To create Facebook app for your Recommendation Bar follow below steps,
    • First go to Facebook Apps and login with your Facebook account
    • Click on Create New App button at top right corner

    • As soon as you hit Create New App button a pop up box will appear.In App Name field fill Recommend Bar and keep all it is and hit Continue button.
    Click On Image To Enlarge

    • Enter the captcha as shown in image and hit Submit button

    • Now you will redirect to an another page.Scroll down and click on Website with Facebook Login tab and inside the box input your blog URL.Now leave all fields as it is and click Save Changes
    Click On Image To Enlarge


    • Now copy your App ID and paste it into notepad,we will need it later.


    Great,you have created your App.Now lets see how to add Recommendations Bar to blogger.

    Part 2 : Adding Facebook Recommendations Bar To Blogger


    1. Go to Blogger Dashboard > Template
    2. Download a copy of your template
    3. Click on Edit HTML
    4. Hit Proceed button
    5. Now search for below code in your template


    <html

    replace it with below code,
    <html xmlns:fb='http://ogp.me/ns/fb#'


    Now find for below code,
    <body>


    just below of it paste following code,

    Note - If you are using default blogger templates then search for <body tag instead of above code.
    <div id='fb-root'/> 
    <script> 
    //Facebook Recommendation bar by http://fastbloggerhack.blogspot.com/
    //this notice must stay intact for legal use
    //For more visit http://    fastbloggerhack.blogspot.com/
    //<![CDATA[
    (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&appId=YOUR APP ID HERE"; 
      fjs.parentNode.insertBefore(js, fjs); 
    }(document, 'script', 'facebook-jssdk'));
    //]]> 
    </script> 
    <b:if cond='data:blog.pageType == &quot;item&quot;'><b:if cond='data:blog.pageType != &quot;static_page&quot;'><div style='z-index:999999; position:absolute;'> 
    <fb:recommendations-bar action='like' max_age='0' num_recommendations='3' read_time='10' side='right' site='http://    fastbloggerhack.blogspot.com/' trigger='40%'/></div> 
    </b:if></b:if>


    • Replace APP ID HERE with your APP ID which you have created in first part
    • Replace http://fastbloggerhack.blogspot.com/ with your blog URL.
    • The widget will only appear on post pages and not on homepage or static pages. To display it on all pages, then simply delete the lines in red color.
    • If you want to change number of recommendations then simply change the value 3
    • If you don't want to show your old articles then edit the value max_age='0',you can set it to 1-180.But if you don't want to take age into account then let it be 0 as default.
    • If you want to change position of bar to right to left then simply replace right with left. 
    • When any visitor comes to your blog,after specific time the bar expand.I have set the time to 10 seconds to chnage it just change value 10.
    Finally save your template and visit your post pages.

    Nihal



    Today I am sharing an amazing slide out social sharing widget,when any user hovers on this widget it slide out with some social networking button such as twitter,facebook,print,email and add this button which contains share option for almost all social sharing sites.This widget floats to below right corner of the page and scrolls along with page which allow a real time sharing option for your visitors,this widget is created by addthis and bloggerized by us.Now lets go to the tutorial and see how to add this widget to blogger blog.



    How To Add This Widget To Blogger?

    The installation of this widget is damn easy,you can add this widget in two steps.

    1. Go to Blogger Dashboard > Template
    2. Click On Edit HTML
    3. Hit Proceed button
    4. Find For Below Code,

    </head>


    add below code just above it,
    <script type="text/javascript" src="http://s7.addthis.com/js/300/addthis_widget.js"></script>


    Now find for below code
    </body>


    add below code just before/above it,

    <!-- fastbloggerhack.blogspot.com slideout widget : BEGIN -->
    <div class="addthis_toolbox addthis_peekaboo_style addthis_default_style addthis_label_style addthis_32x32_style">
        <a class="addthis_button_more">Share</a>
        <ul>
            <li><a class="addthis_button_preferred_1"></a></li>
            <li><a class="addthis_button_preferred_2"></a></li>
            <li><a class="addthis_button_preferred_3"></a></li>
            <li><a class="addthis_button_preferred_4"></a></li>
        </ul>
    </div>
    <!-- fastbloggerhack.blogspot.com slideout widget : END -->


    Finally save your widget and you are done :) 
    

    

    

    


    Nihal
    

    

    

      



      • 

      • 

      •