Fix: Wrong Description and Image on sharing posts to Facebook

When you share a post on Facebook, it will display a thumbnail picked from the post page along with a short description of the post. But in many cases Facebook fails to  identify the correct image and description that it should use. This leads to irrelevant images and description coming up in Facebook when you or your readers share the post. This is totally annoying, and I had got many queries regarding this on my Facebook page and via email. So for those who are trying to figure a way out of this, here is the solution.

Which image and Description does Facebook pick from your Post Page

Facebook regularly scrapes your page and caches the data to your servers. They look for meta data information(Opengraph tags and others) in your post page. The meta data can explicitly specify the image and the description to use when the page is shared.If Facebook doesn’t find any meta data, then their Algorithms will fetch some description and image from your Page. Facebook shows a wrong description or image when their Algorithms are not able to fetch the correct image and description from your Post Page.
We will solve both of these issues using two different techniques.

1. Fixing the Wrong Image Problem.

You might have noticed that comment avatars, and other  irrelevant images come up when you share the post on Facebook . The solution to this is to specify the image in the page meta data. We will be using open graph tags for the same.
Go to Template > Edit HTML and just above

</head>

Paste the following code snippet.

<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<b:else/>
<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpTE54ODHF7fm_7_XPFYQCKdELZksFJO5fJE3bpUwj2yVnq-Fh0g9b9U_t4jOuAcB9fiHgUMA2eCWrCjxOpZC4ddzidg1kjrF0Iy9wUnGJBJ3bPPZaaHOem7K2hMx_1MZi2Adrm8wT8RE/s72-c/default.png' property='og:image'/>
</b:if>

You can alter the image URL in the above snippet. That image will be used when no post thumbnail is present.
Now when you share posts to Facebook, a proper post thumbnail will be displayed. If the post doesn’t have images, then the fall back image which we have specified in the snippet will be used. If you don’t see results right away , then it is because of the caching done by Facebook. You can force Facebook to update the cache by debugging the post URL using this tool.

2. Fixing the Wrong Description Problem

Wrong description comes up when Facebook is not able to recognize the content and structure of your page. This also can be rectified by using meta data, but since blogger doesn’t provide a post snippet tag outside the blog post widget, it is impossible to do that using valid HTML. So we will have to go for other alternatives. If meta data is not found, then Facebook normally uses the First paragraph in your page(which is big enough). So it will be a good idea to get used to the paragraph HTML tag <p>content</p>. The Blogger Post Editor doesn’t use paragraph tags but uses lots of line break tags instead. So if you are using the Blogger Post Editor, then you will have to go into the HTML mode of the post Editor, and make sure that you use paragraph tags(I do agree that it is a difficult thing to do). If you can’t take that headache, then you can use a third party Publishing Tool like the Windows Live Writer which has superior Editing Controls. After doing this, you will again have to force a Cache refresh using the Facebook Debug tool and your post should show a proper description on Facebook.

3. Scripts coming up in the Facebook Description

I had seen a couple of cases where JavaScript snippets come up in the Facebook Description. Facebook somehow mistook the script for content, and this is probably because of the way you have added the script. Go to your template and see if there are any special characters in front of that particular script tag. If you find one, then remove it, and force a Facebook Cache Refresh.
If you found this tutorial useful, then do share it with your Facebook Friends who use Blogger :-). If you have any questions do ask here in the comments or the forum or on our Facebook Page.

Read More...

Get Plus One Count in your Blogger Dashboard

Blogger has been devising new methods for tightly integrating it’s new Social Network with Blogger. They have now released yet another Google Plus integration feature. If you are using the New Dashboard, you might have already noticed the change.
Blogger has added a Plus one Counter(not the regular count button that you see on numerous web pages) to the Blogger dashboard, which gives the author some information about how the post is being received on the Social Network . It displays a count of how many times the post has been shared on G+ . If you click on the count it will show a list of users who have +1 ed your post. These Counts are available only in the New Interface. So if you haven’t made the switch yet, it might be a good time to make a move.



