Facebook Open Graph meta tags or Facebook graph objects

What are Facebook Open Graph Meta Tags?

Facebook's open graph protocol allows web developers to showcase the preview of their page when it is shared on facebook. The web developers set the information in the web page which is used by facebook to display that page with a preview in the facebook news feed. This information is set via some some custom META tags.
Let's take a look at different META tags facebook uses to allow you to set the information displayed when some one shares the url of your website.

The basic syntax for all the facebook META tags is that every tag is prefixed with og: and then the property name, second attribute inside the facebook META tag is content where the value of property is mentioned.

Facebook Meta Tags

1. The Image tag
The image tag tells facebook to use the specified image when page is shared in news feed of facebook

<meta property="og:image" content="https://avatars.githubusercontent.com/u/4556455?v=3"/>

2. The Title tag
This is the title which is corresponding to the URL of the page

<meta property="og:title" content="Title to be displayed on facebook"/>

3. The URL tag
It represents the URL of the corresponding page

<meta property="og:url" content="url of the page"/>

4. The site_name tag
It represents the name of the website

<meta property="og:site_name" content="Impetus"/>

5. The type tag
It represents the category of the website and allows facebook to categorize the link based on this type tag

<meta property="og:type" content="blog"/>

More can be explored but the syntax is same the type of tag prefixed with og: and the content inside the content attribute of these META tags.

Bower Fundamentals Part 2

Creating bower.json file

bower.json file maintains the record of all the dependencies you have installed in your project.
To create bower.json file, type following command on to your terminal

bower init

It will ask your few simple questions and after that, a bower.json file will be created in your project.

Installing from bower.json file

If you have bower.json file and it has all the dependencies mentioned in it then you can install all those dependencies into your project by executing below command

bower install

Changing default location of Bower installation directory

By default bower installs all the dependencies in bower_components directory. But let say you want to install these dependencies in a folder 'public/lib'.
You can do it by create a file .bowerrc in the root of your folder and inside this file give the following configuration

{
    "directory": "public/lib"
}

Using --save and --save-dev flags

If you want to install a package in your project and you want your bower.json file to get updated with this installation then use --save flag.
Some dependencies are meant for development purpose like testing dependencies and they do not have anything to do with the production code. So it is better not include such dependencies and keep them as dev dependencies. To install a package as dev dependency we should use --save-dev flag. For example,

bower install lodash --save-dev

Now when you want to deploy your code into production then you can ignore these dependencies and install only those packages which are needed in production. this can be done through

bower install --production

It will not install dev-dependencies.

Bower Cache

Bower maintains a cache, if the requested package is in cache then it will not make network connection to fetch it, it would rather install it from the cache,
To list down the packages available in cache, execute the following command

bower cache list

To clean the cache

bower cache clean

To explicitly install from cache only, use -o flag

bower install angular -o

For further more instructions, try out

bower help

Bower Fundamentals Part 1

What is Bower?

Bower is a tool which fetches the client side libraries for your web application. Bower takes care of finding and downloading the library or package for you and then add it into your project. It manages all these dependencies in a file called bower.json.

Installing Bower

To install Bower you need to have node.js installed in your system. Once you find that node.js is installed then you can run the below command on terminal

npm install -g bower 

-g flag is to make it global

** Do not run npm with sudo because there might be some dependencies which needs permission to write but are not able to do so, so if you are not able to run npm without sudo then run the following before installing bower

sudo chown username /usr/local
npm cache clean

here username is the name of the user

Installing packages using Bower

Suppose you want to install angularJS in your project then you can install it by executing following command. First create a bower.json file by init command

bower init

It will ask you few basic questions and after that it will create a bower.json file. Now you can install angularJS via below command

bower install angular --save

If you are using --save flag then it will save it into your project and update the bower.json file. If you are running it without --save flag then it will not modify the bower.json file. Now if you run

bower prune

then it will remove all the dependencies which are not there in bower.json file

Installing Specific version of package

to install a specific version of a particular package you can use a # symbol and specify the version afterwards, as shown below

bower install angular#1.3

Uninstalling Packages

Packages can be uninstalled by using this simple command

bower uninstall angular

and done, it will remove the entry from bower.json file also.

Getting info about a package and its version history

To install a particular version of a package you need to know the version history about that package, and you can do it by executing this command to get the history of that package

bower info angular

Listing installed packages

To list down all the packages installed in your web app, you can run the below command

bower list

Searching a package with Bower

To search a specific package with the name, but you are not sure about the complete name of that package. Then you can run the following command to get the list of all the packages containing that name along with their github URLs.

bower search angular

This will return a list of all the packages containing the word angular along with their github URLs
...to be continued