Help me with a social site using Wordpress

Last Updated on Friday, 20 March 2009 08:26 Written by webguyatwork Friday, 20 March 2009 08:26

I need your help. I have a new project that will include features of Wordpress that I’m not that familiar with and I need some ideas on what plugins you’ve used in the past to accomplish these types of things.  The site is being built for a Chicago-based group of individuals who just want to get together and have fun by posting topics to the site, and displaying information on upcoming events in the area.  The owner of the site would like to see the following sections:

Streaming Music

Music files, likely in MP3 format, will be loaded dynamically into a player on the site where the visitor can turn it on or off at will.  The idea is to give the visitor a taste of Soca music from the Trini community.

Social Events Calendar

The events calendar, preferably a page on the site that displays upcoming events in the area, will be the highlight of the site and the events need to be advertised throughout the site in order to gain interest in attending them.  Site admins can enter the events through the WP admin.  An option to register for the event is a nice-to-have, but not necessary.

Photo Gallery

An easy-to-use section to visitors to upload photos to a gallery that can be displayed to all visitors.  This requirement is somewhat vague right now, but I imagine that each user who wants to submit photos will have to have a registered account on the site, and upload the photos after they’ve logged in, making them instantly visible to anyone who comes to the site.

Contacts

I’m thinking this list might be a directory of individuals who have chosen to allow their profiles to be publically available, showing their contact information at various social media sites like Facebook, Twitter, MySpace, etc.  The Media Page plugin does a nice job of displaying the media links of the site owner, but doesn’t break it down into individual user profiles. Possibly an extension of the user profile would work nicely here.

Check out my progress on the site as I update it to match some of the suggestions that you will provide here.  Visit Croiseepeople.com.

JQuery: Resize DIV to Full Screen

Last Updated on Thursday, 29 January 2009 11:14 Written by webguyatwork Thursday, 29 January 2009 11:14

This post shows you how I resolved an “issue” where I wanted to take a component from my page and blow it up to full screen using JQuery.  Note: Full screen indicated the full browser window and not the actual screen.

The concept is simple, and I’ve represented the actual layout using the image below:

Building the Page Components

My project included an iFrame which contained contents from another website, so I’ll replicate that here by using an iFrame to load my twitter.com timeline (a simulation).  In my example below, I have wrapped the iFrame itself in a DIV with an ID of “container”, and added a button just inside of the DIV container to allow for the user to toggle between full screen and regular size.  The resulting code now looks like this:

<div id=”container” class=”container”>
<input type=”button” id=”trigger” value=”Toggle Full Screen” align=”right”/>
<iframe src=”http://www.twitter.com/webguyatwork” style=”width: 100%; height: 100%”></iframe>
</div>

The visual representation of what I’ve just done looks like this:

Next, Style the Container

The following styles will be applied to my container DIV.  The first class, named simply “container”, will be used to represent the DIV in its regular state while the second class, “container-fullscreen” will be used to represent the DIV when it is in full screen mode.  Again, full screen actually means the full size of the browser window and not the screen itself.

.container {
position: relative;
height: 500px;
width: 100%;
}

.container-fullscreen {
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
}

Finally, Add the jQuery Code

The jQuery code now can be added, allowing the toggle button to do its job.  The code can be externalized into its own script file, which I strongly recommend in almost any situation, but for the purposes of this demo, I’ll add it inline.  The resulting jQuery code looks like this:

<script type=”text/javascript”>
$(function() {
$(‘#trigger’).click( function() {
$(‘#container’).toggleClass(‘container-fullscreen’);
});
});

</script>

Try it for yourself

Here is a complete view of a working html file that you can download and try for yourself.  I’ve swapped out the button image in favor of a standard input button in this example, but you can see how easy it is to use either and still have the same effect.

<html>
<body>

<script type=”text/javascript” src=”jquery-1.2.6.min.js”></script>
<style type=”text/css”>
.container {
position: relative;
left: 30px;
right: 30px;
height: 500px;
width: 80%;
}

.container-fullscreen {
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
}
</style>

<script type=”text/javascript”>
$(function() {
$(‘#trigger’).click( function() {
$(‘#container’).toggleClass(‘container-fullscreen’);
});
});
</script>

<div id=”container” class=”container”>
<input type=”button” id=”trigger” value=”Toggle Full Screen” style: “align: right”/>
<iframe src=”http://www.twitter.com/webguyatwork” style=”width: 100%; height: 100%”></iframe>
</div>

</body>
</html>

Twitter Visual Stats – Wordpress Plugin

Last Updated on Friday, 9 January 2009 12:52 Written by webguyatwork Friday, 9 January 2009 12:52

My first official Wordpress plugin is complete and ready for distribution.  Named “Twitter Visual Stats”, this plugin is a “widget” that adds a visual Flash-based graph to your site to show visitors your increase in the number of Twitter followers over time.  There are several basic configuration parameters that you can set once the plugin is activated, so you can customize it for your site.

I have just submitted the plugin to the Wordpress.org site for approval and upload to their CVS repository.  Until then, I have made the plugin available on my blog through the following download link.

Download link: http://blog.4minds.com/downloads/twitter-visual-stats/

Installation instructions are included on the page link above as well as in the ZIP file as “readme.txt”.

Feedback

I need it, please.  Tell me what you think of this plugin. Be brutal if necessary, but please give me feedback.  If you have suggestions for improvement, I’ll take them into consideration.  Leave your comments on this post below.