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

Get a Twitter Card for your Site!



Make a Twitter Card with Open Graph



Do you know Twitter let you attach photos with your tweets? If you have a blog or website, you can make a card for it. And when you share your URLs on Twitter, that card will appear with your tweets! All you need to do is simply add an HTML code on your site. 


In my previous post, I discussed about Facebook Open Graph. If you've already implemented Facebook Open Graph on your site, then creating a Twitter Card will be much easier for you. Because, Facebook Open Graph an Twitter Card is almost similar. 


5 Simple Steps to Create a Card
  1. Choose a Card Type for your site - ie. Summary Card with Large Image
  2. Now get the code from there. Change it where necessary. 
  3. Add the code in your site's HTML.
  4. Test your home page URL through Card Validator.
  5. Now tweet your site's link and your card will appear below the post!


Twitter Card Code including Open Graph


<meta name="twitter:card" content="Your Ultimate Choice for Computer, Internet, Blogging, SEO &amp; PC Troubleshooting Tips!" /><meta content='summary_large_image' name='twitter:card'/><meta name="twitter:site" content="@markspcsolution" /><meta name="twitter:creator" content="@markspcsolution" /><meta property="og:url" content="http://www.markspcsolution.com/" /><meta property="og:title" content="Marks PC Solution" /><meta property="og:description" content="There is no mistake in the world of technology - everything is learning!" /><meta property="og:image" content="http://s10.postimg.org/g0aysum0p/Marks_PC_Banner.png" />

This is exactly the same code which I'm using for my site. You just need to change in the content option. And you must create an image for the card and upload it to a server. Then share the URL in the image meta. 


Here is the embedded tweet for Marks PC Solution -



CMS Integration Guide

Twitter has provided a complete integration guide for twitter card. That's why I'm not gonna discuss about the code integration. Simply follow this URL for code integrtion.

Here will find the tutorial for - 
  • WordPress
  • Tumblr
  • Blogger

If you need any other help, please knock me . . . 




Stay with Marks PC Solution to get more interesting IT topics!



Complete Tutorial on Facebook Open Graph


Facebook Open Graph for Web Developer


Facebook Open Graph allows you to use custom site title, URL, description and even a custom image when you share your page. If you use Facebook Open Graph code on your site, every time when you share any page, it will be counted directly for your home page. Suppose, if I share the following URL on Facebook - 

http://www.markspcsolution.com/2014/09/complete-tutorial-on-facebook-open-graph.html

The sharing/ like will be counted for - 


http://www.markspcsolution.com/


But If there is no open graph code on my site, the sharing of the first URL will be counted individually. And the sharing will not be counted for your home page. Now I guess, you've understood the importance of open graph. It's really helpful to increase facebook likes of your site rapidly. 


Couple of days ago, I discussed about how to claim a site on Facebook. Following the same method, you can place Facebook Open Graph code on your site. Open graph code is as follows:



<meta property="og:title" content="Site Title"> 
<meta property="og:description" content="Site Description"> 
<meta property="og:type" content="Content Type">
<meta property="og:url" content="http://www.example.com/"> 
<meta property="og:image" content="Custom Image Link"> 
<meta property="og:site_name" content="Your Site Name"> 
<meta property="fb:admins" content="Your Numeric FB ID">


You have to place the above code in the head (<head> </head>) section of your site's HTML. The code must be placed before closing head tag - </head>.


Facebook Insights Meta Code

Now follow the steps below:

  1. Go to Facebook Insights > Domain Insights > Add your Domain
  2. Type your home page URL > Copy the Numeric FB ID > Keep the window open
  3. Go to your site's code or HTML and find the closing header tag </head>
  4. Place the above code before closing header tag
  5. Now back to the Facebook Insight Page 
  6. Hit on the Get Insights button
  7. Now you should be able to see your domain under the Domain Insights section


