I Already Don't
Like You.

the tumblr of an art director trying to be too clever with his blog title.
He regrets nothing

#web design

Building Websites with Hotmail?

clientsfromhell:

Client: Hello, I asked one of my friends and he said that you built our site using Hotmail.

Me: Excuse me! What do you mean?

Client: You used Hotmail to build my site.

Me: We can’t do that, nobody can. Hotmail is owned by Microsoft and they offer free email accounts. It’s not a development environment.

Client: My friend is a computer expert and he is sure.

Me: Is your friend next to you?

Client: Yes

Me: Can you put him through?

Friend: You made my friend’s site with Hotmail. Admit it.

Me: Sir, we can’t do that. What made you think it was created using Hotmail.

Friend: All the pages in the site end with .html.

Tumblr boilerplate template for Facebook Open Graph & Twitter Metadata

So, as promised, thought I’d go through the trouble of taking what I learned utilizing Facebook & Twitter’s open graph/metadata for my tumblr theme and create a generic boilerplate for everyone to use in their Tumblr themes. Now let’s be clear, this is a fork off two resources: an awesome answer to a stackoverflow question about Tumblr & Open Graph, and the Twitter developer’s blog.

I say fork because I made some modifications and updates to take full advantage of Tumblr’s current theme documentation while also filling in some gaps. For instance, utilizing the {Thumbnail}{VideoThumbnailURL} for link & video posts, respectively. This way, when your visitor shares a url to one of those post types, you’ll see a preview thumbnail instead of a random image or your Tumblr avatar. Anyway, here it is below fully commented. Use it as a starting point for your <head> tag and work from there. Download the raw here. I also included some stuff for windows tiles too. Remove or modify as needed. Thanks!

    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="author" content="Your Name"><!-- Remember to replace with your name or the author's name -->
        
          
        {block:IndexPage}
          <!-- Your title & description Meta tags for the index pages of your tumblr, including Tumblr theme tags for search and tag pages-->
        <title>{block:TagPage}&quot;{PlaintextTag}&quot; - {/block:TagPage}{block:SearchPage}{lang:Search results for SearchQuery} - {/block:SearchPage}{Title}</title>
        <meta name="Description" content="{MetaDescription}" />
        {/block:IndexPage}

        {block:PermalinkPage}
          <!-- Your title & description Meta tags for the permalink (individual post) pages of your tumblr, The {PostSummary} tag is effective because it will still insert an indvividual post title if available or if your post type doesn't have a title, it will pull copy from your post's caption or description-->
        <title>{block:PostSummary}{PlaintextPostSummary} - {/block:PostSummary}{Title}</title>
        <meta name="Description" content="{MetaDescription}" />
        {/block:PermalinkPage}
        
        {block:PermalinkPage}
        {block:Posts}
        {block:Date}
            <!-- Canonical h5bp.com/docs/head-Tips/#urls -->
            <link rel="canonical" href="{Permalink}">
            <!-- Shortlink h5bp.com/docs/head-Tips/#urls -->
            <link rel="shortlink" href="{ShortURL}">
        {/block:Date}
        {/block:Posts}
        {/block:PermalinkPage}
              
              
              

        <!-- FACEBOOK OPEN GRAPH -->
        <!-- >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>-->
        
        <meta property="og:site_name" content="{Title}"/>
        {block:IndexPage}
                <meta property="og:title" content="{block:TagPage}&quot;{PlaintextTag}&quot; - {/block:TagPage}{block:SearchPage}{lang:Search results for SearchQuery} - {/block:SearchPage}{Title}"/>
                <meta property="og:url" content="{blogURL}{block:TagPage}tagged/{URLSafeTag}{/block:TagPage}"/>
                <meta property="og:type" content="blog" />
                <meta property="og:description" content="{MetaDescription} {block:TagPage}{PlaintextDescription}{/block:TagPage}"/>
                <meta property="og:image" content="{PortraitURL-128}"/><!-- forewarning: Facebook will consider this image to be too small, I would recommend creating a higher res image (at least 200x200 according to them, but go much bigger) and linking to that through your own hosting or using tumblr static theme uploader -->
        {/block:IndexPage}        
        
        
        
        {block:PermalinkPage}
            <meta property="og:url" content="{Permalink}"/>
            <meta property="og:type" content="article"/>
        
                {block:Posts}
                    {block:Text}
                        {block:Title}<meta property="og:title" content="{PlaintextTitle}"/>{/block:Title}
                        <meta property="og:description" content="{PlaintextBody}"/>
                        <meta property="og:image" content="{PortraitURL-128}"/>
                    {/block:Text}
        
                    {block:Photo}
                        <meta property="og:image" content="{PhotoURL-HighRes}"/>
                        {block:Caption}<meta property="og:description" content="{PlaintextCaption}"/>{/block:Caption}
                    {/block:Photo}
        
                    {block:Photoset}
                        {block:Photos}
                        <meta property="og:image" content="{PhotoURL-HighRes}"/>
                        {/block:Photos}
                        {block:Caption}<meta property="og:description" content="{PlaintextCaption}"/>{/block:Caption}
                    {/block:Photoset}
        
                    {block:Quote}
                        <meta property="og:title" content="{PlaintextQuote}"/>
                        <meta property="og:description" content="{PlaintextSource}"/>
                        <meta property="og:image" content="{PortraitURL-128}"/>
                    {/block:Quote}
        
                    {block:Link}
                        <meta property="og:title" content="{PlaintextName}"/>
                        <meta property="og:description" content="{PlaintextDescription}"/>
                        {block:Thumbnail}<meta property="og:image" content="{Thumbnail}"/>{/block:Thumbnail}
                    {/block:Link}
        
                    {block:Chat}
                        <meta property="og:title" content="{PlaintextTitle}"/>
                        <meta property="og:description" content="{block:Lines}{block:Label}{Label}: {/block:Label}{Line} &bull; {/block:Lines}"/>
                        <meta property="og:image" content="{PortraitURL-128}"/>
                    {/block:Chat}
        
                    {block:Audio}
                        <meta property="og:title" content="{block:Artist}{Artist} - {/block:Artist}{block:TrackName}{TrackName}{/block:TrackName}"/>
                        <meta property="og:description" content="{PlaintextCaption}"/>
                        {block:AlbumArt}<meta property="og:image" content="{AlbumArtURL}"/>{/block:AlbumArt}
                    {/block:Audio}
        
                    {block:Video}
                        {block:Caption}<meta property="og:description" content="{PlaintextCaption}"/>{/block:Caption}
                        {block:VideoThumbnail}<meta property="og:image" content="{VideoThumbnailURL}"/>{/block:VideoThumbnail}
                    {/block:Video}
        
                    {block:Answer}
                        <meta property="og:title" content="{PlaintextQuestion}"/>
                        <meta property="og:description" content="{PlaintextAnswer}"/>
                        <meta property="og:image" content="{PortraitURL-128}"/>
                    {/block:Answer}
        
                {/block:Posts}
        
        {/block:PermalinkPage}
        
        
        
        
        <!-- TWITTER META DATA -->
        <!-- Don't worry, no need to validate for approval on twitter's developer site, Tumblr is whitelisted >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>-->
        
