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.
jfoclpf commentedSep 9, 2018
•
edited
The tag
og:descriptionis not fetched.You can test here: https://opengraphcheck.com/
on line
<meta expr:content='data:blog.metaDescription' itemprop='description'/>