Make Your MySpace Profile Look Like Facebook

Get the new version (2.0):

Version 1.2.1

  • Fixed the text-alignment problem that arose for some reason.

Version 1.2

  • Fixed the background color. It is now white again.
  • Fixed the hover issue on the contact table. There’s no longer that ugly blue background when you hover over the links.

I’ve been working on this idea in my head for some time. I wasn’t really sure how I was going to make my MySpace profile look like Facebook. However, I did remember reading Mike Davidson’s Hacking A More Tasteful MySpace a while back. So, I snatched that code to work with.

So, now we’re going to make our MySpace profiles look like our Facebook profiles. Why would anyone want to do that? Because Facebook just looks a lot more user-friendly. And, it is more user-friendly. Even though there’s little we can do to make the MySpace interface work better, we can make it look better. Since I’m so happy with Facebook’s service, I’ve decided to dedicate this theme to them.

I won’t bother going through an entire tutorial on how to tweak this thing. You can find that at Hacking A More Tasteful MySpace. I would simply be saying the same thing Mike said.

I’ve obviously made a few adjustments to line things up a little differently, and I’ve put together some new images for the theme. I’m still tweaking the layout to work better with Firefox. However, if you fix it before I do, then I would appreciate it if you send the code to me (I’m sure there’ll be a link back if you do).

Feel free to modify the layout and images in any way you want. Just “unzip” the contents of the file onto your computer. Tweak the included “.psd” files in Photoshop. Upload the images to your webserver. Then, chage the image file paths in the included “facebook-mimic.css” file, and put it in the “About Me” section under “Edit Profile” in your MySpace control panel.

If you have any questions or suggestions, leave them here, and I’ll try to get back to you or implement them as quickly as I can.

If you just want to trash me for making my profile look like Facebook, then feel free to do that here also.

