Overcoming Thumbnails Share Post Facebook - Templates Boy

Halaman

    Social Items

Overcoming Blog Thumbnails That Do not Appear When Share to Facebook Addressing Facebook Thumbnail Share Post - More precisely Overcoming Thumbnails Blog Articles that Don't Appear When Share to Facebook.

This happens when the Facebook search engine fails to retrieve data from the page when blog articles are shared with Facebook and this is indeed quite disturbing because even if the dimensions of the image displayed are very small, they are only sized 90x90 pixels. Now that's why here I will provide a solution that is by adding a meta tag Facebook Open Graph on the blog.

To get started, please follow the steps-step below :

Note : Before editing the template it's good for you to backup it first. 

Open the Blogger Dashboard > Click Template > Edit HTML 

Search for tags <head> in the template and below it applies the meta tag below :

<!-- [ Social Media meta tag ] -->
<b:if cond='data:blog.url == data:blog.homepageUrl'> 
<b:if cond='data:blog.pageType == &quot;item&quot;'> 
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>  
<b:if cond='data:blog.url'>
<meta expr:content='data:blog.url' property='og:url'/>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<b:if cond='data:blog.pageName'>
<meta expr:content='data:blog.pageName' property='og:title'/>
</b:if></b:if></b:if></b:if>
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta content='article' property='og:type'/>
<b:else/>
<meta content='website' property='og:type'/>
</b:if>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<b:else/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postThumbnailUrl' property='og:image'/>
<b:else/>
<meta expr:content='data:blog.blogspotFaviconUrl' property='og:image'/>
</b:if></b:if>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
<b:else/>
<meta content='CONTENT OF ALTERNATIVE DESCRIPTION HERE' property='og:description'/>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta content='CODE-APPLICATION' property='fb:app_id'/>
<meta content='CODE-ADMIN' property='fb:admins'/>
<meta content='en_US' property='og:locale'/>
<meta content='en_GB' property='og:locale:alternate'/>
<meta content='id_ID' property='og:locale:alternate'/>

The next step, look for tags <body> and below it apply the script below :

<div id='fb-root'/>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'CODE-APPLICATION',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
(function() {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>

Save the template.

Information :
  • CONTENT OF ALTERNATIVE DESCRIPTION HERE : An alternative description will appear if the post is not given a description.
  • CODE-APPLICATION : Fill in your facebook application code
  • CODE-ADMIN : Fill in the profile code or code Facebook fan page.

Additional :
Make sure the uploaded image has a dimension of not less than 600 × 315 pixels, and if it's lacking then Facebook will resize the image to 90x90 pixels. It's good to use images with dimensions of 1200 × 630 pixels, 800 × 420 pixels, and 600 × 315 pixels.

After all is applied, please check one of the blog article url here :

Note: Previously you have logged in to the Facebook Developer, applying the application code and admin code on the blog


Then click fetch new scrape information

After doing the above, automatic information from your blog will be saved in the Facebook search system. Read more

That's the easy way Overcoming Thumbnails Share Post Facebook that Doesn't Appear on Facebook, if there is a deficiency, please add my friend via the comments column. thank you.


Overcoming Thumbnails Share Post Facebook

Overcoming Blog Thumbnails That Do not Appear When Share to Facebook Addressing Facebook Thumbnail Share Post - More precisely Overcoming Thumbnails Blog Articles that Don't Appear When Share to Facebook.

This happens when the Facebook search engine fails to retrieve data from the page when blog articles are shared with Facebook and this is indeed quite disturbing because even if the dimensions of the image displayed are very small, they are only sized 90x90 pixels. Now that's why here I will provide a solution that is by adding a meta tag Facebook Open Graph on the blog.

To get started, please follow the steps-step below :

Note : Before editing the template it's good for you to backup it first. 

Open the Blogger Dashboard > Click Template > Edit HTML 

Search for tags <head> in the template and below it applies the meta tag below :

<!-- [ Social Media meta tag ] -->
<b:if cond='data:blog.url == data:blog.homepageUrl'> 
<b:if cond='data:blog.pageType == &quot;item&quot;'> 
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>  
<b:if cond='data:blog.url'>
<meta expr:content='data:blog.url' property='og:url'/>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<b:if cond='data:blog.pageName'>
<meta expr:content='data:blog.pageName' property='og:title'/>
</b:if></b:if></b:if></b:if>
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta content='article' property='og:type'/>
<b:else/>
<meta content='website' property='og:type'/>
</b:if>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<b:else/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postThumbnailUrl' property='og:image'/>
<b:else/>
<meta expr:content='data:blog.blogspotFaviconUrl' property='og:image'/>
</b:if></b:if>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
<b:else/>
<meta content='CONTENT OF ALTERNATIVE DESCRIPTION HERE' property='og:description'/>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta content='CODE-APPLICATION' property='fb:app_id'/>
<meta content='CODE-ADMIN' property='fb:admins'/>
<meta content='en_US' property='og:locale'/>
<meta content='en_GB' property='og:locale:alternate'/>
<meta content='id_ID' property='og:locale:alternate'/>

The next step, look for tags <body> and below it apply the script below :

<div id='fb-root'/>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'CODE-APPLICATION',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
(function() {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>

Save the template.

Information :
  • CONTENT OF ALTERNATIVE DESCRIPTION HERE : An alternative description will appear if the post is not given a description.
  • CODE-APPLICATION : Fill in your facebook application code
  • CODE-ADMIN : Fill in the profile code or code Facebook fan page.

Additional :
Make sure the uploaded image has a dimension of not less than 600 × 315 pixels, and if it's lacking then Facebook will resize the image to 90x90 pixels. It's good to use images with dimensions of 1200 × 630 pixels, 800 × 420 pixels, and 600 × 315 pixels.

After all is applied, please check one of the blog article url here :

Note: Previously you have logged in to the Facebook Developer, applying the application code and admin code on the blog


Then click fetch new scrape information

After doing the above, automatic information from your blog will be saved in the Facebook search system. Read more

That's the easy way Overcoming Thumbnails Share Post Facebook that Doesn't Appear on Facebook, if there is a deficiency, please add my friend via the comments column. thank you.


Related Post

Disqus Codes
  • To write a bold letter please use or
  • To write a italic letter please use or
  • To write a underline letter please use
  • To write a strikethrought letter please use
  • To write HTML code, please use or
    or

    And use parse tool below to easy get the style.
Show Parser Box

strong em u strike
pre code pre code spoiler
embed

Subscribe Our Newsletter