Floating FB popout byReview Results

MoveToTop – Scroll to top button for blogengine

20. June 2012 23:13 by spadire in BlogEngine  //  Tags:   //   Comments (0)

This is a scroll to top extension widget for a page in Blog engine. When a user scrolls down your webpage, a floating button appears on the right corner of your blog, on click of this button the page scrolls to top of the page.

















Download:

You may download the extensions below. To install the extensions, simply copy the downloaded MoveToTop.cs file into your /App_Code/Extensions folder of your blog engine site root folder. And copy the image MovetoTop.png from pics folder into pics folder of blog engine site root folder.

File:

MoveToTop.zip (8.40 kb)

Nuget package for the MovetoTop:

MoveToTop.1.0.nupkg (12.99 kb)

Also available in blog Engine gallery

http://dnbegallery.org/cms/List/Extensions/MoveToTop

After installing MovetoTop, set the following options in extensions

Image path:  You can set this to default or change it to different location, make sure you copy the image to that location if default path is changed.

FaceBookPopOut - Floating Face Book likeBox popout widget

20. June 2012 09:25 by spadire in BlogEngine  //  Tags: ,   //   Comments (1)

This is a Floating Face Book likeBox popout widget for Blog engine. This allows your blog to show a face book like box on mouse hover of floating Face book button on your page.

 









Download:

You may download the extensions below. To install the extensions, simply copy the downloaded FaceBookPopOut.cs file into your /App_Code/Extensions folder of your blog engine site root folder. And copy the image FBFloat.png from pics folder into pics folder of blog engine site root folder.

File:

FaceBookPopOut.zip (12.24 kb)

Nuget package for the FaceBookPopOut:

FaceBookPopOut.1.0.nupkg (15.60 kb)

Also available in blog Engine gallery

http://dnbegallery.org/cms/List/Extensions/FaceBookPopOut

After installing FaceBookPopOut, set the following options in extensions

Facebook URL:  Paste the complete url of your face book webpage

Ex: https://www.facebook.com/pages/ReviewResults/163924380399354 

 

Face book pop out like box widget with Jquery Hover effect for websites and blog engine

17. June 2012 22:00 by spadire in BlogEngine  //  Tags: , ,   //   Comments (1)

This is a nice and simple widget that allows your webpage to show a face book like box widget when a visitor mouse hovers the floating face book icon located on right side of webpage. This was developed using Jquery. This is very simple to implement and will consume very less space on your website or blog. 

 









Adding the widget to the website:

  • Place the following code in your webpage header.

Header code:  

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script> 
  • Copy the following code in your css file of your website.

Css Code: 

img, a { border: 0; }
#on {visibility:visible;Bottom: 50%;}
#off {visibility:hidden;}
#facebook_div {width:234px;height: 256px;overflow: hidden;}
#facebook_right {Bottom: 50%;z-index: 10005;border:2px solid #3c95d9;background-color: #fff;width:234px;height: 256px;position: fixed;right: -240px;}
#facebook_right img {position: absolute;top: -2px;left: -35px;}
#facebook_right iframe {border:0px solid #3c95d9;overflow: hidden;position: static;height: 256px;left:-2px;top:-3px;}
#facebook_left{z-index: 10005;border:2px solid #3c95d9;background-color: #fff;width:234px;height: 256px;position: fixed;left: -240px;}
#facebook_left img {position: absolute;top: -2px;right: -35px;}
#facebook_left iframe {border:0px solid #3c95d9;overflow: hidden;position: static;height: 256px;right:-2px;top:-3px;}
  • Finally paste the below code somewhere inside body tag (at the beginning will be the right place)

Body Code:  

<script type="text/javascript">
    jQuery(document).ready(function () {
        jQuery("#facebook_right").hover(function () { jQuery(this).stop(true, false).animate({ right: 0 }, 500); },
                      function () { jQuery("#facebook_right").stop(true, false).animate({ right: -240 }, 500); });
    });

                 </script>
<p style="display:none;">Floating FB sharing by<a href="http://www.reviewresults.in">Review Results</a></p>
<div id="on">
<div id="facebook_right">
<div id="facebook_div">
<img src="Images/FBFloat.png" alt="" />
<iframe src="http://www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com% pages%2FXXXXX%2FXXXXXXXXX&locale=en_GB&width=238&connections=9&stream=&header=false&show_faces=0&height=256"   scrolling="no"> </iframe>
 </div>
</div>
</div> 
  • Replace pages%2FXXXXX%2FXXXXXXXXX this characters with your face book webpage address.
  • Copy below image to your website location and replace the Images/FBFloat.png path with image path of your website.

 

 

 

 For Blog engine: 

  • Add the following code to header section of custom code in settings. 
