We have learned how to implement openGraph automatically and Twitter Card manually, so now we will make it dynamically. We already know about <b:include data='blog' name='all-head-content'/> inclusion. Inside is include Basic Meta Tag and openGraph tag automaticaly into our blog, but not with the Twitter Card.
In this post we want to make custom all-head-content inclusion so it will include twitter card. If you want to see a demo, just share this post to twitter or facebook and you will see what is all about.
This is the custom code for all-head-content inclusion:
<b:defaultmarkups>
<b:defaultmarkup type='Common'>
<b:includable id='MetaCustom'>
<meta expr:content='"text/html; charset=" + data:blog.encoding' http-equiv='Content-Type'/>
<link expr:href='data:blog.blogspotFaviconUrl' rel='icon' type='image/x-icon'/>
<link expr:href='data:view.url.canonical' rel='canonical'/>
<data:blog.feedLinks/>
<data:blog.meTag/>
<b:tag cond='data:blog.googleProfileUrl' expr:href='data:blog.googleProfileUrl' name='link' rel='publisher'/>
<b:tag cond='data:view.featuredImage' expr:href='data:view.featuredImage' name='link' rel='image_src'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' name='description'/>
</b:if>
<b:include name='SocialMediaMetaData'/>
<!--[if IE]><script> (function() { var html5 = ("abbr,article,aside,audio,canvas,datalist,details," + "figure,footer,header,hgroup,mark,menu,meter,nav,output," + "progress,section,time,video").split(','); for (var i = 0; i < html5.length; i++) { document.createElement(html5[i]); } try { document.execCommand('BackgroundImageCache', false, true); } catch(e) {} })(); </script>
<![endif]-->
</b:includable>
<b:includable id='SocialMediaMetaData'>
<meta expr:content='data:blog.url.canonical' property='og:url'/>
<meta expr:content='data:view.title.escaped' property='og:title'/>
<b:if cond='data:view.isPost'>
<meta expr:content='data:view.description.escaped' property='og:description'/>
</b:if>
<b:if cond='data:view.featuredImage'>
<meta expr:content='resizeImage(data:view.featuredImage, 1200, "1200:630")' property='og:image'/>
<b:elseif cond='data:widgets'/>
<b:loop values='data:widgets.Blog.first.posts where (p => p.featuredImage) map (p => p.featuredImage)' var='imageUrl'>
<meta expr:content='resizeImage(data:imageUrl, 1200, "1200:630")' property='og:image'/>
</b:loop>
<b:elseif cond='data:blog.postImageUrl'/>
<meta expr:content='resizeImage(data:blog.postImageUrl, 1200, "1200:630")' property='og:image'/>
</b:if>
<meta content='article' property='og:type'/>
<meta content='@twitter_username' name='twitter:creator'/>
<meta content='@twitter_username' name='twitter:site'/>
<meta expr:content='data:blog.homepageUrl' name='twitter:domain'/>
<b:if cond='data:view.isPost'>
<meta content='summary_large_image' name='twitter:card'/>
<b:else/>
<meta content='summary' name='twitter:card'/>
</b:if>
</b:includable>
</b:defaultmarkup>
</b:defaultmarkups>
To use above code, Copy the source code and replace @twitter_username with yours, paste before tag </body> inside your template html code. Look between <head> and </head> tag, if <b:include data='blog' name='all-head-content'/> is present, replace with <b:include name='MetaCustom'/> if is not there, put before </head> so our code in html editor will look like
CALL FOR INCLUSION
<b:include name='MetaCustom'/>
</head>
NEW INCLUSION
<b:defaultmarkups>
<b:defaultmarkup type='Common'>
<b:includable id='MetaCustom'>
<!-- Other Code -->
</b:includable>
</b:defaultmarkup>
</b:defaultmarkups>
</body>
Explanation
Our code is using defaultmarkups tag with type 'Common' to create new inclusion named MetaCustom it include all content from inclusion all-head-content managed by blogger server, basic meta tag, openGraph plus Twitter Card. Because we created newly inclusion more complete than default, so we dont need it anymore.
We must call the inclusion to make it work, its like we call a function from javascript, that's why we add <b:include name='MetaCustom'/> into our head part.
Blogger , Tips and Tricks
