How To Embed Youtube Videos Responsively (Mobile Friendly)

Here's a quick tutorial to embed Youtube videos responsively for your audience on mobile devices.

If you directly add Youtube videos to your website or blog without making them responsive, then the video might go out of the frame on smaller screens - forcing your readers to tilt their screens or they may just leave your blog or website without watching the complete video.

Here's a screenshot which shows you the difference between a non-responsive and responsive embeded Youtube video:

View Live Demo Here

So here's how you embed Youtube videos in responsive layouts

You just need to add a responsive div tag within which we will put the Youtube videos. So, rather than simply adding a code to embed Youtube videos like this:

<iframe allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/Om6tnEP6vvU" width="560"></iframe>

Use this code:

<div class="video-container">
<iframe allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/Om6tnEP6vvU" width="560"></iframe>
</div>

Observe the code highlighted in RED above. To tell your blog, what a "video-container" in the above code means, we will define it in the blog's template (this part of our CSS code will make the Youtube iframe code responsive):

Go to Blogger -> Template -> Edit HTML and search for this code:

</head>

And immediately above it, paste this piece of code:

<!-- responsove youtube videos starts-->
<style type='text/css'>
.video-container {
position:relative;
padding-bottom:56.25%;
padding-top:30px;
height:0;
overflow:hidden;
}

