Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Because it is notoriously difficult, here is how you integrate social media tags for Facebook, Twitter, Google+ and Pinterest into Google Blogger template. Tested and validated by myself on blogger.com in August 2015. This is based on https://gist.github.com/MilanAryal/92997b311580c6e96dd0 but with important fixes and different integration strat…
<!-- add the following code in the head and body tags -->
<head prefix='og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#'>
<body itemscope='itemscope' itemtype='http://schema.org/Blog' prefix='og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#'>
<!--
I've found easiest to simply include the rest of the tags in the body of the webpage.
The browser will automatically interpret the should-be header tags correctly.
The only problem, and unavoidable when using a blogger template is that the Pintrest markup
will not currently work with their Rich Pin validation tool.
-->
<!-- Locate the <b:widget type='Blog'> and place all the code below (until the STOP comment) into the first <b:includable> -->
<meta property='og:site_name' content='YOUR SITE NAME' />
<!-- Image to use for Facebook shares -->
<b:if cond='data:post.firstImageUrl'>
<link expr:href='data:blog.firstImageUrl' rel='image_src'/>
<b:else/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<link expr:href='data:blog.postImageThumbnailUrl' rel='image_src'/>
<b:else/>
<link expr:href='data:blog.postImageUrl' rel='image_src'/>
</b:if>
</b:if>
<!-- Open Graph Meta Tags -->
<b:if cond='data:blog.pageType != &quot;index&quot;'>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<meta content='article' property='og:type'/>
<b:else/>
<meta expr:content='data:blog.title' property='og:title'/>
<meta content='blog' property='og:type'/>
</b:if>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
<b:else/>
<meta expr:content='data:post.snippet' property='og:description'/>
</b:if>
<b:if cond='data:post.firstImageUrl'>
<meta expr:content='data:blog.firstImageUrl' property='og:image'/>
<b:else/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<b:else/>
<meta content='data:blog.postImageUrl' property='og:image'/>
</b:if>
</b:if>
<!-- End Open Graph Meta Tags -->
<!-- Facebook Meta Tags -->
<meta content='YOUR_FACEBOOK_ID' property='fb:admins'/> <!-- find your facebook if from graph.facebook.com/your_username -->
<meta expr:content='&quot;en_US&quot;' property='og:locale'/> <!-- en_US refers to US English language -->
<meta expr:content='&quot;en_GB&quot;' property='og:locale:alternate'/> <!-- en_GB refers to UK English language -->
<meta expr:content='&quot;is-is&quot;' property='og:locale:alternate'/> <!-- Icelandic language -->
<!-- Google Authorship and Publisher Markup -->
<link href='YOUR_GOOGLE+_PROFILE_URL' rel='author'/>
<link href='YOUR_GOOGLE+_PROFILE_URL' rel='publisher'/>
<!-- Schema.org Markup Tags for Google+ -->
<b:if cond='data:blog.pageType != &quot;index&quot;'>
<meta expr:content='data:blog.pageName' itemprop='name'/>
<meta expr:content='data:blog.canonicalUrl' itemprop='url'/>
<b:else/>
<meta expr:content='data:blog.title' itemprop='name'/>
<meta expr:content='data:blog.homepageUrl' itemprop='url'/>
</b:if>
<!-- Description text for Google+ -->
<meta expr:content='data:blog.metaDescription' itemprop='description'/>
<!-- Image for Google+ -->
<b:if cond='data:post.firstImageUrl'>
<meta expr:content='data:blog.firstImageUrl' itemprop='image'/>
<b:else/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' itemprop='image'/>
<b:else/>
<meta expr:content='data:blog.postImageUrl' itemprop='image'/>
</b:if>
</b:if>
<!-- End Schema.org Markup Tags for Google+ -->
<!-- Twitter Card Tags -->
<meta content='@YOUR_TWITTER_USERNAME' name='twitter:site'/>
<meta content='@YOUR_TWITTER_USERNAME' name='twitter:creator'/>
<b:if cond='data:post.firstImageUrl'>
<meta content='summary_large_image' name='twitter:card'/> <!-- summary_large_image or any other your card types -->
<b:if cond='data:post.firstImageUrl'>
<meta expr:content='data:blog.firstImageUrl' name='twitter:image:src'/>
<b:else/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' name='twitter:image:src'/>
<b:else/>
<meta expr:content='data:blog.postImageUrl' name='twitter:image:src'/>
</b:if>
</b:if>
<b:else/>
<meta content='summary' name='twitter:card'/>
<b:if cond='data:post.firstImageUrl'>
<meta expr:content='data:blog.firstImageUrl' name='twitter:image:src'/>
<b:else/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' name='twitter:image:src'/>
<b:else/>
<meta expr:content='data:blog.postImageUrl' name='twitter:image:src'/>
</b:if>
</b:if>
</b:if>
<b:if cond='data:blog.pageName'>
<meta expr:content='data:blog.pageName' name='twitter:title'/>
<b:else/>
<meta expr:content='data:blog.title' name='twitter:title'/>
</b:if>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
<b:else/>
<meta expr:content='data:post.snippet' name='twitter:description'/>
</b:if>
<meta expr:content='data:blog.canonicalUrl' name='twitter:url'/>
<!-- /Twitter Card Tags -->
<!--
STOP INSERTING INTO <b:widget type='body'>
//////////////////////////////////////////
-->
<!--
The following Code must go inside the <b:includable id='post' var='post'> tag.
Simply paste them inside the first <div> you find there
-->
<!-- Search keywords -->
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<meta expr:content='data:label.name' property='keywords'/>
<meta expr:content='data:label.name' property='article:tag'/> <!-- Pintrest -->
</b:loop>
<b:else/>
<meta content='YOUR_DEFAULT_BLOG_KEYWORDS' name='keywords'/>
</b:if>
<!-- Pinterest Rich Pins Tags -->
<meta expr:content='data:post.timestampISO8601' property='article:published_time'/>
<meta content='Technology' property='article:section'/>
<meta content='YOUR_NAME' property='article:author'/>
<!-- If you don't want your site to have Rich Pins, place the following inside your <head>
<meta name="pinterest-rich-pin" content="false" />
-->
<!-- /Pinterest Rich Pins Tags -->
<!--
After adding this code to your template. Make sure you preview it before saving to
ensure that there are no errors in the integration.
Then use the following validators:
Google+: https://developers.google.com/structured-data/testing-tool/
Facebook: https://developers.facebook.com/tools/debug/
Twitter: https://cards-dev.twitter.com/validator
Pinterest: https://developers.pinterest.com/tools/rich-pins/validator/
-->
@jfoclpf

This comment has been minimized.

Copy link

jfoclpf commented Sep 9, 2018

The tag og:description is not fetched.
You can test here: https://opengraphcheck.com/

on line

<meta expr:content='data:blog.metaDescription' itemprop='description'/>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.