There are 7 meta properties in the above code. You have to change in the content option.  Make sure you've used them properly. I'm gonna clarify the points - 
  1. Site Title Example - Marks PC Solution.
  2. Site Description - What's your site about. Example - Your Ultimate Choice for Computer, Internet, Blogging, SEO & PC Troubleshooting Tips!
  3. Content Type - Website/ Blog/ Article/ News etc.
  4. Site URL Example - www.markspcsolution.com
  5. Custom Image - Upload your desired image in a server. Then simply copy and paste the link here. You can use postimage.org to upload image.  
  6. Type your Site Title here. Example - Marks PC Solution.
  7. Numeric FB ID that you've got from the 2nd step in Facebook Insights Page. You can also find numeric by this method


Marks PC Solution Custom Image



Troubleshooting

If you face any problem after implementing the code on your site, you can take help of Debugger. Here you can paste your site URL and debug the errors. You can check whether all properties are functioning normally or if there is a problem. 

Remember, you can omit some properties. If you use Custom Image, then it will be same for any link of your site. So you can also use a shorter version of the code as below:

<meta content='Website' property='og:type'/> 

<meta content='http://www.example.com/' property='og:url'/> 
<meta content='100002127563096' property='fb:admins'/>

It will do the same job for you. You can also use multiple Admin IDs. Simply add more numeric IDs in the admin property.


If you need any support regarding Facebook Open Graph, please leave a comment . . . 


Stay with Marks PC Solution to get more interesting IT topics!



How to Claim a Site in Facebook?


Get Facebook Insights


Do you know, you can claim your domain/site in Facebook to get insights? If you register your site on Facebook, you can view analytics for referral traffic, stories, user engagement and other related information. And definitely this will help you to take better actions for your site. 


I always say, if Facebook were a country, it could be the most populated state of the world. It's a site with the most registered active users. No other site, even Google and Twitter can't attract users as much as Facebook. Most of the users waste their valuable time on Facebook.  


But as a blogger/ web developer/ app developer, you can't either waste your time or avoid Facebook. You can take advantage of the popularity of Facebook. You can promote your website/ blog/ app on Facebook. You can do this in your way. I'm not gonna interfere there! 


Today I'm writing about - claiming/ registering a site on Facebook. You can do this easily. All you need is just adding a simple meta tag before your closing head (</head>) tag. 


Never try this trick if you - 
  • Don't have a website/ blog
  • Don't have a Facebook ID

Okay, I'm talking too much for a little trick! Let's back to the track - 
  1. Visit this page - Facebook Insignts
  2. Domain Insights > Add your Domain
  3. A new window will appear with your name and a meta property
  4. Type your site's URL there (ie. www.markspcsolution.com)
  5. Copy the meta property (ie. <meta property="fb:admins" content="100002117543096" />) and paste it in your site's HTML closing head tag. 
  6. Now hit on the get insights button. 
  7. If you're done properly, you will see your domain here. 

Claim your domain on Facebook Insights


Hope you've completed the task easily. But I couldn't do this as easily. Don't know why the meta property didn't appear when I was trying to implement the code in my site. Maybe something was wrong in that time when I was trying. 

If anybody face the same problem, I mean if the meta property with your numeric FB ID didn't appear as shown in the above image, follow the steps below - 


<meta property="fb:admins" content="100002197543196" />


Replace the above numeric ID with yours. And the code should be placed before the closing head tag - </head>

You can also use several IDs here. Suppose you want multiple users to get your site's insights. Then you can use more than one ID as below - 


<meta property="fb:admins" content="102117543096, 10034534562" />


Remember, this will just help you to get insights from facebook. If you wanna customize your sharing URL, Image or description you need to use Open Graph. I will discuss it later. Thanks. 




Stay with Marks PC Solution to get more interesting IT topics!


Bing Translator for Blog/ Website



Bing Translator Widget Supporting 50 Languages




Search engine Bing has a nice translator widget for your blog or website. With this translator, your reader can translate the site in their own languages. Thus your site will get more language coverage. Currently Bing translator supports only 50 languages. See the demo below: 



This is how your translator will look like. When someone clicks on the Translate button, translation option will appear. After clicking the down arrow, a drop down list of language will open. 


Translator Code

To enable translation for your site, you've to add the following code in your HTML. 