.video-container iframe, .video-container object, .video-container embed {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
</style>
<!-- responsive youtube videos stops help@ BloggerStop.Net-->

Save the template and that's it!
Now all the videos in your blog within a div class "video-container" will be flexible and in sync with the viewer's screen size.

Embed Presidential Debate Tweets In Blogger In 2 Minutes

Here's a quick tutorial on how to add the ongoing "Tweets from the Presidential Debates of 2016" to your blog. The process hardly takes 2 minutes, if you already have a Twitter and a Blogger/Wordpress account.
Although I have made this tutorial specific to the ongoing presidential debates of 2016, but you can follow the same process to embed tweets of any Twitter #Hashtag.

This tutorial has mainly two parts:
1. Take the code from Twitter.
2. Paste it in your Blogger/Wordpress blog

For the first step, i.e. to take the code from Twitter please watch this video (35 seconds):

Now, once you have the code with you, simply login to your Blogger account. You can place the code either inside a blog post or in your sidebar;
To put it in a blog post, just create a new post and paste the code wherever you want in it and publish the post. [Check the DEMO here]
To put it in your sidebar, go to Layout -> Add a Gadget -> Select it as "HTML/Javascript type" and paste the code in it and save the widget.
Now you can track and showcase all the tweets on Hillary vs Trump debates directly on your blog.

Easiest Way To Add (On Hover) Pinterest Icon To All The Images Of Your Blog

Recently while writing an article on "How To Add Floating Share Widget To Blogger Blogs", I stumbled on an easy way to make the images of a blog shareable.

In a nutshell, once you add a single line of code to your blog and when readers hover their mouse on the images within your blog (both new and existing images), small Pinterest buttons will appear on them. If your images are attractive enough, then they will be shared on Pinterest along with a backlink to original article and it will get you a boost in traffic from Pinterest.
Whenever your readers Pin your images to their boards then the images will be shared with their followers.

Pinterest ranks among the top 50 websites on the Internet getting around 500-800 Million page-views per month. Simply put, you cannot ignore Pinterest as a potential source of web traffic. Beautify your posts with attractive images, add the code mentioned in this tutorial to make the images shareable and expect a huge bump in the traffic.

You can make the images shareable by adding a single line of code from Shareaholic. Create an account at Shreaholic and add your website to the account (under "My Sites"). Now from the settings screen, deactivate all the options except "Shareable Images" (if you are planning to add other features of Shareaholic like floating share widget etc. then keep those options active as well).

The code from Shareaholic looks somewhat like this

<script type='text/javascript' data-cfasync='false' src='//dsms0mj1bbhn4.cloudfront.net/assets/pub/shareaholic.js' data-shr-siteid='xxxxxxxxxxxxxxxxxxxxxxxxxxxx' async='async'></script>

Paste that code in your blog's template
Under Blogger/ your blog -> Template -> Edit HTML, find this code in the template:

</head>

Paste the code from Shareaholic immediately above it and let your readers share your images!

Floating Share Buttons With Total Shares Count For Your BlogSpot Blog

There are many tutorials on Internet that can help you add a floating widget with multiple share buttons for Facebook, Twitter, Pinterest, Google Plus etc. But most of them require much of your effort for such an easy task, specially if you want to show the "Total Shares Count", unlike this one on BloggerStop.
In this article you will be given with two options (both are equally easy) through which you can add a floating sharing widget with all the possible variations for both desktop and mobile devices.

First have a look at the working demo...
Well, the final product is right next to this article (floating at the left extreme of this blog - please hit your favorite button in the widget and share this article with your friends and followers :)

Now add a similar widget to your desktop or mobile website within the next 10 minutes.

Two famous websites that provide these widgets are: Shareaholic or Addthis. Both of them have their Pros and Cons, which are listed below.

Shareaholic	Addthis
Easy to add - just one line of code	Easy to add - just one line of code
Gives "Total Shares" count	Gives "Total Shares" count
Can be shown only on Mobile/Desktop (default is both)	Can be shown only on Mobile/Desktop (default is both)
Analytics - can be clubbed with Google Analytics	Analytics on it's own platform
Can show individual counts	Individual counts not available
Multiple color options (other than brand colors)	Only White, Gray, Black (other than brand colors)
Available in 3 different sizes	Available in only one size
You can select different set of share buttons for desktop and mobile (so you can restrict Whatsapp for Mobile only)	If you select the buttons yourself, then the set of buttons will be same for both Desktop and Mobile (so, you need a new code/widget if you want to show different buttons on mobile)
Monetization options are also available	No monetization options
The design is old and you cannot change it	Modern design with rounded edges
No additional tools like exit popups to get email subscribers	Additional tools like pop ups to acquire new subscribers along with A/B testing
No email subscribers/marketing	Can acquire and maintain email subscribers and marketing list

Now, considering the pros and cons and depending on your main source of traffic (either mobile or desktop) select the appropriate one for your blog. The instructions to add the widgets are easy to understand. In AddThis, you can copy the code from "Get The Code" section and in Shareaholic click on "Get Setup Code" once you have setup the widget. You can login to these accounts and make changes anytime and they will automatically reflect in your blog.

To Display Whatsapp Share Button on Blogs for Mobile Browsers

This is how Whatsapp icon will be shown on mobile displays. If a major component of your incoming traffic is from Mobile devices (you can find this out using site analytics tools like Google Analytics), then go for Shareaholic, as it allows to you specify different combinations of share buttons for desktop and mobile views.

SMO - Facebook Meta Tags For Blogger Blogs

Meta Tags are really important for blogs and websites, not just for Search Engine Optimization but for Social Media Optimization as well. If you are not sure on the status of your meta tags for SEO (Google), then do have a look at this post first: Check Your Meta Tags and How To Add Them To Blogger Blogs. Also, make sure that you do not have duplicate meta tags in your Blogger blogs.

In this tutorial you are going to add meta tags for Facebook - a must if you are planning to link your blog to your Facebook page for Social Media Optimization or Marketing.

First let's see, how a post shared on Facebook ideally looks like:

To check such a preview, you can try to share any of your blog posts on your Facebook page. And while in the preview itself, you can see whether all the five important parts of the link are correct or not:
1. Post title
2. Post featured image
3. Post summary/description
4. Blog's name
5. Blog author's name

You can also check the preview using a tool provided by Facebook: Batch Invalidator

Just put in the URL of few of your blog posts and you can see the preview of each of these blog posts separately. And in case, you find something's wrong with the preview then make sure that the Facebook meta tags are correctly added to your blog's template.

The basic meta tags that must be present in your template are these:

<meta property="og:url" content="URL_OF_BLOG_POST" />
<meta property="og:type" content="ARTICLE" />
<meta property="og:title" content="TITLE_OF_THE_BLOG_POST" />
<meta property="og:description" content="A_BRIEF_DESCRIPTION_OF_BLOG_POST" />
<meta property="og:image" content="LINK_TO_THE_FEATURED_IMAGE_USED_IN_THE_BLOG_POST" />

In Blogger, we need meta tags which are dynamic and create unique content for each and every blog post automatically. So, use this code which will add the required meta tags to your blog home page and blog posts without duplicating any content:

<!-- [ Social Media meta tag ] -->
<meta content='Your Name' name='Author'/>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<b:if cond='data:blog.url'>
<meta expr:content='data:blog.url' property='og:url'/>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<b:if cond='data:blog.pageName'>
<meta expr:content='data:blog.pageName' property='og:title'/>
</b:if></b:if></b:if></b:if>
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta content='article' property='og:type'/>
<b:else/>
<meta content='website' property='og:type'/>
</b:if>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<b:else/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postThumbnailUrl' property='og:image'/>
<b:else/>
<meta expr:content='DIRECT_LINK_TO_YOUR_BLOG_LOGO' property='og:image'/>
</b:if></b:if>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
<b:else/>
<meta content='data:blog.pageTitle' property='og:description'/>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta content='XXXXXXXX' property='fb:app_id'/>
<meta content='en_US' property='og:locale'/>
<meta content='en_GB' property='og:locale:alternate'/>
<meta content='id_ID' property='og:locale:alternate'/>
<!-- [ Social Media meta tag help - BloggerStop.Net] -->

Change the code highlighted in RED, before saving the template. In the first meta tag "Author", your name/alias should come as "content". In the second highlighted code, paste the direct link to your blog logo which will be used if no other featured image is present in the article. You can skip the third meta tag "App_ID" if you do not have an FB app or if you are not interested in creating it.
NOTE: Post description is automatically taken from "Search Description" of the post, which you will have to explicitly mention while writing your blog posts. This is important for SEO as well.

Now, keep sharing your posts on Facebook and gain more FB fans!