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

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

Mod Version: 1.00, by StarBuG

vB Version: 4.1.9	Rating: (2 votes - 4.00 average)	Installs: 15
Released: 03 Jan 2012	Last Update: Never	Downloads: 0
Not Supported Template Edits Additional Files External Content

Hello

I created a special way of implementing social bookmarks to my forum http://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:

Code:

/* 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:

Code:

{vb:raw template_hook.headinclude_bottom_css}

add below:

Code:

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

in template SHOWTHREAD search:

Code:

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

add below:

Code:

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

Code:

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

and add below:

Code:

<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/adsense-placements/adsense-integration-nice-message-t15.html

Where to create your social buttons:

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

Download

No files for download.

Screenshots

vBulletin LTS