I Already Don't
Like You.

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

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.

Nice things to whisper when hugging someone

yogurtville:

-you smell different when you’re awake
-please help me (then smile as if nothing happened)
-soon
-you have lovely skin, I can’t wait to wear it
-your hair tastes like strawberries
-tonight….you.
-he knows, don’t go home.
-I always knew you would die in my arms
-every time I poop I think of you
-no one will ever believe you
-yessssssssssssss
-I killed mufasa
-I bet you didn’t feel me lick your ear
-mother told me it would be like this

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.