This gives you a quick idea of the Social reaction to your Blog Posts.You can easily find out which posts of yours are most popular on Google +.

Read More...

Custom 404 Error Pages for Blogger

The 404 or Not Found error message is a HTTP standard response code indicating that the client was able to communicate with the server, but the server could not find what was requested." In simple words the page that will be displayed when the actual page is not found is called a 404 Error Page. Till now Blogger’s error page was a plain old design with more of orange in it and was not customizable. Now Blogger Error pages use the same template . This would help template designers in making up custom 404 Pages.This tutorial will help you in setting up a Custom 404 page for your Blog. By Default, your Blogger Error page will display this error message

You can Change this message to something else from the Blogger Settings.
The option is there at Settings > Search preferences > Custom Page not Found

If you want more than just a message, then we will have to fill up this text area with some HTML Code.. This is how my Error page Looks like

Instructions

1. Login to your Blogger account and go to the Template page and proceed to Edit HTML
2. Click on the Expand Widget Templates Check box so that your entire template comes up
3. Now Look for </head> and immediately before that paste this snippet

   <b:if cond='data:blog.pageType == "error_page"'>
   <style type="text/css">
   .status-msg-wrap {
       font-size: 100%;
       margin: none;
       position: static;
       width: 100%;
   }
   .status-msg-border {
       display:none
   }
   .status-msg-body {
       padding: none;
       position: static;
       text-align: inherit;
       width: 100%;
       z-index: auto;
   }
   .status-msg-wrap a {
       padding: none;
       text-decoration: inherit;
   }
   </style>
   </b:if>

   This code snippet will reset the default styling given to the Blogger Message Wrapper.
4. Save the template and go to a page on your blog which doesn’t exist.
5. You should be able to see the change now. The grey background and the border around the 404 status message would no longer be there.
6. Now Let’s see how we can improve the look and feel of our 404 page. I would suggest you to use inline CSS styles to improve the look and Feel of your 404 message.Here is a sample HTML template which you can paste into the text box at Search preferences > Custom Page not Found.

   <h3>Your requested page was not found</h3>
   <p>Sorry, we cannot find the page that you are looking for. It might have been removed, had its name changed, or is temporarily unavailable.<br/>
   Please check that the Web site address is spelled correctly.</p>
   <b>Other things to try:</b><br/>
   <ul>
   <li>Go to our <a href="/">home page</a>, and use the menus or links to navigate to a specific post.</li>
   <li>
   <form method="get" action="/search">
   <table width="100%">
   <tr>
   <td><input type="text" style="width:95%;padding:2px;" value="Search this blog.." onfocus="if (this.value == &quot;Search this blog..&quot;) {this.value = &quot;&quot;}" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Search this blog...&quot;;}" name="q"></td>
   <td><input type="button" Value="Search"></td>
   </tr>
   </table>
   </form>
   </li>
   </ul>

7. It will give you something similar to my 404 page.
8. If you are creative, you can add more stuff to the 404 pages. You can find a list of really creative 404 pages on HongKiat for inspiration

Detecting an Error Page

Blogger has introduced a new page type called "error_page" and you can detect it using b:if conditional tags.
The following condition checks if a page is an error page or not.

<b:if cond='data:blog.pageType == "error_page"'>
This is an Error Page
</b:if>

Changing the Error Page Title

By default the title of the Blogger Error Page is your Blog Title. If you want to change it to something else, you can Edit your template and change

<title><data:blog.pageTitle/></title>

to

<b:if cond='data:blog.pageType == "error_page"'>
<title>Page Not Found</title>
<b:else/>
<title><data:blog.pageTitle/></title>
</b:if>

If you are using my Title Tag Hack or derivatives of that available on the internet, then you will have to change

<!-- Start www.bloggerplugins.org: Changing the Blogger Title Tag -->
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<title><data:blog.pageTitle/></title>
<b:else/>
<title><data:blog.pageName/><b:if cond='data:blog.pageName'> - </b:if><data:blog.title/></title>
</b:if>
<!-- End www.bloggerplugins.org: Changing the Blogger Title Tag –>

