PDA

View Full Version : Miscellaneous Hacks - Meebo Bar


Hell Bomb
07-13-2010, 10:00 PM
Hey everyone, I recently came across the new Meebo Bar (Beta) and i found a way to integrate it into my forums and would like to show you how to do it yourself.

3.8.x version can be found here.
https://vborg.vbsupport.ru/showthread.php?p=2068923

About Meebo bar. From Meebo website (http://bar.meebo.com/faq/)

What does the Meebo Bar offer?
With the Meebo Bar, you get several great features straight out of the box:

* Real-time sharing. Your users can easily share your website with their friends through IM, Facebook, Twitter, Yahoo, and email. The Meebo Bar engages your existing users and brings in new users.
* Custom buttons for your bar. Choose from a host of buttons to add to your bar. Right now we have buttons for Facebook Fan pages, Twitter, RSS, Youtube, Flickr, and a bunch more. If you don't see a button you want, just let us know.
* Personal stats dashboard. See statistics about pageviews, sharing from your site, and which of your Meebo Bar buttons are being clicked, all from your own secure site. You can even give other users their own personal login to access the dashboard.
* Instant messaging from your site. Meebo knows web-based IM better than anyone, and your site visitors will be able to chat and share with their IM friends from AIM, Yahoo!, MSN, Facebook, and a ton of other networks.


Step 1
Go to http://bar.meebo.com/ and sign up their.
Step 2
Once you have an account created start by pressing the integration wizard link.
Step 3
now click the link that says "I host my own blog / site or use a different blog platform"
Step 4
Now you should get some code that looks a lot like this. Copy it all and place it at the bottom of your header include template. (Don't use the code I posted, you the code that you get from the Meebo website.)
<script type="text/javascript">
if (typeof Meebo == 'undefined') {
var M=Meebo=function(){(M._=M._||[]).push(arguments)},w=window,a='addEventListener',b ='attachEvent',c='load',
d=function(){M.T(c);M(c)},z=M.$={0:+new Date};
M.T=function(a){z[a]=+new Date-z[0]};if(w[a]){w[a](c,d,false)}else{w[b]('on'+c,d)};M.v=3;
(function(_){var d=document,b=d.body,c;if(!b){c=arguments.callee;
return setTimeout(function(){c(_)},100)}var a='appendChild',c='createElement',
m=b.insertBefore(d[c]('div'),b.firstChild),n=m[a](d[c]('m')),i=d[c]('iframe');
m.style.display='none';m.id='meebo';i.frameBorder="0";n[a](i).id="meebo-iframe";
function s(){return['<body onload=\'var d=document;d.getElementsByTagName("head")[0].',
a,'(d.',c,'("script")).sr','c="//',_.stage?'stage-':'',
'cim.meebo.com','/cim?iv=',M.v,'&network=',_.network,_.lang?'&lang='+_.lang:'',
_.d?'&domain='+_.d:'','"\'></bo','dy>'].join('')}try{
d=i.contentWindow.document.open();d.write(s());d.c lose()}catch(e){
_.d=d.domain;i['sr'+'c']='javascript:d=document.open();d.write("'+s().replace(/"/g,'\\"')+'");d.close();'}M.T(1)})
({ network: 'YourWebsiteHere_ha26ko', stage: false });
Meebo("makeEverythingSharable");
}
</script>

Step 5
Now open up the footer template on your website and place the following code into the very bottom.
<script type="text/javascript">
Meebo("domReady");
</script>

Hell Bomb
07-14-2010, 07:25 AM
Additions

Storing your JavaScript in an external file.
Step 1
Open up a new notepad document and place the code you got from the Meebo website into it.
<script type="text/javascript">
if (typeof Meebo == 'undefined') {
var M=Meebo=function(){(M._=M._||[]).push(arguments)},w=window,a='addEventListener',b ='attachEvent',c='load',
d=function(){M.T(c);M(c)},z=M.$={0:+new Date};
M.T=function(a){z[a]=+new Date-z[0]};if(w[a]){w[a](c,d,false)}else{w[b]('on'+c,d)};M.v=3;
(function(_){var d=document,b=d.body,c;if(!b){c=arguments.callee;
return setTimeout(function(){c(_)},100)}var a='appendChild',c='createElement',
m=b.insertBefore(d[c]('div'),b.firstChild),n=m[a](d[c]('m')),i=d[c]('iframe');
m.style.display='none';m.id='meebo';i.frameBorder="0";n[a](i).id="meebo-iframe";
function s(){return['<body onload=\'var d=document;d.getElementsByTagName("head")[0].',
a,'(d.',c,'("script")).sr','c="//',_.stage?'stage-':'',
'cim.meebo.com','/cim?iv=',M.v,'&network=',_.network,_.lang?'&lang='+_.lang:'',
_.d?'&domain='+_.d:'','"\'></bo','dy>'].join('')}try{
d=i.contentWindow.document.open();d.write(s());d.c lose()}catch(e){
_.d=d.domain;i['sr'+'c']='javascript:d=document.open();d.write("'+s().replace(/"/g,'\\"')+'");d.close();'}M.T(1)})
({ network: 'YourWebsiteHere_ha26ko', stage: false });
Meebo("makeEverythingSharable");
}
</script>
Step 2
Now get rid of the following lines
<script type="text/javascript">
and
</script>

Step 3
Now save the file as meebo.js
Step 4
Upload that file wherever you want in your ftp.
Step 5
Open up your footer template and find the following code.
<script type="text/javascript">
Meebo("domReady");
</script>


Step 6
Replace it with.
<script type="text/javascript" src="path/to/meebo.js></script>

Step 7
Save the template.


Setting user group permissions
Step 1
Open up the footer template.
Step 2
Find the following code
<script type="text/javascript" src="path/to/meebo.js></script>
OR
<script type="text/javascript">
Meebo("domReady");
</script>
Step 3
Add the following above it
<vb:if condition="is_member_of($bbuserinfo, array(5, 6, 7))">
And add the following after it
</vb:if>

Step 4
Replace the
5,6,7
with whatever usergroup id's you want the be able to view the Meebo Bar


Disabling Drag to share on images and videos
Step 1
Open up either your external JavaScript file or the code placed in the footer and find the following line
Meebo("makeEverythingSharable");
Step 2
Change it to the following
Meebo("");

Hell Bomb
07-14-2010, 07:29 AM
-- Live Previews--
http://bar.meebo.com/
http://www.elitegamingcrew.org/ (Thank you acezakj for the live preview)

-- Screenshots --

JAFRI
07-14-2010, 01:06 PM
screen shots plzz

vividbreeze
07-14-2010, 03:18 PM
integrating this, would you be able to chat with members live or no?

benstillman
07-14-2010, 05:27 PM
Tagged. Definitely want to see/hear more. Screenshots would be swell.

Greight
07-14-2010, 06:11 PM
So where does the first code should be placed?

acezakj
07-14-2010, 09:05 PM
If you don't mind i updated your instructions and i gave you full credit.

CoZmicShReddeR
07-14-2010, 10:29 PM
I still do not get what this does... How about a link to a website with this in action? Or some pics??

acezakj
07-14-2010, 11:27 PM
<a href="http://www.elitegamingcrew.org/" target="_blank">http://www.elitegamingcrew.org/</a> or check the Meebo (Updated) post

Hell Bomb
07-19-2010, 07:52 PM
Their, i updated with some screenshots for a better example of what it does.

BozzaJos
07-26-2010, 12:46 AM
Is it possible to add the forum breadcrumbs to the toolbar? or is this on the WIP list?

Hell Bomb
08-05-2010, 04:03 AM
Is it possible to add the forum breadcrumbs to the toolbar? or is this on the WIP list?

huh?

DieselTruck
11-16-2011, 06:48 AM
So, how do you integrate this to showing the actual vBulletin username in the chat bar?