{block:PermalinkPage}
 
<meta name="twitter:url" content="{Permalink}"/>
<meta name="twitter:site" content="@username"><!-- replace with your twitter username. include the '@' symbol too -->
 
    {block:Posts}
        {block:Text}
            <meta name="twitter:card" content="summary">
            {block:Title}<meta name="twitter:title" content="{PlaintextTitle}"/>{/block:Title}
            <meta name="twitter:description" content="{PlaintextBody}"/>
            <meta name="twitter:image" content="{PortraitURL-128}"/>
        {/block:Text}
 
        {block:Photo}
            <meta name="twitter:card" content="photo">
            <meta name="twitter:image" content="{PhotoURL-500}"/>
            {block:Caption}<meta name="twitter:description" content="{PlaintextCaption}"/>{/block:Caption}
        {/block:Photo}
 
        {block:Photoset}
            <meta name="twitter:card" content="photo">
            {block:Photos}<meta name="twitter:image" content="{PhotoURL-500}"/>{/block:Photos}
            {block:Caption}<meta name="twitter:description" content="{PlaintextCaption}"/>{/block:Caption}
        {/block:Photoset}
 
        {block:Quote}
            <meta name="twitter:card" content="summary">
            <meta name="twitter:title" content="{PlaintextQuote}"/>
            <meta name="twitter:description" content="{PlaintextSource}"/>
            <meta name="twitter:image" content="{PortraitURL-128}"/>
        {/block:Quote}
 
        {block:Link}
            <meta name="twitter:card" content="summary">
            <meta name="twitter:title" content="{PlaintextName}"/>
            <meta name="twitter:description" content="{PlaintextDescription}"/>
            {block:Thumbnail}<meta name="twitter:image" content="{Thumbnail}"/>{/block:Thumbnail}
        {/block:Link}
 
        {block:Chat}
            <meta name="twitter:card" content="summary">
            <meta name="twitter:title" content="{PlaintextTitle}"/>
            <meta name="twitter:description" content="{block:Lines}{block:Label}{Label}: {/block:Label}{Line} &bull; {/block:Lines}"/>
            <meta name="twitter:image" content="{PortraitURL-128}"/>
        {/block:Chat}
 
        {block:Audio}
            <meta name="twitter:card" content="summary">
            <meta name="twitter:title" content="{block:Artist}{Artist} - {/block:Artist}{block:TrackName}{TrackName}{/block:TrackName}"/>
            <meta name="twitter:description" content="{PlaintextCaption}"/>
            {block:AlbumArt}<meta name="twitter:image" content="{AlbumArtURL}"/>{/block:AlbumArt}
        {/block:Audio}
 
        {block:Video}
            <meta name="twitter:card" content="summary">
            <meta name="twitter:title" content="{PlaintextTitle}"/>
            {block:Caption}<meta name="twitter:description" content="{PlaintextCaption}"/>{/block:Caption}
            {block:VideoThumbnail}<meta name="twitter:image" content="{VideoThumbnailURL}"/>{/block:VideoThumbnail}
        {/block:Video}
 
        {block:Answer}
            <meta name="twitter:card" content="summary">
            <meta name="twitter:title" content="{PlaintextQuestion}"/>
            <meta name="twitter:description" content="{PlaintextAnswer}"/>
            <meta name="twitter:image" content="{PortraitURL-128}"/>
        {/block:Answer}
 
    {/block:Posts}
 