<div id='MicrosoftTranslatorWidget' class='Darkstyle='color:white;background-color:#555555'></div><script type='text/javascript'>setTimeout(function(){{var s=document.createElement('script');s.type='text/javascript';s.charset='UTF-8';s.src=((location && location.href && location.href.indexOf('https') == 0)?'https://ssl.microsofttranslator.com':'http://www.microsofttranslator.com')+'/ajax/v3/WidgetV3.ashx?siteData=ueOIGRSKkd965FeEGM5JtQ**&ctf=True&ui=true&settings=Manual&from=en';var p=document.getElementsByTagName('head')[0]||document.documentElement;p.insertBefore(s,p.firstChild); }},0);</script>


Copy and paste the above code in your site's HTML where you want this widget appear. This code works with almost any platform. 



Customize the Code

You can also customize this code. Look at the green texts. 

  • The first one is Dark. Dark looks fine when your site's background is light. But if your site is dark, then use Light instead of dark. 
  • The next one is Manual. That means someone needs to translate the page manually using the widget. But if you use the word Automatic, then your page will be automatically translated depending on the browser language! 
  • The last one is en. That means your site is in English - en. If your site's language is something else then you've to use the code of that language. For example, ar for Arabic, da for Danish, fr for French. Visit Translator Widget to see the codes for other languages. 


You can also change the background color of the widget using the color attribute. 



Implementing the Code in Blogger Blog

To use this code with blogger, follow the steps below:
  • Sign in to your blogger account and then go to your site's dashboard/ settings.
  • Now go to the Layout option from the left pane.
  • Choose Add a Gadget from anywhere (I prefer right sidebar).
  • Select HTML/ JavaScript option. 
  • Now copy and paste the Translator Code in the Content box. 
  • Save the gadget and view your site. 


Now when someone will translate your site, it will be translated within a second. And original text will also be displayed if you move your mouse over the text. To back to the original text, you have to cross the translator widget. 


Stay with Marks PC Solution to get more interesting IT topics!



Understanding HTML Colors



Standard Color of HTML


A single blog post can never provide you the sufficient knowledge on HTML colors. Thousands of words could be written about colors. But today, I'm just gonna share my little knowledge about HTML colors

All of you are familiar with the basic colors - Red, Green & Blue. In brief, this is known as RGB. What you see in the screen is nothing but the combination of these three colors. I mean Red, Green and Blue. 


There are 16 Million Different Colors!

The combination of Red, Green and Blue can produce more than 16 million colors! Each color has a value from 0 to 255. Couple of years ago I heard that human eyes can detect almost 17000 colors. And most of the modern monitors are capable of displaying more than 16000 colors. 


Color Names Supported by the Web Browsers

There are 140 color names defined by the HTML and CSS color specification which are supported by almost all web browsers. But only 17 of them are considered as standard colors. These are as follows:
Aqua, Black, Blue, Fuchsia, Gray, Green, Lime, Maroon, Navy, Olive, Orange, Purple, Red, Silver, Teal, White, Yellow. 
Look at the table below. 17 standard colors are shown with Hexadecimal values. 


Color Name
HEX
 Color
Aqua
00FFFF 
          
Black 
000000
       
Blue 
0000FF

Fuchsia 
FF00FF

Gray 
808080

Green 
008000

Lime 
00FF00

Maroon 
800000

Navy 
000080

Olive 
808000

Orange 
FFA500

Purple 
800080

Red 
FF0000

Silver 
C0C0C0

Teal 
008080

White 
FFFFFF

Yellow 
FFFF00
                                              


Understanding the Color Values

The web browsers can't see as we human do. We can see Red, Green, Blue, Black or White. But a browser don't see anything. But it can take color value as input and show color as output. 

So, when something is created to be displayed through web browsers the web developers must input the codes. Thus when are working with HTML or CSS colors you should have a basic idea about color codes. 

RGB colors are defined by the HEX code. If you work in photoshop you should know the formation of colors. When you pick a color in photoshop you will see the value of each color. If you choose fully red color, the value of R will be 255. And the value of G and B will be 0. And the HEX code will be #ff0000.

HEX Values are written as 3 double digit numbers starting with the # sign. The lowest value that can be given to a color is 0 (Hex 00). And the highest value is 255 (Hex FF). So when you choose a complete Red, the RGB code will be 255, 0, 0. And the HEX code will be ff0000. Here ff is for 255, and 00, 00 is for 0 and 0. 

