Author Topic: How to add floating Social media Icons to Smf, Vbulletin, Phbb and blog  (Read 1834 times)

0 Members and 1 Guest are viewing this topic.

Online obasimiracle

  • Support Expert
  • *****
It occurred to me once when I needed the same type of floating / static social media Icon (like facebook share , twitter retweet , pinterest, digg and etc) I used to have on my blogger on smf but couldn't find exactly what i needed. the modification (mod) that looks like it didn't have all the  features i was looking for So I settled for this perfect code.

1. go to smf mod site and download global header and footer  n/b download equivalent of global header and footer for vbulletin and phbb

2. Paste this simple code in the header section of your board


here is the code to insert for perfect static
Code: [Select]
<!–SideBar Floating Share Buttons Code Start–>

<style>

#pageshare {position:fixed; bottom:15%; left:12px; float:left; border: 1px solid black; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#eff3fa;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='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='rt'><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a><script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script></div>
<div class='sbutton' id='gplusone'><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><g:plusone size="tall"></g:plusone></div>
<div class='sbutton' id='su'><script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script></div>
<div class='sbutton' id='digg' style='margin-left:3px;width:48px'><script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script><a class="DiggThisButton DiggMedium"></a></div>
<div class='sbutton' id='fb'><a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script></div><br/><div style="clear: both;font-size: 9px;text-align:center;"><a href="https://forum.3ptechies.com/webmaster-browsers-server-technology-email-programing-(c-oracle-etc)-seo-internetafiliate-marketing-making-money-online/how-to-add-floating-social-media-icons-to-smf-vbulletin-phbb-and-blog/msg518/#new" target="blank"><font color="black">Get This<font></font></font></a></div></div>

<!–SideBar Floating Share Buttons Code End–>

or this for floating one

Code: [Select]
<style>
/*-------MBT Floating Counters------------*/
#floatdiv {
    position:absolute;
    width:94px;
    height:229px;
    top:0;
    left:0;
        z-index:100
}

#mbtsidebar {
        border:1px solid #ddd;
        padding-left:5px;
    position:relative;
    height:220px;
    width:55px;
    margin:0 0 0 5px;
}
</style>


<div id="floatdiv">
<div id="mbtsidebar">
    <table cellpadding="1px" cellspacing="0">
    <tr>
    <td style="border-bottom: 1px solid #E8E8E8; padding:5px 0 2px 0;">
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like href="" send="false" layout="box_count" show_faces="false" font=""></fb:like>
    </td>
    </tr>
    <tr>
    <td style="border-bottom: 1px solid #E8E8E8; padding:5px 0px;">
<g:plusone size="Tall" expr:href="data:post.url">
    </g:plusone></td>
    </tr>
    <tr>
    <td style="border-bottom: 0px solid #E8E8E8; padding:5px 0 0px 0;">
<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="obasimvilla">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
    </td>
    </tr>
    <tr>
    <td style="border-bottom: 0px solid #E8E8E8; padding:0px 0 0px 0;">
<p style=" font-size:10px; text-align:center; color:#ddd;"><a style="color:#ddd;" href="http://www.forum.obasimvilla.com" target="_blank">Our Forum</a></p>
    </td>
    </tr>
    </table>
</div>
</div>
<script type="text/javascript">
// JavaScript Document

   <!--
