Tag: Embed

Add YouTube Subscribe Button On Your Website/Blog

Hi! Everyone, hope you all are fine.
In this post I will tell you how you can add YouTube Subscribe button on your website(s)/blog(s). Few days back YouTube rolled out a new subscribe button to celebrate YouTube one billion subscriptions for their user’s to put on their website(s)/blog(s). The new YouTube subscribe button for website let your users subscribe to your YouTube page directly without leaving your site.


Image credit: throwboy

Here how you can add a simple subscribe button.

1.       Copy the below code
2.       Paste it where you want to add your YouTube Subscribe button.

<iframe id="fr" src="https://www.youtube.com/subscribe_widget?p=JajodiaSaket" style="overflow: hidden; height: 105px; width: 300px; border: 0;" scrolling="no" frameBorder="0"></iframe>

3.       Now change the JajodiaSaket from the above code with your YouTube username.

Here’s how YouTube Subscribe button looks like.

Let us know what you think about YouTube new Subscribe button for website.

How To Use Like Button In Your Blogger.com Blog

Hi! Everyone, hope you all are fine.
In this post I will tell you how you can use Facebook Like Button in your Blogger.com blog. Few people asked me how they can use Facebook like button on their blogger blog so here it is. If you don’t have a blog in Blogger then you can create it now.

1.       Go to your Blogger Dashboard –> Design –> Edit HTML –> now tick the Expand Widget Templates for the following blog in which you want to use Facebook Like Button.
2.       Search for the following code (to bring the browser search box press Ctrl + F or F3)
a)       If you want to use it before post and after title
<p class='post-header-line-1'>
b)       If you want to use it after post ends
<data:post.body/>
3.       Now place the following code just after any of the above code
<b:if cond='data:blog.pageType == "item"'>
<iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=standard&show_faces=true&action=like&font=arial&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:70px;'/>
</b:if>
a)      Things you might need to change
(1)    layout=standard
You can change standard to button_count if you only want to show the button with no. of likes
(2)    show_faces=true
You can change true to false if you don’t want to show the face
(3)    action=Like
You can change Like to Recommend if you want to show recommend instead of like
(4)    font=arial
You can change arial to
(a)    lucida+grande
(b)   segoe+ui
(c)    tahoma
(d)   trebuchet+ms
(e)   verdana
Use anyone of follow font you like
(5)    colorscheme=light
You can change light to dark depending on your template color
(6)    change the width:450px and height:70px depending on your template
(7)    If you want to show Like Button in home page also then remove the following codes
<b:if cond='data:blog.pageType == "item"'>
</b:if>
4.       Now click on SAVE TEMPLATE, now check your blog everything is working fine
5.       Now everything is fine now again come to Edit HTML page for the same blog
6.       Now find opening head tag you will get it at the top of the page.
<head>
7.       Paste it just below the head tag
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta expr:content='data:blog.title' property='og:site_name'/> 
<meta content='Your Profile ID' property='fb:admins'/> 
<meta content='Category of your Blog' property='og:type'/>
i)        Things you need to change
(1)    Your Profile ID change it with your profile ID (If you want then you can remove the Profile ID line)
(2)    Category of your Blog choose the category of your blog from Facebook open graph page to go to Facebook open graph page Click here.
Note:- Before editing your Blogger template take the backup of your template by going to Blogger Dashboard –> Design –> Edit HTML –> now click on Download Full Template for the safe side.

Twitter Tweet Button For Your Blog, Website And Browser

Hi! Everyone, hope you all are fine.
In this post I am going to tell you how you can use Twitter’s new twit button in your blog or website. You might have show many retweets button from 3rd party service (like: tweetmeme). But twitter have official bought there retweet button in 3 sizes (Vertical count: 55x62 px, Horizontal count: 110x20 px and No count: 55x20 px).

You can use this retweet button in 3 different ways.
1.       By using JavaScript

<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
<a class="twitter-share-button" href="http://twitter.com/share">Tweet</a>

2.       By using iframe

<iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://platform.twitter.com/widgets/tweet_button.html" style="width:130px; height:50px;"></iframe>

                               
3.       By customizing your own retweet button

<a href="http://twitter.com/share">Tweet</a>