When you choose complete white, RGB will be 255, 255, 255. Then you will get HEX code as ffffff. And if you choose black then you will get the opposite code. RGB will be 0, 0 0. The HEX code is 000000. That means white includes all the three basic colors. And black includes none of the colors. 


Example Color Values

  • White: Hex Code - #FFFFFF, RGB (255, 255, 255)
  • Black: Hex Code - #000000, RGB (0, 0, 0)
  • Red: Hex Code - #FF0000, RGB ((255, 0, 0)
  • Green: Hex Code - # 00FF00, RGB (0, 255, 0)
  • Blue: Hex Code - # 0000FF, RGB (0, 0, 255)
  • Yellow: Hex Code - # FFFF00, RGB (255, 255, 0)
  • Aqua: Hex Code - # 0000FF, RGB (0, 255, 255)
  • Fuchsia: Hex Code - #FF00FF, RGB (255, 0, 255)
  • Silver: Hex Code - #C0CoCo, RGB (192, 192, 192)

Hopefully this color values will clarify your understanding of HTML color codes. 



Stay with Marks PC Solution to get more interesting IT topics!


Tell Google when your Site's URL Changes


Tell Google When your Site Moves


More or less, all internet users are informed about the URL (Uniform Resouce Locator). A URL is simply the address of a site in internet. With the help of URL, you can directly access to a particular site. While general people just need to know the URL only to access a site, webmasters have to perform lots of tasks with it. 

Webmasters need to create thousands of links through URLs. Time to time they need to check the site's status through URLs. But these are not my concern in this post. Today I'd like to discuss about how to inform Google when you change your site's address. 


When a site gets a new address/ URL, definitely it loses social sharings. All backlinks of the site will also be lost. And search engines will not entertain that site as before. Because you're simply a stranger to them! Search engines even don't know about your site until you submit it for indexing.


But Google Webmaster Tools allows you to tell Google when your site moves to a new domain or URL. You can do this through Change of Address option. But there are some preconditions you must fill up:
  • You should have sufficient knowledge to handle Google Webmaster Tools.
  • Both your old and new sites should be added and verified in Google Webmaster.
  • Make sure your original site is not a subdomain. (ie. munnamark.blogspot.com)
  • Your new site shouldn't be a subdomain. (ie. markspc.blgospot.com


Advantages of using this Tool

  • You can easily recover your search ranking position.
  • It's safe. Because only verified site owners can use it.
  • Google will index your site quickly.



Google Webmaster Tools - Change of Address

Instruction:
  1. Sign in to your Google Webmaster account.
  2. On the Homepage, click on the site that you wanna work with.
  3. Click on the drop down arrow by the side of Gear icon (Look at the above image).
  4. Select Change of Address
  5. After completing steps 1 - 3, click Select a verified site (Your new site). 
That's it. Changes will stay in effect for 180 days. 


Troubleshooting:

If your new site doesn't appear in the Select a site, make sure - 

  • Both of your sites are added and verified in Webmaster Tools.
  • Both the sites have root level domains, not a subdomain. (ie. www.example.com)
  • You haven't already requested for change of address. 

For more details, please read Webmaster Tools Help - Tell Google when your site moves . . .


Stay with Marks PC Solution to get more interesting IT topics!


HTML Tutorial 4: Tags Without Ends


HTML Tags with no ending tags


After a long break I am gonna write another tutorial on HTML. This will be the number 4 tutorial of HTML. Today I would like to share some tags which don't have any endings! I mean you can just start these tags but they have no corresponding end tags. 


You might be interested to read the previously published HTML tutorial. These are as below: 


Now I can proceed to the Tutorial 4: HTML Tags with No Ends. Have a look at the image below. 

HTML Tags with no corresponding end tags


The above image doesn't include all the tags that have no ends. See the complete list below: 

  • <area> 
  • <base> 
  • <basefont>
  • <br> 
  • <col> 
  • <frame> 
  • <hr> 
  • <img> 
  • <input> 
  • <isindex> 
  • <link> 
  • <meta> 
  • <param>  

