Fix blogger facebook thumbnail problem

0
Subscribe to our newsletter

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 alongside with their images when shared on social media. Kindly follow the instructions below on How to Fix blogger facebook thumbnail problem.

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 the keyboard.
  4. Type or paste the following code into the search box and hit enter.
  5. </head>
  6. Now Copy the 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: how to fix blogger facebook thumbnail problem, Love the Post. Kindly Spread the Good news by sharing with friends and also leaving your feedback below. Remember you can also follow us on our social media handles for More updates and also Subscribe to our email Newsletter. Join the conversation on Facebook and Twitter

80%
Awesome
  • Design
Subscribe to our newsletter
Subscribe to our newsletter
Sign up here to get the latest news, updates and special offers delivered directly to your inbox.
You can unsubscribe at any time

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. AcceptRead More

>