Make Your MySpace Profile Look Like Facebook 2
I’ve had many requests to update my fairly popular Facebook Mimic theme for MySpace. I finally promised myself that I’d do a complete revamp of the theme once I hit 2,000 downloads. Well, that time is now.
Download:
Before downloading, you should know that this theme is a div overlay theme, and it requires a little labor to work properly (a file named “readme.txt” is included to guide you). Also, do not send support questions to me via MySpace. Ask them in the comments section.
A brief history of Facebook Mimic:
- February 25, 2007:
I posted the original theme to an almost nonexistent audience. The theme wasn’t wildly popular at the time, and my attempts to raise it up the Digg and Reddit ladders were unsatisfactory. - June 6, 2007:
Social networking news site, Mashable, posts a huge article, Best MySpace Layouts That Don’t Look Like MySpace At All, naming the Facebook theme in the second spot on their list. The theme seemed to come back to life. Download numbers soared. - September 13, 2007:
A link back from Michael Arrington of Techcrunch in his article, MySpace Getting A Little Less Chaotic?, pushes download numbers higher up the scale. - Since then:
Many requests to update the theme to match Facebook’s newer design. - November 21, 2007:
The theme gets its 2,000th download. - Today:
Updated, revamped, and revitalized version of the Facebook theme for MySpace.
Thoughts about the theme:
This is in no way a finished product. I’m just ready to put it out there, get some bug reports, and continuously update the theme over time. I’ve, honestly, got more important things to do than worry with MySpace themes. I’m a WordPress theme-developer, of course.
Nevertheless, I have put quite a bit of time into this project and would like your feedback. What other options would you want to see? I’m thinking of integrating some other features (if possible) that Facebook has to give it more of a Facebook feel. However, I wanted to leave most of the page elements up to the user because it’s his/her profile.
Internet Explorer has been kicking my ass over the last few days. Even though the browser sometimes causes problems, the real problem is MySpace’s age. They seriously need to think of a revamp themselves.
This version of the template is much less image-reliant. The theme also uses a div overlay as opposed to the twisting, turning, and positioning of MySpace’s tables, circa 1995. Using the theme requires more work on the user’s end, but I assume the people that want a clean layout, probably know a little more about XHTML and CSS anyway.
Tell me what you think about the new Facebook theme for MySpace. I’m interested in your thoughts. Any features you want in future updates? Please report all bugs here.
One other note: I might continue with the development of the original Facebook theme, so that users that don’t want to put in the time, can have another option.
This is really quite good. I haven’t looked at it enough to see about any bugs or what not, so I can’t help you there. I may use it myself, though modify it a bit to suit my needs. I’ll let you know, if I do
Oh, I found something. For the part in sidebar where the Home, Message etc links are, the links aren’t closed off (with the exception of the first two).
Thanks for finding that Nyssa. I can’t believe I missed something so simple. It’s hard to test for valid XHTML when the page you’re working on (MySpace profile) has 300+ errors.
I think there’s more potential with the div overlay. You can put anything on your profile you want, and it might actually look decent.
No problem. Those types of things are so easily missed! And validating isn’t exactly an option when it comes to MySpace.
Yeah, it has a lot of potential. Next, as you mentioned, it would be really awesome to see comments display. I might try to do it myself some time even though MySpace gives me nightmares.
Thank you for making my space on myspace look a little less hideous.
Nyssa, displaying comments is the next step. I’m not exactly sure the best way to do this with the div overlay though. It’s the biggest gripe I have with the theme right now.
Eric, thanks. I like the things you’ve added to your profile. It really makes it feel more like Facebook.
Heya, this is more of a question than a bug, but how can you get the myspace music player to show on the page. I can get it to play the song just by setting the auto play thing in preferances. But what should I add to show the player controls.
This is a fantastic theme. I’m going to use it forever!!!.
billy
Billythekid, I’m not exactly sure because we’re covering up all the default MySpace stuff. You might be able to use something like project playlist for a music player or some other type of music widget though. I’ll look a little more into it over the weekend.
That’s great. I don’t know why I didn’t just think of an external widget! d’oh!!
I have another question. You mention for each section, favourtie books etc, that you use a specific layout, but add teh links yourself to make them show up. Can you tell me, do I put the stuff in each section in your myspace edit, or in the “i’d like to meet”… if the former, can you show an example of how to link it to show up.
Thanks again.
billy
Billythekid, to create a link you do this:
Here’s a tutorial on creating links. You also put this in your “I’d like to meet” section.” Put it in the code where it says, “EDIT YOUR TEXT HERE.”
[...] Justin Tadlock’s theme does just that. If I were MySpace, I wouldn’t know whether to take it as an insult, or as a blessing in disguise, because all the people using that theme didn’t close shop and move to FaceBook. They’re still on MySpace. [...]
Hi,
Great job on the layout I love it but I can’t figure out how to edit in this part
Open “about-me.txt” and change the “/PATH/TO/IMAGE/” sections to the path where you uploaded the images.
- “content-bg.gif” is the background image for “.inside-container”
- “header.gif” is the background image for “.top-nav”
- “arrow.jpg” is the background image for “h2″
I can’t seem to figure it out although I have everything else done if you could help me out that would be great.
Thanks,
Shane
Shane, I’ve moved your comment to the correct post. I hope you find it.
I’m not exactly sure what you can’t figure out. Where did you upload your images? You need to put your image URL where it says “/PATH/TO/IMAGE/.”
Hey! Nice job on the imitation-facebook!
I’ve got most of it figured out except that I can’t figure out how to use ‘tabs’ in the myspace page. In your Demo page, for example, under “information” the “Activities” “Interests” etc are all clearly separated from their descriptions, while mine just appear as a block of text (myspace.com/kevinbays) How do you make it do that?
EagleScout, thanks. I’m not sure what you’re referring to when you say “tabs.” To separate your content from the descriptions, follow the instructions in the “readme.txt” file exactly. You can find this under the “Customization” area in the file.
…now there are bullets on the diesed of the text in the upper right part of the page… I’m trying o make it look as much like FB as possible so I added the “political views” “Interested in” etc to that part with this:
Kevin Bays
replaced Windows with Linux, and is loving it!
Networks: N. Michigan ‘11
Sex: Male
Interested In: Women
Relationship Status: In a Relationship with Trisha Brockman
Birthday: February 20, 1989
Hometown: Salem, OR
Political Views: Moderate
Religious Views: Christian - Lutheran
…on the left side of each line there is a round bullet
I cant figure out how to get rid of the bullets.
myspace.com/kevinbays
oh, oops, i dont know how to post code without making it show the result of the code… anyway, what I posted above is what I want it to look like, but on myspace there are bullets added…
EagleScout, the reason you have bullets is because you have list items (invalid XHTML list items at that). You need to write your markup like this:
You should also style your CSS appropriately.
I wouldn’t suggest messing too much with the code if you don’t know how to write XHTML and CSS though. You can find some great tutorials if you search Google.
Woot! it worked… I might have out a lot more coding in it than was necessary but here’s what it looks like:
(ul)
(li style= “list-style-type: none; “)(b)Kevin Bays(/b)(/li)
(li style= “list-style-type: none; “)replaced Windows with Linux, and is loving it!(/li)(h2)(/h2)
(li style= “list-style-type: none; “)Networks: N. Michigan ‘11(/li)
(li style= “list-style-type: none; “)Sex: Male(/li)
(li style= “list-style-type: none; “)Interested In: Women(/li)
(li style= “list-style-type: none; “)Relationship Status: In a Relationship with Trisha Brockman(/li)
(li style= “list-style-type: none; “)Birthday: February 20, 1989(/li)
(li style= “list-style-type: none; “)Hometown: Salem, OR(/li)
(li style= “list-style-type: none; “)Political Views: Moderate(/li)
(li style= “list-style-type: none; “)Religious Views: Christian - Lutheran(/li)
(/ul)
<’s are replaced with (’s so the code shows up correctly…
Thanks!
EagleScout, that was a lot more coding that was needed (like the code I gave you
), but I won’t go into details. Continue learning XHTML and CSS. You’ll learn all kinds of neat things you can do. I’m glad you got it working though.
I’m not sure why your comments keep getting put in moderation queue though. That’s weird.
Shane, I’ve moved your comment to the correct post. I hope you find it.
I’m not exactly sure what you can’t figure out. Where did you upload your images? You need to put your image URL where it says “/PATH/TO/IMAGE/.”
I’m not sure why it won’t work I’ve tried uploading them to different websites, putting the code in different ways, the only thing I can think of is I modified the code but I didn’t change anything just where things show up on the page.
Shane
I’m having issues with the wall… the Post button send you to a page that says “Invalid Friend ID”
I followed the directions in the readme, I’m not sure what I did wrong. can you post the code for “the wall” section from the demo page so I can compare?
I tried posting the code for my wall but it won’t work for some reason.
Thanks again!
Shane, you haven’t really told me anything different, so my answer won’t be any different. Where did you upload the images? Give me the URL to those images, so I can see what it is to better help you. It would also be great to have a link to your MySpace profile, so I can see what’s going on.
On another note, please don’t put your email address in the Website field when commenting. This is a security risk for you. That’s like saying, “Hey spammers, here’s my email address.”
EagleScout, the code for your wall and my profile wall is exactly the same. There are two spots that say “FRIEND-ID” that you need to change in the wall section. Your friend ID is “170854275.” You need to use that to replace “FRIEND-ID.”
It works!! wooot!
I had replaced the FRIEND-ID with the URL for my pagem not the ID itself.
my myspace looks almost exactly like my facebook page now lol
Thanks so much for the help!
I have another question (sorry lol)
the first is left/right “tab” thing I mentioned earlier (overlooked that in the readme, my bad). when you use the code from the readme multiple times in a row, it puts a 1 line space between each one, how do I make it so each row of left/right is right after the next?
as is, the code will make it look like:
left right
left right
left right
how do I make it just:
left right
left right
left right
I tried using the li code in multiple spots but it only seems to scramble the words… couldnt find anything in tutorial sites either.
Hi there again,
Thanks alot for your help. The links for the pictures are below.
http://img452.imageshack.us/my.php?image=contentbgmb7.gif CONTENT
http://img452.imageshack.us/my.php?image=arrowoq1.jpg ARROW
http://img452.imageshack.us/my.php?image=headerxh5.gif HEADER
http://Www.Myspace.com/ShaneL91
Thanks alot your help is very appreciated.
Shane
EagleScout, you’ll have to add this to your “About Me” (CSS file):
You might have to adjust the “2px” to get the look you want. Thanks for pointing this out too. It’ll definitely be updated in the next version of the theme.
Shane, those aren’t the URLs to the images. These are:
http://img452.imageshack.us/img452/6246/contentbgmb7.gif (content)
http://img452.imageshack.us/img452/5144/arrowoq1.jpg (arrow)
http://img452.imageshack.us/img452/7792/headerxh5.gif (header)
I’m not exactly sure how ImageShack’s image hosting works, but you should be able to use these URLs for your images. You should take notice of the “Direct” links on the URLs you listed.
Also, read the FAQ on their website to understand how their service works. Find “How do I use the different linking codes that ImageShack provides?”
[...] You can download the MySpace theme here http://justintadlock.com/archives/2007/11/26/make-your-myspace-profile -look-like-facebook-2 [...]
i am trying it out now hope i am sucessful
Hi Justing, I am having some problems with the layout.. it’s a real mess. Could you help me please!
user.viewprofile&friendid=8820636
Alexander
Follow all the directions in the “readme.txt” file first. That’s the first place to start. After that, if you’re still having trouble, give me the details on what’s wrong.
I cant get the wall to work I changed the friend ID but still does not work?
Armando
Do you have a URL that I can see? Also, make sure you change the Friend ID in both places for the wall to work correctly.
The layout looks great on my profile with Firefox
Photo 1
But with IE i have a problem with the left bar
Photo 2
I could see that you could solve the problem on your profile
Photo 3
How can i solve this problem too ?
I went to edit my profile today and myspace is all of a sudden switching <! to .. within the About Me part of the code, which throws off the formatting. So I get
..[if IE 6]>instead of. I can’t get it to leave the <! alone.Any way around this?
Robert
I don’t see why it would mess up at all. I’m running the exact same code on my profile, and it works perfectly. Do you have a URL that I can see? Have you made any changes to the theme?
Jeff
I’m not sure why this would happen. This is a way to leave comments in HTML. Most modern browsers do this. My layout is working perfectly fine today. The best I can tell you is to delete that code, but it might screw your layout up a bit in IE6.
I was thinking they might just be comments. I’ll try deleting them.
It is something in the way MySpace is saving my changes. I place the proper <! in the code and after it saves, I get ..
I haven’t made any significant changes to the code. I’ve been running the layout for a few months without issue. Myspace just started messing with it yesterday.
Hey Justin, thanks for the great layout. I’m having a small problem with it though and I’ not sure what I did wrong. I’m pretty sure I followed the directions exactly but I’m getting some of the old (and quite ugly) MySpace graphics showing up around the borders of my page.
Here’s what it looks like you can see the old “extended network” box showing from behind the new graphics.
http://www.fileden.com/files/2006/10/15/289422/untitled.JPG
Hi
I have just been installing your Facebook myspace theme 2
It appears that there is conflict between firefox and IE.
The top left section is appearing half way down the page in ie and the lines are not right
Shown here:
http://i32.tinypic.com/11sm7v4.jpg
have you seen this problem before and if so could you advice how to correct. Would be really greatful.
Thanks
Robert i am having the same problem as that.
I have tried copying Justins exact code but it still doesnt work..
Jeff
Yeah, MySpace just suddenly changes things without warning sometimes.
Kyle
The image you linked to doesn’t exist.
Andrew Leeming
If you could send me the URL to your profile and tell me anything that you changed in the code, it would help me see what the problem is. Which version of IE are you having a problem, IE7, IE6, or both?
Hey man, love your theme. I’m using it on my profile, I added a lot of stuff to it, like widgets. Check it out: http://myspace.com/jemberling
Hey, this layout looks pretty good. How can you change the colors a little bit!?
For some reason my profile picture shows up hidden behind the rest of my profile
Can anyone help me out here
!thanks!
for some reason the text on the right hand side of the page has double spaces inbetween. how do i fix this
myspace says that theres an error when i try to upload the content-bg.gif
Erm HELP i don’t know if this is the right place to ask this but i’ve looked everywhere else!!! My ‘Add Me’ link isn’t working, it just takes people back ‘home’ the code is correct and so is the friend id any ideas???
Everyone
I haven’t really played around with the theme in a while to make sure it’s still working. If you need support for it though, just stop by the support forums.
Hey, just to let you know, the link to “Add Me” no longer works. MySpace re-directs it to their homepage. I had to link to my site, which redirets it back to the page on MySpace. The downside to this is, it displays the anti-phishing warning when people click on the link, so some people may freak out when they see it.