BUMPzee Integration

I was able to “finally” get the BUMPzee! widget integrated into my site today. No easy task I might add! Following is what I had to do to attain the same look and feel that my other “Social Sidebar” widgets are exhibiting:

1. I downloaded and activated the BUMPzee! plugin in the WordPress Admin section
2. Next I went to the BZ custom widget page to learn how BZ was doing what they were doing with relation to the display of their widget on my page. There, you’ll see that you have the capability to customize the look and feel (somewhat) of what will display on your site. Unless you share that vibrant lime green as your base color, I’d highly recommend that you make some changes. Don’t be afraid! You can do it!
3. Now a key reminder here: realize that if you have installed the BZ plugin code for your WordPress self-hosted site, you should use the php code that is provided to you on the generate widget page. Why? Mostly because that plugin has the one bit of admin functionality that allows you to insert your BZ user ID number. This permits the plugin code to interact directly with BZ’s database and pull your relevant info into your site. At this point you can use the information to display the sidebar widget, or the “bump this” widget
4. Next, since I have Erik Rasmussen’s Widgetize Anything plugin installed, I am able to create my own widget from that php code, that I can then put into either my left or my right sidebar. On my other two “Social Sidebar” widgets, I am actually using the simple text widgets that come with WP, since both of them are being called via JavaScript. That allows me to wrap that JS code with div’s that I am then able to style to better fit into the look of the site. When using the Widgetize Anything plugin, however, everything that is entered has to be in php code (with out the open and close brackets and php calls, since the widget does this for you.) So, in order to get the “Social Sidebar” image to display, I had to rewrite that html code in php (pretty easy as long as you perform the correct syntax with the “echo” command in php.)
5. Now a little “trickeration” had to be coded in order to get the “by BUMPzee!” to display under the “Social Sidebar” image as the myBlogLog and BlogCatalog names were showing above. By default, if the BZ code will show on the site as “Recent Visitors”, and (yuck) it will be centered in the widget table. Again, that’s cool if it fits your site’s look and feel, but in my case, I needed everything to have that uniformity about it. BZ’s challenge here is if you use the php code with the plugin you do not get the variable “headtxt” sent through to the browser, and thus you display the default Recent Visitors and it will be centered. If you are using the JavaScript code that was generated on the widget generator page you can reset that text to whatever you like (“by BUMPzee! in my case) however you still get it centered. To fix this to my liking, I did have to hack their plugin php code page and manually add in “&headtxt=by+BUMPzee!”.

   This was actually a leap of faith (aka, guess!) on my part. I was doubtful that I would be able to override what was being sent to the browser by their servers, but it worked! Woo Hoo. Now I just had to get some styling in there as well, which I’ll address in the next item.

6. Of the three social, community avatar display widgets on the site, BUMPzee’s is actually the easiest to style. The key here is that you have to have a browser that will show you the table code which is created by the JavaScript. Internet Explorer won’t do that for you, but FireFox will! (Gooooo, FF!) By viewing the source code that displays the BZ widget, you get to see all of the id’s and classes that the BZ engineers have coded into their application. From that point you can easily add style selectors to your style.css page and further manipulate the widgets look:
   /*bumpzee*/

   body table#bz_tbl .bz_img {border:1px #000000 solid;}
   (I wanted the avatars to reflect the black, one pixel border from the other widgets)

   body table#bz_tbl .bz_header {text-align:left;font-size:9px;color:#000000;font-weight:800;}
   (this was the styling for the “by BUMPzee!” text. Note I was able to align the text to the left!)

   body table#bz_tbl .bz_footer {display:none;}
   (I probably shouldn’t do this, however, I had been doing it on the other two widgets for two reasons:
   1)I could do it, and
   2) I know of no one who is going to click on a link on my site and sign up directly to one of these services. The more likely action is that a visitor is going to click on one of the avatars (probably one of a cute person) and go into that social communities site. Then the work to convert that visitor into a member resides with their site. Until the services pull my ability to hide those links, I’ll keep them hidden.)

7. And if you’re wondering why I don’t hide the “Sign Up!” link, I’m not able to, as there has been no class or id assigned to it. And I was not able to find anywhere in the JavaScript code a variable for it, so, if you are not a member when you come to my site, you’ll see the sign up code. I can live with that, however, I wish they would give me a style id so I could move it up or to the left (or display:none; it )

And that’s it. Now I have the BUMPzee! capabilities to display my membership and activities on BoldlyGoing.com. Hopefully, that will bring visitors from Bumpzee.com as well as flow visitors into their site. Have you had any interesting challenges or experiences with the customization of a social community widget/plugin into your site? Would love to hear about what happened, both good and bad!