Showing posts with label Web Design. Show all posts
Showing posts with label Web Design. Show all posts

Tuesday, April 5, 2016

Facebook Showing Wrong Thumbnail Image While Sharing Blogger Posts : Error Fixed

      Comment  
As a Blogger, everyone would like to promote his/her posts and largely shared the idea on Facebook. Ever if you have tried sometime you might have observed that there is wrong thumbnail or no thumbnail shown by facebook of our blog post . This is among the most popular issue through Facebook from a few years back nonetheless it will not be resolved till yet. However Facebook isn't much clever to pickup the correct image from your post. You should make the post easy to understand by adding a little piece of chunk code within your blogger template to express to the Facebook robot which usually show image in the Round thumbnail at your wall or groups. So here we are discussing about such a popular topic to fix this error to get proper image of our blog post on facebook.

How to Fix this Issue:

To get accurate thumbnail of our posts by facebook we have to add a little piece of code in our blog templates which tells the facebook that what is our post's main image. Follow steps below:


SEE ALSO: How to Change Links Color in Blogger ?


SHARE Facebook twitter wrong thumbnail image sharing blogger posts error fixing
sharing contenton facebook


  • Go to Template >> Edit >>Html:
  • Find for <head> tag In template:
  • Past the below given code just after the <head> tag

 <meta content='article' property='og:type'/>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta expr:content='data:blog.pageName' property='og:title'/>
<b:if cond='data:blog.metaDescription != &quot;&quot;'>
<meta expr:content='data:blog.metaDescription' name='description'/>
</b:if>
Now click on save button: You are almost Done !

Quick Tips to Remember:

Follow these quick tips while you are sharing your blog posts on facebook:

  1. I recommended you to use the PNG format for main image.
  2. Use JPG image format for the rest of all ordinary image inside the post except the main picture.
  3. Always try to add intro image inside the post.
  4. Share your Post on facebook immediately after publishing.
  5. If you change your blogger template make sure to add the above coding again. 

Add Stylish Vertical Floating Sharing Buttons to Blogger

      Comment  
Sharing is the best method to increase blog traffic so after publishing our blog posts we share them to social media and in return we get a lot of traffic. When our visitors landed on our blog's page and like our post then they thought to say thanks to the author so they do comment on the post but there is one another way by which visitors can say thanks to us i.e. sharing. By this method visitors can share the post to their favourite social media and we get a lot of visitors and pageviews. So, here we are discussing about a great floating sharing widget for blogger which floats vertically with the page. This widget contains all major social media on which your visitors can easily share or like your posts in a click. This widget contains Facebook like and share, google +1, Pinterest Pin buttons. So if you like this widget and wants to add it to your blog just follow the easy steps below.

SEE ALSO: Optimize Image for SEO by Adding Alt and Title Attributes

New Stylish Vertical Floating Share Button

How to add the new floating share buttons to blogger

 Log in to your Blogger account and go to Template > Edit HTML
 Search for <html , leave a space and add xmlns:fb=”http://ogp.me/ns/fb#”  just after it. The resulting code should lok like this:

<html xmlns:fb=”http://ogp.me/ns/fb#”


  •  If this is already there, you don’t need to do it again.



 Search for <data:post.body/> If you have more than one of it in your template, search for <div class='post-footer-line post-footer-line-1'/>


  •  And just below that paste the following code:


<b:if cond=’data:blog.pageType == &quot;item&quot;’>
<!–Start Floating Share Buttons with Pinterest–>
<style type=’text/css’>
#dc-float {position:fixed; bottom:15%; right:10px; float:left;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border:1px solid #BBBBBB;
background-color:#FFFFFF;
-webkit-box-shadow: #B3B3B3 5px 5px 5px;
-moz-box-shadow: #B3B3B3 5px 5px 5px;
box-shadow: #B3B3B3 5px 5px 5px;
padding:0 0 2px 0;z-index:10;}
#dc-float .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}
.fb_share_count_top {width:48px !important;}
.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}
</style>
<div id=’dc-float’ title=’Share with your friends’>
<div class=’sbutton’ id=’rt’>
<a class=’twitter-share-button’ data-count=’vertical’ href=’http://twitter.com/share’>Tweet</a><script src=’http://platform.twitter.com/widgets.js’ type=’text/javascript’/>
</div>
<div class=’sbutton’ id=’su’>
<script src=’http://www.stumbleupon.com/hostedbadge.php?s=5′/>
</div>
<div class=’sbutton’ id=’digg’ style=’margin-left:3px;width:48px’>
&lt;div id=&quot;fb-root&quot;&gt;&lt;/div&gt;
&lt;script&gt;(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = &quot;//connect.facebook.net/en_US/all.js#xfbml=1&amp;appId=167544263382192&quot;;
  fjs.parentNode.insertBefore(js, fjs);
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));&lt;/script&gt;
<div class=’fb-like’ data-layout=’box_count’ data-send=’false’ data-show-faces=’false’ data-width=’48′/>
</div>
<div class=’sbutton’ id=’gplusone’>
<script src=’https://apis.google.com/js/plusone.js’ type=’text/javascript’/>
<g:plusone size=’tall’/>
</div>
<div class=’sbutton’ id=’gb’>
<a class=’pin-it-button’ count-layout=’vertical’ expr:href=’&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url’>Pin It</a>
<a href=’javascript:void(run_pinmarklet())’ style=’margin-left:-46px; width:43px; height:20px; display:inline-block;’/>
<script src=’http://assets.pinterest.com/js/pinit.js’ type=’text/javascript’/>
<script type=’text/javascript’>
function run_pinmarklet() {
var e=document.createElement(&#39;script&#39;);
e.setAttribute(&#39;type&#39;,&#39;text/javascript&#39;);
e.setAttribute(&#39;charset&#39;,&#39;UTF-8&#39;);
e.setAttribute(&#39;src&#39;,&#39;http://assets.pinterest.com/js/pinmarklet.js?r=&#39; + Math.random()*99999999);
document.body.appendChild(e);
}
</script>
</div>
<div class=’fb_button_share’>
&lt;div id=&quot;fb-root&quot;&gt;&lt;/div&gt;
&lt;script&gt;(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = &quot;//connect.facebook.net/en_US/all.js#xfbml=1&amp;appId=112973755438933&quot;; // appId must be valid
fjs.parentNode.insertBefore(js, fjs);
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));&lt;/script&gt;
&lt;fb:share-button type=&quot;box_count&quot;&gt;
&lt;/fb:share-button&gt;
</div><br/>
<!–End Floating Share Buttons with Pinterest–>
</b:if>

 Hit the Save Template button and view your blog.

To make the share butons float to the left instead of right, search for this code:

dc-float {position:fixed; bottom:15%; right:10px; float:left;

Replace with this:


dc-float {position:fixed; bottom:15%; left:10px; float:left;

Thats it.