These tags have no corresponding ends. You just need to start them. 

For example: The <br> tag is used to create a line break. I mean it is used to create a new line. And when you create another line break the first one automatically ends. So it is needless to put an end tag to the <br> tag. That's why HTML standard excludes the corresponding end of the <br> tag. 

The same thing happened to the other tags mentioned in the list above. Another example could be the <img> tag. It is used to link to the image. Is it necessary to end an image with the help of an ending tag? Not at all. That's why the image tag is also don't have any ending tag. 


* XHTML always requires end tags. (Quite disappointing!) 



The <p> Tag: 

What about the <p> tag? By this time you all know about this tag. It is used to create a paragraph. And it has a corresponding end tag too. You can also guess - </p>. But many HTML authors even don't know this exists! 

However if you avoid the ending tag, I mean the </p> tag, your browser will never complain. The document will work quite fine. It is somewhat like the <br> tag. But the <br> tag has no end by rules. 

You can consider the rule as Omitting Tags. Yes, there are some tags in HTML which have end tags but you can avoid them. 



Hope you enjoy today's tutorial. Because this is an interesting feature of HTML in that sense that some tags have no ends. Some end tags you can omit as you wish. Stay in touch to get more . . . 


Stay with Marks PC Solution to get more interesting IT topics!



HTML Tutorial 3: Most Common Tags Used in HTML Documents


HTML Example


I'm sorry for the delay to publish new posts but something was wrong with my PC. That's   why I was in trouble with this and not able to write something new. Well I'd like to continue the HTML tutorial. 


In this post I will discuss about some tags which are very common in preparing HTML documents. But before you go, don't forget to look at the following posts if you haven't already gone through:


Let's talk about the most common tags of HTML documents. You should also have a close look at our example document. Some of these tags are also used in that document. I think this will be helpful for you. 


Most Used Tags of HTML


  • Structural Tags: <html>, <head>, and <body> are the main structural tags of any HTML document. Each and every HTML document must contain these tags. Title   tag - <title> is also very important for an html document. Besides there are tags which are very common for all HTML documents. These are discussed below:

  • Anchors <a href> </a>: This tag is used to create anchor text. For example: <a href=http://munnamark.blogspot.com>Marks PC Solution</a>. The browser will show only Marks PC Solution hiding the link of our site. When someone clicks on the text, he will be directed to Marks PC Solution home page 

  • Paragraph <p>: This tag is used to create a new para. It has no end tag! You just need to place a <p> tag when you want to create a new para. 

  • Line Break <br>: This tag is used to break the current line. It is similar to pressing Enter button in Word Processors like MS Word or Wordpad. This tag has no end tag too!  You can break a like just by typing <br> before that line. 

  • Bold <b> </b>:  This tag is used to bold the text. For example: <b>Bold</b>. The result will be Bold

  • Italic <i> </i>: This tag is used to italicize the text. For example: <i>Italic</i>. The result will be Italic

  • Underline <u> </u>: This tag is used to underline a text. For example: <u>Underline</u>. The result will be Underline

  • Heading Tags: Start Tags: <h1>, <h2>, <h3>, <h4>, <h5>, <h6>.                                       End Tags: </h1>, </h2>, </h3>, </h4>, </h5>, </h6>. These tags are used to define the titles of the document. For example, <h1> is used for the document header title. <h1>Marks PC Solution</h1>. <h2> is used for the document section title. <h2>Your Ultimate Choice for Computer, Internet, Blogging, SEO & PC Troubleshooting Tips</h2>. Thus <h3>, <h4>, <h5> and <h6> decreases the font size of the title. 


Don't be confused by someone or by yourself! There are many other common tags for HTML documents. But these are just for giving you an idea. 


You should be careful while using the tags and their related attributes. Because any error in using the tags may result wrong output. Even a minor mistake may create serious problem. Because you may not be quick enough to find the errors! 

By the way, the rules and stadard of HTML varies from time to time. Sometimes your browser is able to show the document correctly even if there is any error in the source file! But it doesn't mean that you will not try to keep the document accurate. Whatever you do, do it with care. Best of luck. 



Stay with Marks PC Solution to get more interesting IT topics!