Using Meebo with WordPress and Thematic Theme
Meebo is a great way to integrating all social networks and communications channels into a single, simple-to-use solution. It makes it easy for users to share information quickly. But the problem I found when I installed the WordPress plugin version of Meebo was that it was breaking my site content and adding crazy <span id=”title-refEI-1613″></span> tags around all of your headers. Obviously we don’t want this. So best solution for this problem is not to use the plugin for now until they fix the bug. So lets insert the code ourselves.
To do this go back to the Meebo website and set up an account. Follow the steps and build your unique task bar, once your finish and your looking at an overview there will be a button called Adding Meebo Code. This will give you two sets of Javascript. One goes at the top of your html just below the <body> tag and the other to go at the bottom just above the </body> (it goes at the bottom so that it doesn’t interfere with our page while it loads).
If your building and hard coding directly into your WordPress theme then you can add these to both you header.php and footer.php templates. But if your like me and enjoy using child themes with frameworks like the Thematic theme then you probably don’t want to add any more clutter to the header.php and footer.php templates. So what to do?
Well the following two simple theme hooks can be used to modify your Thematic theme through your child theme functions.php:
Thematic was made with this type of situation in mind and has the hooks:
thematic_before() which ads anything after the opening body tag, before anything else
thematic_after() which ads anything before the final body tag, after anything else
So all we have to do is create 2 new functions and add the action. This is what the code will look like:
function childtheme_meebo() { ?>
<script type="text/javascript">
// this is the javascript you copied from Meebo!
</script>
<?php }
add_action('thematic_before', 'childtheme_meebo');
function childtheme_meebo_btn() { ?>
<script type="text/javascript">
Meebo('domReady');
</script>
<?php }
add_action('thematic_after', 'childtheme_meebo_btn');
I hope this helps, especially for you who had the annoying <span> around all your headers as I did!
About Author
I'm the curator here at designshifts.com as well as being a web developer by day. I have a passion for design and love to share inspiration and tips and tricks with the community.
Actually the temporary fix is found buried at the bottom their troubleshooting page. All you need to do is comment out the offending filter on line 16 in plugins/meebo/meebo.php
//add_filter('the_title', 'addTitleWrapper', -1);
Thanks, that certainly is an easy fix!
Cheers