/* Script by: [url=http://www.jtricks.com]www.jtricks.com[/url]
* Version: 20071017
* Latest version:
* [url=http://www.jtricks.com/javascript/navigation/floating.html]www.jtricks.com/javascript/navigation/floating.html[/url]
*/
var floatingMenuId = 'floatdiv';
var floatingMenu =
{
    targetX: 0,
    targetY: 300,
    hasInner: typeof(window.innerWidth) == 'number',
    hasElement: typeof(document.documentElement) == 'object'
        && typeof(document.documentElement.clientWidth) == 'number',
    menu:
        document.getElementById
        ? document.getElementById(floatingMenuId)
        : document.all
          ? document.all[floatingMenuId]
          : document.layers[floatingMenuId]
};
floatingMenu.move = function ()
{
    floatingMenu.menu.style.left = floatingMenu.nextX   'px';
    floatingMenu.menu.style.top = floatingMenu.nextY   'px';
}
floatingMenu.computeShifts = function ()
{
    var de = document.documentElement;
    floatingMenu.shiftX =
        floatingMenu.hasInner
        ? pageXOffset
        : floatingMenu.hasElement
          ? de.scrollLeft
          : document.body.scrollLeft;
    if (floatingMenu.targetX < 0)
    {
        floatingMenu.shiftX  =
            floatingMenu.hasElement
            ? de.clientWidth
            : document.body.clientWidth;
    }
    floatingMenu.shiftY =
        floatingMenu.hasInner
        ? pageYOffset
        : floatingMenu.hasElement
          ? de.scrollTop
          : document.body.scrollTop;
    if (floatingMenu.targetY < 0)
    {
        if (floatingMenu.hasElement && floatingMenu.hasInner)
        {
            // Handle Opera 8 problems
            floatingMenu.shiftY  =
                de.clientHeight > window.innerHeight
                ? window.innerHeight
                : de.clientHeight
        }
        else
        {
            floatingMenu.shiftY  =
                floatingMenu.hasElement
                ? de.clientHeight
                : document.body.clientHeight;
        }
    }
}
floatingMenu.calculateCornerX = function()
{
    if (floatingMenu.targetX != 'center')
        return floatingMenu.shiftX   floatingMenu.targetX;
    var width = parseInt(floatingMenu.menu.offsetWidth);
    var cornerX =
        floatingMenu.hasElement
        ? (floatingMenu.hasInner
           ? pageXOffset
           : document.documentElement.scrollLeft) 
          (document.documentElement.clientWidth - width)/2
        : document.body.scrollLeft 
          (document.body.clientWidth - width)/2;
    return cornerX;
};
floatingMenu.calculateCornerY = function()
{
    if (floatingMenu.targetY != 'center')
        return floatingMenu.shiftY   floatingMenu.targetY;
    var height = parseInt(floatingMenu.menu.offsetHeight);
    // Handle Opera 8 problems
    var clientHeight =
        floatingMenu.hasElement && floatingMenu.hasInner
        && document.documentElement.clientHeight
            > window.innerHeight
        ? window.innerHeight
        : document.documentElement.clientHeight
    var cornerY =
        floatingMenu.hasElement
        ? (floatingMenu.hasInner
           ? pageYOffset
           : document.documentElement.scrollTop) 
          (clientHeight - height)/2
        : document.body.scrollTop 
          (document.body.clientHeight - height)/2;
    return cornerY;
};
floatingMenu.doFloat = function()
{
    // Check if reference to menu was lost due
    // to ajax manipuations
    if (!floatingMenu.menu)
    {
        menu = document.getElementById
            ? document.getElementById(floatingMenuId)
            : document.all
              ? document.all[floatingMenuId]
              : document.layers[floatingMenuId];
        initSecondary();
    }
    var stepX, stepY;
    floatingMenu.computeShifts();
    var cornerX = floatingMenu.calculateCornerX();
    var stepX = (cornerX - floatingMenu.nextX) * .07;
    if (Math.abs(stepX) < .5)
    {
        stepX = cornerX - floatingMenu.nextX;
    }
    var cornerY = floatingMenu.calculateCornerY();
    var stepY = (cornerY - floatingMenu.nextY) * .07;
    if (Math.abs(stepY) < .5)
    {
        stepY = cornerY - floatingMenu.nextY;
    }
    if (Math.abs(stepX) > 0 ||
        Math.abs(stepY) > 0)
    {
        floatingMenu.nextX  = stepX;
        floatingMenu.nextY  = stepY;
        floatingMenu.move();
    }
    setTimeout('floatingMenu.doFloat()', 20);
};
// addEvent designed by Aaron Moore
floatingMenu.addEvent = function(element, listener, handler)
{
    if(typeof element[listener] != 'function' ||
       typeof element[listener   '_num'] == 'undefined')
    {
        element[listener   '_num'] = 0;
        if (typeof element[listener] == 'function')
        {
            element[listener   0] = element[listener];
            element[listener   '_num']  ;
        }
        element[listener] = function(e)
        {
            var r = true;
            e = (e) ? e : window.event;
            for(var i = element[listener   '_num'] -1; i >= 0; i--)
            {
                if(element[listener   i](e) == false)
                    r = false;
            }
            return r;
        }
    }
    //if handler is not already stored, assign it
    for(var i = 0; i < element[listener   '_num']; i  )
        if(element[listener   i] == handler)
            return;
    element[listener   element[listener   '_num']] = handler;
    element[listener   '_num']  ;
};
floatingMenu.init = function()
{
    floatingMenu.initSecondary();
    floatingMenu.doFloat();
};
// Some browsers init scrollbars only after
// full document load.
floatingMenu.initSecondary = function()
{
    floatingMenu.computeShifts();
    floatingMenu.nextX = floatingMenu.calculateCornerX();
    floatingMenu.nextY = floatingMenu.calculateCornerY();
    floatingMenu.move();
}
if (document.layers)
    floatingMenu.addEvent(window, 'onload', floatingMenu.init);
else
{
    floatingMenu.init();
    floatingMenu.addEvent(window, 'onload',
        floatingMenu.initSecondary);
}
//-->
</script>
3. save and customize you buttons by changing the color code   
Code: [Select]
#eff3fa alignment and size.

? for blogger.com blog just drag the html/java script adder into any position of your choice (d code buttons will align itself either left / right depending on your selection) then paste this code inside save and customize.
?. for wordpress.org users go to your dashboard >>>> click on plugin then go to http://wordpress.org/extend/plugins/html-javascript-adder/  download the zip file upload it to your site.
?. activate and drag the widget to any position of your choice then  paste the code and customise.

leave your comments please
« Last Edit: June 24, 2012, 01:00:53 PM by obasimiracle »
Wisdom pays! Be wise!

 

MAKE A STANDARD BUTTON BATCH FOR YOUR WEBSITE OR BLOG

Started by ebenzunlimited

Last post March 14, 2013, 03:33:26 AM
by DE_Light
Review On My Blog

Started by Awwal1st

Last post March 12, 2013, 07:37:37 PM
by DE_Light
Add Facebook Like pop-up box on smf, wordpress, blogspot, php, vbulletin etc

Started by obasimiracle

Last post December 06, 2012, 07:05:59 PM
by obasimiracle

* Post Updates

Re: Convert Thunderbird to Outlook by Blakelymartin
[January 12, 2021, 07:59:43 AM]


UK Fast Company Registration Service? by johnwediki
[January 11, 2021, 01:13:59 PM]


Re: Easiest way to convert EML to PST by Evangelinejoy
[January 11, 2021, 09:49:27 AM]

Inside: 3P Techies Blog

* Newest Techies

Get Updates


Sign up to get latest updates delivered to your inbox. No Spam, We Promise!

Get Hosting!

a Faster web hosting service

 

Copyright © 3rd Planet Techies. All rights Reserved.

Top || Mobile || Privacy