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

[StarBuG]

Hello

I created a special way of implementing social bookmarks to my forum www.AdSenseExperts.com (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:


/* 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=ar ial&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: http://www.google.com/webmasters/profilebutton/
Google +1 Button: http://www.google.com/webmasters/+1/button/
Facebook Like Button: http://developers.facebook.com/docs/reference/plugins/like/#
Twitter Button: https://twitter.com/about/resources/buttons

[Gemma]

Not something I can use but nicely done. Thanks for taking the time to share :)

[v123shine]

Please make this mod for vb 3.8.x

[tafreeh]

what do you suggest to implement this on a fluid style theme ?

[GameOverViper]

Thank you for doing this! However, there is some problems with it. In your code you provide, the facebook options has a different language than English setup. I have made the adjustment to en_US for English though.

Is there an issue with the Facebook Like? After liking, there was a popup that wouldn't go off the screen until I reloaded the page.

How can I bring it down some? It doesn't look that great with it being all the way to the top of my header with the theme I'm using and it would look better if it was more mid-screen.

[StarBuG]

Thank you for doing this! However, there is some problems with it. In your code you provide, the facebook options has a different language than English setup. I have made the adjustment to en_US for English though.

Is there an issue with the Facebook Like? After liking, there was a popup that wouldn't go off the screen until I reloaded the page.

How can I bring it down some? It doesn't look that great with it being all the way to the top of my header with the theme I'm using and it would look better if it was more mid-screen.

I missed that FB changed the behaviour of the XFBML implementation to display a comment box after pressing Like.
Unfortunatly this option can't be disabled.
I changed the code to use the iframe version which does not use a comment box.
However the iframe version does only support 1 fixed url and not the url of the current page you are on.
If someone finds a solution for this problem please let me/us know!
I also fixed the languange ;)

Thanks for pointing this out

[GameOverViper]

The website Forbes.com (http://www.forbes.com/) has something similar to this and it is located right below the header and scrolls with the screen. It's also got the Facebook Share button. I'm curious to know how I can get the Facebook Share button.

If you view one of Forbes articles (http://www.forbes.com/sites/ericsavitz/2012/01/07/ces-this-year-its-the-consumer-experience-show/), it show's more social sites like Reddit. If we could have more options like this that would also be great.

[StarBuG]

It is just html and css, you can implement as much icons as you want.
you can get the share button where you get the like button from facebook.

[Antonio Pereira]

No updates on this Mod?

[Antonio Pereira]

How to add right place the code is for left:
margin-left:-90px;}

[silynnie]

very smart modification

[karlm]

Is this working 4.2+?