47 Responses to “Make Your MySpace Profile Look Like Facebook”

  1. WAZ GD

  2. I LOVE your facebook mimic design for myspace. I got the idea to set up my myspace to look like facebook, but then I found out it’s already been done.

    Only one thing is keeping me from using your facebook mimic theme; the fact that it doesn’t work in firefox. What’s the chance of you getting around to making it work in firefox? I want to use facebook mimic, but I can’t do it unless it works with firefox.

  3. Yeah, I’ve been meaning to fix the Firefox issue. I’ve just been a bit busy. Maybe I’ll have time to get around to it this weekend.

  4. [...] Like Facebook’s looks, but you can’t shake your MySpace addiction? This layout makes MySpace quite similar to Facebook. Be sure to check the explanation on how the author did it here. [...]

  5. [...] Like Facebook’s looks, but you can’t shake your MySpace addiction? This layout makes MySpace quite similar to Facebook. Be sure to check the explanation on how the author did it here. [...]

  6. [...] Like Facebook’s looks, but you can’t shake your MySpace addiction? This layout makes MySpace quite similar to Facebook. Be sure to check the explanation on how the author did it here. [...]

  7. [...] Like Facebook’s looks, but you can’t shake your MySpace addiction? This layout makes MySpace quite similar to Facebook. Be sure to check the explanation on how the author did it here. [...]

  8. [...] LAYOUT | DEMO | WEBSITE Rate it:  Loading [...]

  9. [...] à abandonner MySpace. Ce layout fait ressembler votre MySpace à Facebook. L’auteur donne des explications (en anglais) si cela vous donne envie [...]

  10. [...] Justin Tadlock » Make Your MySpace Profile Look Like Facebook (tags: css mods myspace) [...]

  11. [...] Like Facebook’s looks, but you can’t shake your MySpace addiction? This layout makes MySpace quite similar to Facebook. Be sure to check the explanation on how the author did it here. [...]

  12. Good job, way to fight the MySpace addiction!

  13. The layout looks fantastic. Thanks for making it available too!

  14. b boy ink 2007
    leedscpt07

  15. [...] LAYOUT | DEMO | WEBSITE Rating: (1 votes)  Loading [...]

  16. [...] If you really don’t want to leave MySpace but love the clean lines of Facebook, there are templates to customize MySpace to look just like [...]

  17. [...] vous ne souhaitez pas quitter MySpace mais appréciez les lignes propres de Facebook, il existe des templates à personnaliser pour MySpace, dans l’esprit [...]

  18. [...] If you really don’t want to leave MySpace but love the clean lines of Facebook, there are templates to customize MySpace to look just like [...]

  19. Nice work Justin - although it kinda makes me wanna just go and sign up for facebook!

    We’d love to host this in our free myspace layouts category on our site, holler if your interested…

  20. Thanks, Cleanupmyspace. I don’t mind you hosting the layout, but I would prefer it if you kept my download link because I like to see how many times something is downloaded. Of course, a link back to this blog post would be great for people that wanted feedback or help.

  21. [...] Make Your MySpace Profile Look Like Facebook [...]

  22. [...] If you really don’t want to leave MySpace but love the clean lines of Facebook, there are templates to customize MySpace to look just like [...]

  23. [...] Make Your MySpace Profile Look Like Facebook [...]

  24. Wow, this is awesome post on Make Your MySpace Profile Look Like Facebook.

  25. Hey, this is a great idea and your myspace looks great. However, when I try implementing the code, all I get is a big blue box over what should me my myspace page.

    Any help would be appreciated. Thanks.

  26. Stefan, I’m going to need more information. I can’t see your profile because it is not public (you’ll have to add me as a friend).

    Did you take all the steps listed in the “read-me.txt” file? Did you upload the images to your own server? Did you add the contents of the CSS file into your About Me section? What browsers are you viewing your page from?

  27. hey i like this idea but i cant figure out how to get the contact me pictures to work..any chance you can explain it more?

  28. Steven, don’t double-comment (I’ve deleted the second comment). That’s the fastest way to not get help. I can see that you “need help” from your first comment. And for the sake of my sanity, use proper capitalization and punctuation.

    I’m not sure what’s going on with your profile because it’s set to private. You’ll have to befriend me or set it to public for me to look at it.

    Also, did you read the “read-me.txt” file included with your download? It explains how to get the images working. If you did read it, did you upload the images to your own server? Did you change the image paths in the “facebook-mimic.css” file?

  29. hey what up i guess im one of the many people who want thier page to look clean and i guess your the one to talk to i sent you a messege on myspace. Good work man this is the reason why my brother dont use myspace b/c of the look but i soon might change his mind if i can get his to look like yours… but good job man.

  30. Mark, I guess you didn’t read the comment I left Steven about the abuse of the English language. :)
    I also don’t respond to theme-support questions on MySpace; I simply delete them because MySpace is “a place for friends.” It’s not a place where I work. If you have any questions, please ask them here.

    I don’t mean to sound too negative though. Please, ask any questions you might have, and I’ll help the best I can.

  31. I think this layout is great, and that it will appeal to people who want a standard look across both their MySpace and Facebook profiles! Thanks for the tip.

    I’ll link to this tip on my site shortly.

  32. Thanks. There is a new version out though. It’s the Facebook theme for MySpace 2.

  33. 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

  34. I’m looking into customizing our Music Label “Myspace” page. I am wondering does this Myspace tutorial apply to Music/Artist pages as well?

    Thanks in advance for your time and help.

    - Boosweet.

  35. hey I see the site is kinda old, but I would still appreciate the links working, I thought of this idea and then decided to see if someone else had before me, so anyway I can still get this to work any links?

  36. **so is there any way I could still get this to work**

  37. Jared D
    The site is not “kind of old.” If you take a few minutes to look around and see what’s happening here, then you’d notice I had some upgrade problems and am in the process of fixing them.

    With that said, this is about the lowest thing on my priority list right now.

    Please don’t double post the same question.

  38. there seems to be a huge white psace underneath my profile. wondeirng why.

    also is there anyway of having comment come under where it has the wall? that would surely make it more facebook like.

  39. Andrew (Comment #33),

    I’m having the same issue (with the top-left section appearing half-way down the page) and have not yet found the cause, though admittedly, I’m no programmer.

    If you figure it out, please post it here.

    C

  40. for some reason the text on the right hand side of the page has double spaces inbetween. how do i fix this

  41. i SO wish i could figure this out!! but i’m just not that advanced!! great layout though!!

  42. I’ve fixed the problem of the links. Basicly you don’t get the FRIEND-ID in your URL (ex. myspace.com/NOT_YOUR_FRIEND-ID). Instead what I did was find the FRIEND-ID by (take off the facebook mimic layout by deleting the like to meet section first) looking at the the number for a link location like “View Pics”, which you will see is something like:

    http://viewmorepics.myspace.com/index.cfm?fuseaction=user.viewAlbums&friendID=SOME_NUMBER

    SOME_NUMBER is your unique number that you use for FRIEND-ID. Then it works :D

    Also, @Kal. I think I know what you mean by double spaces for the text on the right. I was trying to make a contact me and a networks, brithday, etc. thing mimicking facebook where it is single spaced.

    What you do is add this code in the about me section:

    div.left {
    width:120px;
    clear:both;
    }

    and then for text that you want single spaced instead you use the tag instead of the tag like this:

    Political Views:

    Liberal

    —-
    Hope this helps. I have a lot of free time on my hands. :D
    Oh, and hit me up on my blog: snyderblogs.com

  43. Update: It didn’t show the code right, its suppose to look like this:

    Political Views:

    Liberal

    (Without the unnecessary *’s)

  44. Well, that didn’t work… if you need it I put it on my blog: here

  45. love it is is so cool doo

  46. Hi, I found your blog on this new directory of WordPress Blogs at blackhatbootcamp.com/listofwordpressblogs. I dont know how your blog came up, must have been a typo, i duno. Anyways, I just clicked it and here I am. Your blog looks good. Have a nice day. James.

  47. Good.. I like facebook (:

Leave a Reply