“Do You Like This Story” Sharing Box Widget

Social networkingis a strong way to share your stories with the world with just a single click. Social media has given the webmasters an opportunity to add their official buttons or boxes in their blog or websites through which the readers or visitors share the stories with their friends and online community after reading it on certain blog or website. You might have seen different social media buttons, boxes which are in different shapes and also different in appearance. Today in this tutorial we are going to share with you a sharing widget i.e. “DO YOU LIKE THIS STORY” box, which you can easily add within your Blogger Blog and facilitate your readers to like or share your content without leaving your blog or website.

DEMO

Benefits Of Using This Sharing Box Widget:

The benefit of using this sharing box widget under the BLOG POST TITLES is that area always catches the attention of the visitors and readers and there are a lot of chances that your story must share and circulate more than normal on social media. It’s the most important place in whole article body. So it’s better to place this SHARING BOX under the POST TITLE other than any place in your blog post.

How To Add “Do You Like This Story” Sharing Box Widget” In Blogger?

Let’s learn how to add this “Sharing Box Widget” in Blogger blog, follow the steps below:

1. Log in to Blogger Dashboard.

2. Go to Template > Backup.(Click Here To See How)

3. Now click “Edit HTML.”

4. Inside the “HTML EDITOR”, Press CTRL+F and search for <data:post.body/>tag.

Note:- You will find the above tag at 2 places.

5. Now copy and paste the following code just above the  <data:post.body/> tag, where you find this tag i.e. at 2 places.

<b:if cond='data:blog.pageType == "item"'>
<div style=" height:80px;  background:rgb(232, 240, 249); border: 1px solid rgb(171, 210, 233); padding: 10px; margin: 10px 0pt 10p 0px;">
<p style="color: rgb(59, 89, 152); margin: 0pt 0pt 5px; font: bold 1.3em helvetica,arial,verdana;">Do You Like This Story?</p>
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like send="true" width="450" show_faces="false"></fb:like>
<a class='twitter-follow-button'  href='http://twitter.com/mytutorialscafe' rel='nofollow'></a>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'></script>
</div>
</b:if>

6. Click “SAVE TEMPLATE”.

That’s all set, visit any of your blog posts to see the“Sharing Box” hanging just perfectly under the blog posts title.

Note:-

1. Change “mytutorialscafe” to your own Twitter Username.

2. You can change the text "Do You Like The Story", to your own text.

3. The above code is written between the Conditional Tags, highlighted in Green color above. Which means that the “Sharing Box” will appear only at Blog Posts, not on the homepage of your blog. If you want to show “Sharing Box” on your blog homepage as well, then remove the above “Conditional Tags”.

That’s All.

Need Help?

Don’t forget to spread this knowledge with your friends and subscribe at our blog for more updates. If you need any help, please feel free to ask by leaving your comments below and we will try our best to answer and will be great honor for us. Peace, blessings & cheers.! :)

Add Twitter Cards To Blogger

As we have described several times in our posts about the importance of social media platforms which plays a vital role in the rapid growth of your online business. Social media platforms makes the blog or websites marketing easy and absolutely free among the number of followers in the community. All the social media platforms are producing best to facilitate the users and all the social networks are the great competitors and introduce new features day by day. You might have seen in Facebook & Google+, when you share the post on these networks, they show a little summary with the posts through which your social media followers easily know, what is the post all about. But in TWITTER this feature is missing, and now TWITTER has also come up with the same mechanism which is called “TWITTER CARDS”. This tutorial is about how you can add the TWITTER Cards easily in Blogger.

Why Add TWITTER CARDS & How It Works?

Twitter Cards represents your posts in more attractive and well-defined way. When you add this feature, it will show a “VIEW SUMMARY”option under your posts at your Twitter profile. So whenever you share a post on your TWITTER profile, your followers will know a little about your post with the help of the summary. You can see the TWITTER CARDS DEMO in the screenshots below:

Enable Search Description In Blogger: 

To make Twitter Cards work properly you need first to Enable The Search Description In Blogger.

• Read Here: How To Enable Search Description In Blogger?

After you have enable the Search Description feature, go to Blogger and make the post. While making the post, you must remember the following two things:

• Add an IMAGE to the post. 
• Add a SEARCH DESCRIPTION with the post (You can find this option in Blogger POST EDITOR right sidebar). See the screenshot below:

If one of the above mentioned two things is missing, the TWITTER CARDS won’t work.

How To Add TWITTER CARDS In Blogger? 

Let’s see how you can add the TWITTER CARDS in Blogger, follow the steps below:

1. Log-in to your Blogger Dashboard.

2. Go to Template > Backup. (Click Here To See, How?)

3. Now click “Edit HTML.”

4. Inside the “HTML EDITOR”, Press CTRL+F and search for </head> tag.

 5. Now copy & paste the following code, just above the </head> tag.

