Include Images from Google Drive to External Sites [Blogger]

I can directly add any external image to Blogger (Google) using its “insert image” option, either by uploading it or by providing an url. Similarly, I should also be able to share my Drive (Google) images to the external sites, including the blogger. Turns out there’s no one-click solution to it.

Google does provide a shared-link of the item. However, it cannot be directly used inside an image tag. In order to properly incorporate the image in an external site (& Blogger), some custom modification needs to be applied to the url. Following are the steps to achieve the same:

* Assuming the image is already residing on the Drive, right-click the file and select Share.

* Click Advanced

* Click the Change option for “Who has access”

* Select, Anyone with the link then, Save and Done.

* “Get Link” of the shared file.

* It will look something like this:

https://drive.google.com/open?id=0Bxf6OgYtsdUgRkgzMDB2RW9seGM

Unfortunately, you cannot directly use this url. Copy the id value from the above url and place it in the following format:

http://drive.google.com/uc?export=view&id={id}

So in this case, the url will be,

http://drive.google.com/uc?export=view&id=0Bxf6OgYtsdUgRkgzMDB2RW9seGM

That’s it. Use this new url anywhere i.e., in any external site and the image will get rendered directly from the Drive.

I strongly believe that Google should provide a get-Html kind of option where the above link should get generated automatically along with the IMG tag. As of now, it still remains an unfulfilled wish!

Share Blogs from Google Blogger/Websites to LinkedIn

Unfortunately, there’s no share button to directly share your blogs/website to LinkedIn. However, LinkedIn has solved the issue using javascript api. You have to just include the javascript api to your blogs template to make the share button available. Now there are few easy steps to do it.

Click on the Template option of your blogger. Then select EditHTML. Now you can see the HTML markup of your blog. Then locate where you want to display the LinkedIn button (You may not be able to search template using browser’s search option. In that case, copy & paste the entire template to the notepad and then do the searching). There are 3 options:-

• OR,  

•  OR, 

 My personal preference was the last option. This is the div which also contains the other share option like g+, twitter, & facebook. So your LinkedIn button will be displayed beside these buttons.

Once you have selected the appropriate div then, copy one of the following html and paste it inside one of your div (if you’re pasting the code inside the post-footer-line post-footer-line-1 div then, make sure that you’re doing it just before the closing tag or, just after the starting tag only. For the other 2 options copy/paste just after the markup):-

Vertical Count

<div style="float:right;padding:4px;">
http://platform.linkedin.com/in.js

 

Horizontal Count

<div style="float:right;padding:4px;">
http://platform.linkedin.com/in.js

No Count 

<div style="float:right;padding:4px;">
http://platform.linkedin.com/in.js

Do not forget to save the template without saving. Now you can see that the LinkedIn share button has appeared in your blog.