<style>
img, a { border: 0; }
#on {visibility:visible;Bottom: 50%;}
#off {visibility:hidden;}
#facebook_div {width:234px;height: 256px;overflow: hidden;}
#facebook_right {Bottom: 50%;z-index: 10005;border:2px solid #3c95d9;background-color: #fff;width:234px;height: 256px;position: fixed;right: -240px;}
#facebook_right img {position: absolute;top: -2px;left: -35px;}
#facebook_right iframe {border:0px solid #3c95d9;overflow: hidden;position: static;height: 256px;left:-2px;top:-3px;}
#facebook_left{z-index: 10005;border:2px solid #3c95d9;background-color: #fff;width:234px;height: 256px;position: fixed;left: -240px;}
#facebook_left img {position: absolute;top: -2px;right: -35px;}
#facebook_left iframe {border:0px solid #3c95d9;overflow: hidden;position: static;height: 256px;right:-2px;top:-3px;}
</style>
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
  • Paste the following code in tracking script of custom code in settings.
<script type="text/javascript">
    jQuery(document).ready(function () {
        jQuery("#facebook_right").hover(function () { jQuery(this).stop(true, false).animate({ right: 0 }, 500); },
                      function () { jQuery("#facebook_right").stop(true, false).animate({ right: -240 }, 500); });
    }); 
 </script>
<p style="display:none;">Floating FB sharing by<a href="http://www.reviewresults.in">Review Results</a></p>
<div id="on">
<div id="facebook_right">
<div id="facebook_div">
<img src="Images/FBFloat.png" alt="" />
<iframe src="http://www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com% pages%2FXXXXX%2FXXXXXXXXX&locale=en_GB&width=238&connections=9&stream=&header=false&show_faces=0&height=256"   scrolling="no"> </iframe>
 </div>
</div>
</div>
 
  • Update pages%2FXXXXX%2FXXXXXXXXX with your webpage in face book.
  • Upload the Images/FBFloat.png image to the installation folder of the theme and replace the image path.

Implementing Floating Share Button for blogs and websites

16. June 2012 01:20 by spadire in BlogEngine  //  Tags:   //   Comments (0)

It is quite simple to implement a floating share button with Face book and Google share button.

You just need to update two files, one is the style sheet and other is the webpage where you want to display the button.

Code implementation in style sheet:

Floating Share Button for website:

You need to place the below css code in the style sheet.

Floating Share Button for Blog Engine:

You need to place the below css code in the style.css file if exist, or the style sheet of theme you are currently using. The style sheet will be in the themes folder of the blog engine installation folder.

 

Css Code:

#pageshare {position:fixed; top:35%; margin-left:0px; float:left;-moz-border-radius:5px;-webkit-border-radius:5px;border: 1px solid #f7f7f7;          

            background: #fff;

            color: #fff;

            padding:0 0 2px 0;z-index:10;}

#pageshare .sbutton {float:left;clear:both;margin:6px;}

#pageshare:hover {-moz-border-radius:6px;

 -moz-box-shadow: 0 2px 4px hsla(0,0%,0%,.35);

 -webkit-box-shadow: 0 2px 4px hsla(0,0%,0%,.35);border: 1px solid #ddd;}

.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;/*bs-fsmsb*/-webkit-border-radius:3px;}

.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}
 

If the floating button is not adjusting properly for different browsers, then try to modify top:35%; to bottom in  first line code .

#pageshare {position:fixed; bottom:35%; margin-left:0px; float:left;-moz-border-radius:5px;-webkit-border-radius:5px;border: 1px solid #f7f7f7;          

            background: #fff;

            color: #fff;

            padding:0 0 2px 0;z-index:10;}

Code implementation in webpage:

Floating Share Button for website:

You need to be place the below code any wherein the body tag of webpage where you want to display the floating button.

Floating Share Button for Blog Engine:

You need to be place the below code any wherein the body tag of sitemap.aspx file of the theme currently using.

Webpage Code:

<div id='pageshare'>

    <div class='sbutton' id='fb'>

    <a name="fb_share" type="box_count"></a>      

         <script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"

                        type="text/javascript">

         </script>

    </div>

    <div class='sbutton' id='gplusone'>

    <g:plusone size="tall"></g:plusone>

                 <!-- Place this render call where appropriate -->

                <script type="text/javascript">

                    (function () {

                        var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;

                        po.src = 'https://apis.google.com/js/plusone.js';

                        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);

                    })();

                </script>

    </div>

 </div>

Adding Google analytics code to Blog Engine

14. June 2012 22:17 by spadire in BlogEngine  //  Tags: ,   //   Comments (0)

Blog engine provides extension for adding Google analytics code to the blog.

Google Analytics Extension (Async) - 2.5.0.0: http://dnbegallery.org/cms/List/Extensions/GoogleAsyncAnalytics

Blog engine provides an option to add track code generated by Google analytics to the website. From the admin view – settings tab, you will find an option to add custom code to the blog.

Adding tracking code from blog engine Admin:

  • Log-in to the account of blog engine.
  • Click in the settings menu.
 
 
  •  Click on the custom code. 
 
 
  • Copy pastes the script code of Google analytics in the tracking script text area. 
 
 
  • Save the settings.
This will add the script to the master/Home page of the selected theme.
 

Adding tracking code manually to the master page of the selected theme:

  • Go to the location of the blog engine installation.
 
 
  • Here you will find list of folders, open the themes folder.
  • Open the theme you are currently using for your blog.
  • Inside this search for file site.master.aspx
 
 
  • Open the file and add Google analytics tracking script inside body tag and save the file.