to

<!-- Start www.bloggerplugins.org: Changing the Blogger Title Tag -->
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<title><data:blog.pageTitle/></title>
<b:else/>
<b:if cond='data:blog.pageType == "error_page"'>
<title>Page Not Found</title>
<b:else/>
<title><data:blog.pageName/><b:if cond='data:blog.pageName'> - </b:if><data:blog.title/></title>
</b:if>
</b:if>
<!-- End www.bloggerplugins.org: Changing the Blogger Title Tag –>

Read More...

Custom Permalinks for Blogger Posts

A permalink (or permanent link) is a URL that points to a specific blog entry after it has passed from the front page to the archives.Blogger generates this permanent link based on your post title(If the title is in English). For example if your post title is “Hello World”, the blog post’s permalink would be something like http://yourblog.blogspot.com/2012/06/hello-world.html   Till date Blogger never allowed the user to control what the permalink should be but it rather assigned a permalink on it’s own. This has now changed and Blogger now allows YOU to decide what the permalink of your new post should be.
This feature is currently available in Blogger’s Draft Version. So if you would like to check it out, head straight over to http://draft.blogger.com and create a new post. In the post options you will see a permalink option.

If you select the “Automatic URL” (the default option), then Blogger will generate the permalink on it’s own. If you want to specify a custom URL, opt for the “Custom URL” option and you can enter your custom post permalink over there. It will allow you to enter alphabets, hyphens and underscores. It will just ignore underscores. So I just used a combination of hyphens and alphabets to create my post permalink


The Final Permalink will be something like
http://yourblogaddress/yyyy/mm/the custom URL that you specified
In my case it came to something like
http://myblog.blogspot.com/yyyy/mm/custom-permanent-link.html
Blogger doesn’t allow you to modify the Permalinks of old posts but you can make use of this new feature on your new posts  There seems to be no limit to the length of this Custom URL at the moment but Blogger might impose some length limit in future.

Read More...

Add Floating Facebook Like Box Widget To Blogger !

1. Go to Design > Page Elements.
2. Click Add A Gadget.
3. In Add A Gadget window, select the HTML/Javascript .
4. Paste the following code inside it,

 -----------------------------------------------------------------------------------

