Instantly share code, notes, and snippets.
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 != "index"'> | |
<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='"en_US"' property='og:locale'/> <!-- en_US refers to US English language --> | |
<meta expr:content='"en_GB"' property='og:locale:alternate'/> <!-- en_GB refers to UK English language --> | |
<meta expr:content='"is-is"' 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 != "index"'> | |
<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/ | |
--> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This comment has been minimized.
The tag
og:description
is not fetched.You can test here: https://opengraphcheck.com/
on line
<meta expr:content='data:blog.metaDescription' itemprop='description'/>