D.I.Y: Spotify Embed On WordPress – How To Center Spotify In Your Post

D.I.YTheBLACKMedia14

wordpress-center-spotify-theblackmedia-2016

How To Center Your Spotify Embed

Sometimes simply clicking the ‘Align Center’ button atop the toolbar toggle doesn’t always work, especially for embeds like Spotify. If you’re a WordPress.com/org user, you’d know this. Sometimes you have to take an extra step to ensure better looking post. Who wants a post where aesthetically everything looks great, but your embed is throwing off the entire post? No One! So Here’s the solution.

Spotify Embed:

  1. Open The Spotify Artist, Song, or Album You Want To Embed In A New Tab
  2. Find This Drop Down Menu Three Dots Look For Copy Spotify URL
  3. Return To Your Post Find The Section Of Your Article That You Wish To Place The Embed
  4. Click In Your Post at The Top Right Corner TEXT
  5. Remember Where You Want Your Embed To Go, Make Sure In TEXT You’re On An Empty Line
  6. Copy & Paste or Type This In Where You Want Spotify To Go:                                                                                                [ spotify “YOUR URL GOES HERE” align= ‘center’ ] No spaces after [ opening, or ] closing.
  7. Return To Your Opened Spotify Tab Since You Know Where The Three Dots Are, Return There, And Copy Spotify URL of your Song, Artist, or Album
  8. Return To Your Post In TEXT And Replace “YOUR URL GOES HERE” with The Url From Spotify That You Copied
  9. Return To Visual To See What You’ve Just Done.
  10. Update Or Publish Your Post And Bam! Adjust Accordingly If Need Be.

The reason I say to do it in TEXT is because it insures your embed will be centered. Sometimes doing things like this in VISUAL, don’t always work, but if you’d like you can follow those same steps and just replace TEXT with VISUAL and it should work as well, but to be on the safe side, and if it doesn’t work in VISUAL simply use TEXT and it will work. If you have any questions leave a comment and i’ll answer you as quickly as possible. Thanks for reading, check out visual examples below!

Wrong:

Right:

 

© 2016 Tahir Register TheBLACKMedia On Twitter

14 comments Add yours

  1. Hey there! Quick question that’s totally off topic. Do you know how to make your site mobile friendly? My blog looks weird when viewing from my apple iphone. I’m trying to find a template or plugin that might be able to fix this problem. If you have any recommendations, please share. Cheers!

  2. Hey! There are settings in your WP Admin that makes it mobile friendly, however there aren’t any plug-ins that re-make them for mobile usage that’s something you have to create and possibly purchase. I hate the way my “mobile-friendly” version looks on my phone as well, but in order to have a great mobile website, you actually have to create a mobile website I hope this helps. But for the mobile friendly website wordpress allows visit: WP Admin, Appearance, Mobile, And Click Enable Mobile Theme.

  4. Hi, I tested it again, it does work. Im unsure of what you’re doing, you didn’t tell me, but it works.

  5. I copy and pasted “[ spotify align= ‘center’ ]” in text on a separate line and replaced the url with mine. But in visual, it doesnt show up as the embedded song but instead as the text coding. Does this only work for a specific version of wordpress or spotify?

  6. Hi, It will not show up in Visual, it will only show up once you’ve published. Also, you must not have spaces between [ spotify it should be [spotify also no spaces between center ] it should be center] I just used it today for an article: http://wp.me/p3C6AP-2J9 it worked like a charm for me.

  7. I did manage to figure it out. The copy and paste you provided has those spaces that were supposed to be removed and I was using the song link and not the URL:

    Error: [ spotiy URL align= ‘center’ ]
    Correct: [spotify URL align= 'center']

    I played around with your advice until i figured it out but I still must thank you for this because i still wouldnt have been able to figure it out if i didnt find this post!!

  8. …Again I used my method and it worked for me, I’m unsure of why it didn’t for you, but its sound technique.

  10. I’m able to center the content but the media box reads “Something went wrong, try again later.” When I’m just adding the link with the centering code its working.

  14. Okay I give up. Apparently I can’t use the greater than and less than symbols in a comment.

    Just use the standard pstyle text-align command prior to the Spotify link.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.