<script type="text/javascript">
 /*<![CDATA[*/
 jQuery(document).ready(function() {jQuery(".abtlikebox").hover(function()

 {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this)

.stop().animate({right: "-250"}, "medium");}, 500);});
 /*]]>*/
 </script>
 <style type="text/css">
 .abtlikebox{background: url("http://4.bp.blogspot.com/

-mMtB2ANqowQ/T6es-PuSR2I/AAAAAAAAAjM/LDamrUnMJJc/s320/fb1-right.png")

 no-repeat scroll left center transparent !important; float: right;height:

 270px;padding: 0 5px 0 46px;width: 245px;z-index:  99999;position:fixed;

right:-250px;top:20%;}.abtlikebox div{ padding: 0; margin-right:-8px;

 border:4px solid  #3b5998; background:#fafafa;}
.abtlikebox span{bottom: 4px;font: 8px "lucida grande",tahoma,verdana,

arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
 .abtlikebox span a{color: gray;text-decoration:none;}
 .abtlikebox span a:hover{text-decoration:underline;}
}
</style>
 <div class="abtlikebox" style="">
     <div>
     <iframe src="http://www.facebook.com/plugins/

likebox.php?href=http%3A%2F%2Ffacebook.com%2Fallbloggingtips

 &width=245&colorscheme=light&show_faces=true&border_color=

white&connections=9&stream=false&header=false&height=270"

 scrolling="no" frameborder="0" scrolling="no" style="border: white; overflow:

 hidden; height: 270px; width: 245px;background:#fafafa;"></iframe><span>Widget by

 :<a href="http://www.AllBloggingTips.com"> All Blogging Tips</a></span>
     </div>
 </div>

----------------------------------------------------------------------------------

5. Click on Save button and done !
Note:-
Replace allbloggingtips With Your Facebook Page URL or User name.

Read More...

Animated Social Sharing Widget with Cool Hover!

 You must have heard about Shareaholic, The Leader in the creation of stylish sharing scripts. After Their Great Success of The Sexy Bookmarks, recently they just have created another awesome design which is known as SassyBookmarks ( Social Sharing Widget ). Here in this post i’ll let you know how to implement SassyBookmarks or Social Sharing Widget on your wordpress and blogger site!

 

 Adding to WordPress!

• Go To Your dashboard, Then Click On Appearance and then Navigate To Editor.
• Now on The Right Side you can a list of template files, move your mouse to footer.php and then click on that
• As Soon the page loads completely, Press CTRL+F and Find </body>
•  Now be careful and paste the below code just about it !
• Hit on Update File, Now Visit Your WordPress Blog ! You can see it located on The Bottom Left

------------------------------------------------------------------------------------------------------------

Adding to Blogger/Blogspot!

• Go to Blogger Dashboard > Template
• Take a backup of your template.
• Now find for below code in your template </body>
• Add below piece of code just above/before of above code

------------------------------------------------------------------------------------------------------------

<!-- Start Social Sharing Widget Sassy Bookmarks HTML (allbloggingtips.com)-->
<div class="shr_ss shr_publisher">

</div>
<!-- End Shareaholic Sassy Bookmarks HTML -->
<!-- Start Shareaholic Sassy Bookmarks settings -->
<script type="text/javascript">
  var SHRSS_Settings = {"shr_ss":{"src":"//dtym7iokkjlif.cloudfront.net/media/

downloads/sassybookmark","link":"","service":"5,7,2,313,38,201,88,74","apikey":"

b87f5899d80a5edce8b5e55f58542ef0f","localize":true,"shortener":"bitly","shortener_key":"

","designer_toolTips":true,"tip_bg_color":"black","tip_text_color":"white","viewport":true,"twitter_template"

:"${title} - ${short_link} via @Shareaholic"}};
  </script>
 <!-- End Shareaholic Sassy Bookmarks settings -->
<!-- Start Shareaholic Sassy Bookmarks script -->
<script type="text/javascript">
       (function() {
            var sb = document.createElement("script"); sb.type = "text/javascript";sb.async = true;
            sb.src = ("https:" == document.location.protocol ? "https://dtym7iokkjlif.cloudfront.net" : "http://cdn.shareaholic.com") + "/media/js/jquery.shareaholic-publishers-ss.min.js";
            var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(sb, s);
        })();
        </script>

<!-- End Shareaholic Sassy Bookmarks script -->

--------------------------------------------------------------------------------------------------------------

 Endlines.
Hope You’ve find this implementation interesting. This Social Sharing Widget Code Snippet is a the property of Shareholic so please don’t remove the copyrights ! Peace and Blessing pals

Read More...

Lock Your Folders !

You can lock and unlock your folder with this simple trick !
Procedure :1. Make a folder on the desktop and name it as "folder"
2. Now, open notepad and write ren folder folder.{21EC2020-3AEA-1069-A2DD-08002B30309D} and now (Notepad Menu) File>save as.
3. In the 'save as' name it as lock.bat and click save ! (Save it on Desktop)
4. Now, again open notepad again and write ren folder.{21EC2020-3AEA-1069-A2DD-08002B30309D} folder and now (Notepad Menu) File>save as.
5. In the 'save as' name it as key.bat and click save ! (Save it on Desktop)
6. Now, double click lock.bat to lock the folder and now if you open your folder, control panel will open up !
7. Now, double click key.bat to open the folder and now if you open your folder, you can access your data inside the folder again !
8. Lock your folder and hide the key.bat somewhere else on your hard disk !
9. Whenever you want to open your folder just paste the key.bat on desktop and open your folder using it !

Simple !

Read More...