<!-- Twitter Cards Starts -->
<meta content='summary' name='twitter:card'/>
<meta content='@mytutorialscafe' name='twitter:site'/>
<meta content='@mytutorialscafe' name='twitter:creator'/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<meta expr:content='data:blog.url' name='twitter:url'/>
<meta expr:content='data:blog.pageTitle' name='twitter:title'/>
<b:else/>
<meta expr:content='data:blog.homepageUrl' name='twitter:url'/>
<meta expr:content='data:blog.pageName' name='twitter:title'/>
</b:if>
<b:if cond='data:blog.metaDescription != &quot;&quot;'>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
</b:if>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' name='twitter:image'/>
<b:else/>
<meta content='Your BLOG Logo' name='twitter:image'/>
</b:if>
<meta expr:content='data:blog.homepageUrl' name='twitter:domain'/>
<!-- Twitter Cards Ends -->

6. Click “SAVE TEMPLATE” and you are almost done.

Note:-

1. Change the “@mytutorialscafe” to your own blog’s TWITTER PAGE name.

2. Change the “@mytutorialscafe” to your own personal Twitter profile username.

3. Replace “Your BLOG Logo” with your own logo URL.

Final Step: Get Approval From Twitter:

Once you have applied all the above steps, now it’s time get approval from TWITTER to show the cards with your posts on your profile. To do so follow the short & easy instructions below:

1. Go to Twitter Cards Validator.

2. Now click “VALIDATE & APPLY” tab.

3. Enter the URL of your blog homepage,and Click GO.

4. You will see the message “www.yourblog.com” not approved, click “Request Approval” button.

5. A new “Request Domain Approval”window will open. Fill in all the required fields and click “Request Approval”button.

6. If all set, you will see the message “Approval Pending”.

Note:-

Twitter will take some time for approval. Once it gets approved you will receive an e-mail about confirmation from Twitter and in Twitter Card Validator you will see the message as shown below:

The IMAGES as well as SEARCH DESCRIPTION will start showing the TWITTER Cards, whenever you or someone else shares your posts. The changes will replicate your old posts too with which you have added Images and Search Description.

That’s All.

Happy Blogging.

Got Questions?

Don’t forget to spread this knowledge with your friends and subscribe at our blog for more updates. If you need any questions, please feel free to ask by leaving your comments below and we will try our best to answer and will be great honor for us. Peace, blessings & cheers.! :)

Add A Slide Out Egg Social Bookmarking Widget In Blogger

We have always posted about different social media widgets for blogger blog. Beautiful social media widgets always attract the visitors and play an important role in building your social media fan following. Today we are here with another beautiful social widget which look like an egg and might draw the attention of the visitors towards your blog i.e. Slide Out Egg Social Bookmarking Widget.

How It Works?

This widget is floats with the scroll of your page of your page. It’s shape is like an egg and when you click on it, it will appear containing different social media icons, so you can select and bookmark it to the social media of your own choice. 

DEMO

Add A Slide Out Egg Social Bookmarking Widget In Blogger:

Let’s see how you can implement it in your blog.

1. Log-in to your Blogger Dashboard.

2. Go to Template > Backup. (Click Here To See, How?)

3. Now click “Edit HTML.”

4. Inside the “HTML EDITOR”, Press CTRL+F and search for </head> tag.

5. Copy & paste the following code just above </head> tag.

<!-- Slide Out Egg Social Bookmarking Widget Starts -->
<script src='http://w.sharethis.com/gallery/shareegg/shareegg.js' type='text/javascript'/><script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/><script type='text/javascript'>stLight.options({publisher: &quot;bea50586-2b9f-448d-947a-01385f28e305&quot;, onhover:false}); </script><link href='http://w.sharethis.com/gallery/shareegg/shareegg.css' media='screen' rel='stylesheet' type='text/css'/>
<!-- Slide Out Egg Social Bookmarking Widget Ends -->

6. Now inside the “HTML EDITOR”, Press CTRL+F and search for </body>.

7. Copy & paste the following code immediately before </body> tag.

<!-- Slide Out Egg Social Bookmarking Widget Starts -->
<div style='position: fixed; bottom: 2%; left: 2%;'><div class='shareEgg' id='shareThisShareEgg'/></div><script type='text/javascript'>stlib.shareEgg.createEgg(&#39;shareThisShareEgg&#39;, [&#39;facebook&#39;,&#39;twitter&#39;,&#39;googleplus&#39;,&#39;linkedin&#39;,&#39;blogger&#39;
,&#39;stumbleupon&#39;,&#39;sharethis&#39;], {title:&#39; <data:blog.pageTitle/>&#39;,url:&#39;<data:blog.url/>&#39;,theme:&#39;shareegg&#39;});
</script>
<!-- Slide Out Egg Social Bookmarking Widget Ends -->

8. Click “Save Template”.

You are all done, refresh your blog to see the Slide Out Egg Social Bookmarking Widget.

That’s All.

Happy Blogging.

Need Help?

Hope this tutorial helps you in adding the Slide Out Egg Social Bookmarking Widget in your blog easily. Don’t forget to spread this knowledge with your friends and subscribe at our blog for more updates. If you need any help, please feel free to ask by leaving your comments below and we will try our best to answer and will be great honor for us. Peace, blessings & cheers.! :)