For WordPress.com Users
In Word Press you can only use tweet button in Horizontal size (110×20 px)
1.       Login to your wordpress.com (wp) account
2.       Go to the following blog in which you want to place your tweet button
3.       Now go to Appearance –> Extras
4.       There you will see few tick box option
5.       In that you will see its written Show a Twitter “Tweet Button” on my posts.
6.       Tick that box then click on Update Extras »

7.       And it’s done
8.       Now you will see the tweet button in the bottom of your wp blog post
For Blogger Users
1)      Login to your Blogger.com account
2)      Go to Design –> Edit HTML –> then click on Expand Widget Templates for the following blog in which you want to use tweet button
3)      Search for the following code (to bring the browser search box press Ctrl + F or F3)
a)      If you want to use it before post and after title

<p class='post-header-line-1'>

b)      If you want to use it after post ends

<data:post.body/>

4)      Place the code just after the above code

<b:if cond='data:blog.pageType == "item"'>
  <div style='float:right; padding:10px;'>
    <a class='twitter-share-button' data-count='vertical' data-related=Jajodia_Saket:Tecko Blog...' data-via='SaketJajodia' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow'>Tweet</a>
    <script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
  </div>
</b:if>

5)      Things you might need to change
a)      If you want to show this tweet button in home page then remove the following codes

<b:if cond='data:blog.pageType == "item"'>
</b:if>

b)      Change or remove as per your suitability

style='float:right; margin-left:10px;'

If you want to change it then
In style change right to center or left
In padding change 10 to any number as you feel suitable with your template
c)       If you want to change the size
data-count=’ data-count=’vertical‘ ‘
Change vertical to horizontal or none as you feel suitable
d)      Change SaketJajodia with your twitter username
6)      Here is one more plain and simple tweet button you can use

<style media='screen' type='text/css'>
  #custom-tweet-button a {
    display: block;
    padding: 2px 5px 2px 20px;
    width:40px;
    background: url('http://a0.twimg.com/images/favicon.gif')left center no-repeat;
    border: 1px solid #ccc;
  }
</style>
<div id='custom-tweet-button'>
  <a rel='nofollow' expr:href='"http://twitter.com/share?text=" + data:post.title + " &via=SaketJajodia&related=Jajodia_Saket:Tecko%20Blog... "' target='_blank'>Tweet</a>
</div>

Change the SaketJajodia with your twitter username
Note: Before editing your template, 1st backup your template for safe side, by clicking on Download Full Template in Edit HTML page
To add in self hosted website
To add in self hosted website
1)      Go to the page where you can have access to edit you website HTML
2)      Now find the place where you want add tweet button
3)      Now place the following code as per your suitability
a)      Using JavaScript

<a rel='nofollow' href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="SaketJajodia" data-related="Jajodia_Saket:Tecko Blog">Tweet</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

i)        To add the Horizontal count: 110×20 px
Change vertical to horizontal
ii)       To add the No count: 55×20 px
Change vertical to none
b)      To add the plain and simple tweet button

<style type="text/css" media="screen">
  #custom-tweet-button a {
    display: block;
    padding: 2px 5px 2px 20px;
    width:40px;
    background: url('http://a4.twimg.com/images/favicon.gif')left center no-repeat;
    border: 1px solid #ccc;
  }
</style>
<div id="custom-tweet-button">
  <a href="http://twitter.com/share?text=&via=SaketJajodia&related=Jajodia_Saket:Tecko%20Blog..." rel='nofollow' target="_blank">Tweet</a>
</div>

c)       Using iframe

<iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://platform.twitter.com/widgets/tweet_button.html" style="width:130px; height:50px;"></iframe>

4)      Change the SaketJajodia with your twitter username
To customize your own tweet button
You can customize your own tweet button using this link http://twitter.com/share
For more info Click here
For Chrome users
To use tweet button in your Google Chrome browser, you can use a Chrome extension by Shareaholic. It works as the Twitter tweet button works and it also shows how many tweets have been done in the following page.

If you have anything to tell about Twitter new tweet button please let us know. Even if you have customize your own tweet button.

Use HTML5 To Embed YouTube Videos

Hi! Everyone, hope you all are fine.
YouTube allows user by default to embed video using flash based video player on any website and web pages. Since most of the computers have the Adobe Flash Player plug-in, so your YouTube embedded video will play without any kind of issues. But when it comes to mobile web browser most of them don’t support Flash video Continue reading Use HTML5 To Embed YouTube Videos