{/block:PermalinkPage}        
        
  
        
        
        <meta name="viewport" content="width=device-width, initial-scale=1">
          
        <link rel="shortcut icon" href="{Favicon}">
          <!-- Tumblr theme tag for favicon, use "{Favicon}" (which will default to your tumblr avatar) or url address of where your favicon.ico is located -->
        <link type="text/plain" rel="author" href="http://yoururl.domain/humans.txt" />
          <!-- address of your humans.txt file DELETE the line above if you don't have one -->  
        <link rel="alternate" type="application/rss+xml" title="RSS" href="{RSS}" />
          <!-- Tumblr theme tag for your RSS feed, use "{RSS}" -->
               
        <link rel="apple-touch-icon-precomposed" href="{PortraitURL-128}">
          <!-- Apple touch icon, the icon for when you save bookmarks on your ipad or iphone" -->
          
        <!-- Win8 tiles -->
        <meta name="msapplication-TileImage" content="{PortraitURL-128}"><!-- Tumblr Theme tag, defaults to your avatar image -->
        <meta name="msapplication-TileColor" content="#ffba00"/><!-- Pick a hex color, this one's yellow -->
        <meta name="application-name" content="{PlaintextTitle}" /><!-- Tumblr Theme tag, defaults to your Tumblr Blog Title -->
        
        <!-- IE11 tiles -->
        <meta name="msapplication-square70x70logo" content="{PortraitURL-128}"/>
        <meta name="msapplication-square150x150logo" content="{PortraitURL-128}"/>

              
</head>

See the Pen Twitter, Open Graph, Meta Data Head Boilerplate Template for Tumblr by Alex Pierce (@alexpierce) on CodePen.

Version 5 of my tumblr theme/design is now live!!!

ialreadydontlikeyou.tumblr.com

https://31.media.tumblr.com/d15018fbb7880fe539ee569539f5e926/tumblr_inline_n7lazupPtb1qb38bc.png

Version 5 of my tumblr redesign is here guys! It’s literally been a year in the making (off and on of course, got a little sidetracked). I’ve put a lot of thought into not only the aesthetics & visual design, but also the overall user experience as well. I’ll try keep it short, but here are the bulleted change notes:

  • Sticky navigation
  • added ”about me”,”social” (stalk), and tags modals
  • designed the header to change/shorten on post, tag & index pages that aren’t the home page, so content is higher up
  • BIG ONE- make extensive use of Facebook open graph and twitter meta data to make sure when you share a link, content is being share properly across the board. This means crafted/customized meta data for each individual post type. So if you share a video or link post type, your followers on Facebook and Twitter will see thumbnails of the content now. I’ll make a resource later to share this snippet of markup for all of you to include in your tumblr themes guys.
  • Included customized “jump to page” interface at the bottom of pages. Just enter the page number you wanna jump back to, and voila, you’re there
  • utilizing a customized google search engine for more accurate site results for my specific tumblr
  • better optimized & kerned typography (Normalize-Opentype.css
  • better access to sharing/liking/reblogging. No more hidden menus for that
  • Utilizing full width, responsive photosets with stylehatch’s photogrid plugin. (there was also some learning there too, because it didn’t work straight out of the box. still working through some little bugs here & there as well)
  • Oh yea, and it’s still highly responsive. Even went through the trouble of making sure any audio embeds (spotify,soundcloud) and vine/instagram posts display properly. Instagram video embeds are a tricky bastard.

Now I know the question some of you who’ve been following my progress have next: When will I be making a modified version of this theme available? Answer: I honestly have no damn idea. It took a lot just to get this done. And there’s a lot of custom stuff I would have to generalize or redesign for a more broad audience. Let me get back to you on that. It’s gonna be a minute.

I’m not quite done yet. I soft launched the new theme like last wednesday night, and have been squashing bugs since then as they come to my attention. I’ll likely be adding features or modifying UI as I discover improvements that could be had as well.

Anyway, guess this post was longer than I expected.Thanks for taking the time to give a glance. And thanks to all my followers for, well, following me. And hey, you guys dig it, show some love. Got a question? Ask.

profile photo of Alex Pierce

I'm a designer/art director/geek that likes to make things on (and off) the internet. I'm black, live in the DFW metroplex, work at an ad agency, and drink alone in the dark on week nights. While being black, I write this blog as a creative outlet.

My work has been featured multiple times by Tumblr, published in NET Magazine, Communication Arts, Adweek, The Webbys, HOW Design, W3 Awards, Web Designer Magazine, Under Consideration, Awwwards, Web Design Ledger, Web Designer Depot, Designworklife, Speckyboy, my mom's Facebook Timeline, and a variety of other publications.

I am currently unmarried, live alone, have no pets, and believe in the Oxford comma. I like eating tacos as well. Pants optional.