fix blogger facebook thumbnail problem

How to Fix blogger Facebook thumbnail Problem

How to Fix blogger facebook thumbnail problem: Recently we received a mail from certainly one of our readers asking for we cover up tutorial on How to Fix blogger facebook thumbnail problem. Frankly speaking this topic is certainly one the ones tutorial I honestly could have shared long ago. thanks lots Milk for reminding us regarding this crucial topic.

PAY ATTENTION: How to link a Facebook Page to a Group in 2 easy steps

Blogger facebook thumbnail problem, an issue faced by virtually all bloggers on Blogspot. I also faced same issue in my early days of Blogging while on Blogspot.

Shared hosting starting at $9.88/yr!

And to be honest with you it’s not really funny at all as i was so devastated and frustrated back then. As on every occasion I publish an article on weblog after which share it throughout numerous social media e.g Facebook, Twitter, Google plus, LinkedIn, Stumbleupon and so on. It continually appear in this social media platforms without image, mean why the is an image added on the post.

Social media Open Graph was what I discovered was not active on my Blogspot theme and lots of Blogger theme include the default Blogger Theme, aside from those Premium Themes. Which was the reason why weblog Blog post keeps appearing on those social media e.g Facebook, Twitter, Google plus and LinkedIn without an image.

PAY ATTENTION: How to Find Most shared content on your Blog

Today we shall be learning How to Fix blogger facebook thumbnail problem by adding Open Graph to our Blogspot theme. so as for all our Articles to seem along side their images when shared on social media. Kindly follow the instructions below on How to Fix blogger facebook thumbnail problem.

How to Fix blogger facebook thumbnail problem

  1. Log in to your Dashboard
  2. Go to Layout –> Edit HTML
  3. Click any where inside the code area and to open a search box type CTRL+F from keyboard.
  4. Type or paste following code into the search box and hit enter.
  5. </head>
  6. Now Copy following code and paste it before the above line:

FaceBook OpenGraph Tags

<!– Facebook OpenGraph –>
<meta content=’article’ property=’og:type’/>
<meta expr:content=’data:blog.title’ property=’og:site_name’/>
<!– Title, URL & Description –>
<meta expr:content=’data:blog.pageName’ property=’og:title’/>
<meta expr:content=’data:blog.canonicalUrl’ property=’og:url’/>
<b:if cond=’data:blog.metaDescription’>
<meta expr:content=’data:blog.metaDescription’ name=’og:description’/>
<b:else/>
<meta expr:content=’data:post.snippet’ name=’og:description’/>
</b:if>
<!– Image –>
<b:if cond=’data:blog.postImageUrl’>
<meta expr:content=’data:blog.postImageUrl’ property=’og:image’/>
<meta property=’og:image:width’ content=’1200’/>
<meta property=’og:image:height’ content=’630’/>
</b:if>
<!– FB specific –>
<meta content=’YOUR_FACEBOOK_ID‘ property=’fb:admins’/>
<meta content=’YOUR_APP_ID‘ property=’fb:app_id’/>

Customization

Replace YOUR_FACEBOOK_ID  with your Facebook App ID Admin Name.

Replace YOUR_APP_ID with your Facebook App ID Code.

Make a Facebook app with these simple steps I have written below:

  1. Go to Developer tab and click on it.
  2. LINK ⇒ https://developers.facebook.com
  3. Then go to Website Option.
  4. Enter the app name which you have wanted.
  5. Click on Create Facebook App.
  6. After this you have to choose a category, you can choose App for Pages.
  7. Your AppId and Appkey is created automatically. The AppSecretKey is obfuscated. You can click on the show button to see your AppId and AppSecurityKey.

Credit Link: stackoverflow.com

 

Twitter Cards

<!– Twitter Card –>
<meta content=’summary_large_image’ name=’twitter:card’/>
<!– Title, URL & Description –>
<meta expr:content=’data:blog.pageName’ name=’twitter:title’/>
<meta expr:content=’data:blog.url’ name=’twitter:url’/>
<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>
<!– Image –>
<b:if cond=’ data:blog.postImageUrl’>
<meta expr:content=’ data:blog.postImageUrl’ name=’twitter:image’/>
<meta property=’twitter:image:width’ content=’280’/>
<meta property=’twitter:image:height’ content=’150’/>
</b:if>
<!– Twitter specific –>
<meta content=’SITE-TWITTER-HANDLE‘ name=’twitter:site’/>
<meta content=’YOUR-TWITTER-HANDLE‘ name=’twitter:creator’/>

Customization

Replace SITE-TWITTER-HANDLE with your link to your Twitter Handle.

Replace YOUR-TWITTER-HANDLE with your Twitter Username. example @thbloggerspy.

Google Publisher Markup 

<!– G+ Publisher –>
<!– Title & Description –>
<meta expr:content=’data:blog.pageName’ itemprop=’name’/>
<b:if cond=’data:blog.metaDescription’>
<meta expr:content=’data:blog.metaDescription’ itemprop=’description’/>
<b:else/>
<meta expr:content=’data:post.snippet’ itemprop=’description’/>
</b:if>
<!– Image –>
<b:if cond=’data:blog.postImageUrl’>
<meta expr:content=’data:blog.postImageUrl’ itemprop=’image’/>
</b:if>
<!– G+ specific –>
<link href=’G+ BUSINESS PAGE URL’ rel=’publisher’/>

Customization

Replace G+ BUSINESS PAGE URL with your Google Plus link.

PAY ATTENTION:

FROM THE AUTHOR: All on How to Fix blogger facebook thumbnail problem: Sense loose to have interaction with us and Ask your questions via the comment field below. If this text  enables you, just spend second percentage with FB Twitter and comply with us on Facebook and Twitter

Paul Nwachukwu

A Certified Tech Blogger, Writer, web designer and a digital marketer who helps other bloggers through BloggerSpy. Find this Blog Helpful, socialize with Us!!!

2 comments

  • You can’t really tell how glad I am discovering this awesome guide.

    I must confess, av been a victim of social thumbnail errors for quite some time now, gladly I can fix it with this help

    Thanks once again Paul for another helpful blogger guide.

Advertisement

Purchase a domain for just $0.48, only with Namecheap

Categories