Miscellaneous Hacks - Like it? Share it! Neat Social Bookmarks Add-on

Hello

I created a special way of implementing social bookmarks to my forum www.AdSenseExperts.com

They are shown in a block left to the forum (I use a fixed width forum though!).
To prevent an overlapping with the forum when the browser window is small or resized there is a JavaScript check which removes the bookmarks or places them within the thread options box when viewing a thread.

See Screenshot attachments

Please NOTE:

• I use a fixed width of 900px for my forum so this mod is primarily for forums width a fixed with!
• jquery is needed for the browser size check. If you implemented jquery already, skip step 2.
• I use a modified footer so I can't promise 100% that it will work like I posted it here but it should
• This mod is released AS IS! No support will be provided!

You'll find all links to create your button codes below the install instructions.

Install:

In additional.css add:

/* Like it? Share it! Social Bookmarks by AdSenseExperts.com */
#socialbookies { background:#FFFFFF; border:1px solid #d7dee3; padding-top: 3px; padding:5px 5px; position:fixed; top:5px; color: #930101; display: none; margin-left:-90px;}
#socialbookies-small { display: none;}

in template headinclude_bottom search:

{vb:raw template_hook.headinclude_bottom_css}

add below:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'></script>

in template SHOWTHREAD search:

<ul id="postlist_popups" class="postlist_popups popupgroup">

add below:

<li class="popupmenu"><div style="align:left;" class="socialbookies-small"><a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="YourTwitterAccount">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script><br />
<font color="#930101"><b>&nbsp;&nbsp;Like It? Share It!</b></font></div></li>
<li class="popupmenu"><div class="socialbookies-small"><g:plusone size="medium"></g:plusone></div></li>
<li class="popupmenu"><div style="align:left;" class="socialbookies-small"><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like href="" layout="button_count" show_faces="false" width="90" font="arial"></fb:like></div></li>

in Template footer search:

<vb:if condition="$vboptions['enablefacebookconnect']">
    {vb:raw facebook_footer}
</vb:if>
</div>

and add below:

<div id="socialbookies">
<center><big><b>Like It?<br />
Share It!</b></big><br /><br />
<div class="g-plusone" data-size="tall"></div><br /><br />
<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="YourTwitterAccount">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script><br /><br />
<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.YourDomain.com&amp;send=false&amp;locale=en_US&amp;layout=box_count&amp;width=55&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font=arial&amp;height=90&amp;appId=YourFacebookAppID" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:55px; height:90px;" allowTransparency="true"></iframe>
<a rel="author" href="https://plus.google.com/YourGooglePlusProfileID/"><img src="http://www.google.com/images/icons/ui/gprofile_button-64.png" width="55" height="55"></a><br /><br />
<a href="http://twitter.com/YourTwitterAccount" target="new" title="Follow YourTwitterAccount on Twitter"><img src="./images/twitter_follow_vs.png" width="50px" height="38px" alt="Follow YourTwitterAccount on Twitter" /></a></center>
</div>

<!-- Browser Window Size Check -->
<script type="text/javascript">
    jQuery(document).ready(function($) {
        // Show social voter only if the browser window is wide enough.
        if( $(window).width() >= 1110 ) 
            $('#socialbookies').show();
                        $('.socialbookies-small').hide();
 
        // Update when user resizes browser.
        $(window).resize(function() {
            if( $(window).width() < 1110 ) {
                $('#socialbookies').hide();
                                $('.socialbookies-small').show();
            } else {
                $('#socialbookies').show();
                                $('.socialbookies-small').hide();
            }
        });
    });
</script>

<!-- Plus One Asynchronous Snippet -->
<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>

I uploaded the image for "follow me on Twitter". You need to upload the image to your /image/ directory.

I marked all IDs you need to adapt to your accounts in red.

Also In the JavaScript part for the browser window size check you need to change 1110 (px) to the browser window width where you want the bookmarks to be removed.

DEMO:
Forumhome: http://www.AdSenseExperts.com
Thread: http://www.adsenseexperts.com/adsens...ssage-t15.html

Where to create your social buttons:

Google Plus Profile Button: http://www.google.com/webmasters/profilebutton/
Google +1 Button: http://www.google.com/webmasters/+1/button/
Facebook Like Button: http://developers.facebook.com/docs/...plugins/like/#
Twitter Button: https://twitter.com/about/resources/buttons

[silynnie]

very smart modification

[karlm]

Is this working 4.2+?