web analytics

Stephen Pickering

Category: Code

  • How to Fix a Spotify Embed That’s Too Tall or Stretches Too Far Down the Page

    I just released a new single last week, and when I created a new post about it, which included a Spotify embed of the single, even though the embed only contained two songs it stretched all the way down the page. When I google searched for a solution, I came to this page: Spotify embeds have large blank space at bottom on WordPress.org, but their solution, a bit of CSS code added to your Appearance >> Themes >> Customize >> Additional CSS didn’t work for me. As of this writing I’m using the TwentyTwenty WordPress theme.

    At first I thought I found the answer simply by adding px after the height number the Spotify gives you for the code. In their code it’s just the number 180 in parentheses. I added a px at the end of that number, and that seemed to solve it, at least as an individual post, but on the main page of the blog at the domain level (as of this writing it is my most recent post), the problem still persisted.

    Somewhere along the line of my search, I found someone had wrapped the <iframe> tag that Spotify gives you in a <figure> tag which I had never heard of, but that didn’t help either. What finally worked (at least it seems so at this moment, is keeping that px addition (to the height not the width) and then wrapping the whole thing in a div tag. Here’s what the final code looks like:

    <div><figure><iframe src="https://open.spotify.com/embed/album/5r5zBUsuM7tsJtDC3x0AE9" width="300" height="180px" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe></figure></div>

    You can see I went ahead and left the figure tag in there. I don’t know if that makes any difference or not. But the above code seems to have solved my problem as of this writing at least in WordPress and the particular TwentyTwenty theme I’m using at the moment. Just replace your own Spotify code within this nest and add px at the end of the height value and see if it works for you.

  • How To Fix Access Denied Error On Twitter Follow Button

    If you haven’t installed the new code, it’s here: https://twitter.com/about/resources/buttons#follow

    Even if you have already done that, you may still get that error message instead of the button. What you need to do is clear your browser cache, and it will show up fine.

    On Chrome on Mac you click the Chrome menu button and select “Clear Browsing Data”, another menus will pop up, “Empty the Cache” should already be checked, but if not check that one.

  • How to Link Text in HTML

    OK, I know this is dumb. But mainly this post is for me. When I write things down, and especially in a public facing place like a blog, it helps me remember. Which goes to one of my tenants:

    A blog can simply be a repository of things you want to remember, and if that thing isn’t something private, it might possibly be also helpful to someone else.

    It’s kind of like that teaching is really a way for the teacher to remind themselves, or ditto for writers, although writers often have the extra benefit of learning while they write. One of the best arguments for writing is that (for folks who are “readers and writers” as opposed to “Talkers and Listeners”) writing is the best educational instrument there is. Writing is the best, most efficient way to learn.

    Anyway on to the subject.

    How to Link Text in HTML

    You simply wrap your text with the “a” tag in this code:

    <a href=”insert your link here“>this would be your text</a>

    Simple as that, but today I had to “hot” link some text, and I wrote href=”” and forgot the “a” tag. Had to “Google” the code for the billionth time. Sick of that. Felt like I needed to remember simple code that I use all the time without having to Google it all the time. So you see linking is essentially an “a” tag with that little “href=” bit added in there also you must make sure your link is in quotation marks.

    So here’s for helping me learn writing and blog. Maybe one day I can learn the code to make this blog look prettier and sparkle!

    Have any questions? Who knows, if I can figure out your problem, maybe I’ll learn something.