You have finally reached the stage where you can now easily create BlogSpot widgets and plugins using your blog feed. Blogger gadgets and templates are coded using Blogger JSON Feed API which provides you with enough information to extract any information from a blog's feed in JSON format. We have discussed the most detailed tutorial where you learnt the basics of parsing JSON in JavaScript. If you have followed all this tutorial series, you are ready to build your custom gadget and add it to either Blogger widget directory or add it to your client's sites. Today I will share a Data Sheet of all important JSON objects, arrays and elements that will help you easily locate important data using direct queries.
In programming all objects, elements or arrays have a relationship between each other that is managed in a tree like structure. Where there is a parent/Child or Master/slave or Tree/branch relationship or hierarchy. This is a standard approach to organize data so that it could easily be sorted, re-organized, easily located and updated. You blog feed is similarly written in both XML and JSON format, out of which the JSON is more easily accessible and prompt to browser requests.
Note: Click the Button below to see full list of topics under discussion.
Do first read:
Link Under study
We will discuss the json data extracted for the following post
http://www.mybloggertricks.com/2016/03/WordPress-Floating-Sharing-Bar.html
Sample Blogger JSON Link:
http://www.mybloggertricks.com/feeds/posts/default?alt=json
Copy the Code inside it and paste it here:
http://jsonviewer.stack.hu/
Switch to "Viewer" mode to see the code in tree-like structure. You can then easily expand each node to find data of your interest.
Below I have listed the Data Sheet for all JSON variables found in Blogger JSON Feed which you can use for direct access to important info related to your blog. You can find anything you want. You can run queries like:
- Find the number of total posts published so far
- Find the total list of all Labels used in the blog
- Find Blog Title and meta Description
- Find when was the blog last updated
- Find information related to blog admin and authors
- Find Post Published date and time
- Find labels used inside the post
- Access Post Title, Thumbnails used and Content written
- Find total count of comments published inside a post
- Extract short summary from your post content
- Extract YouTube thumbnails from within the post
- Find when was the post last edited
- Find who wrote the post
- Much more...
Note:
- Objects are denoted with curly braces i.e. { } and arrays with square brackets i.e. [ ].
- "i" refers to index number and "j" refers to sub-index number.
JSON FEED API
OBJECT | DESCRIPTION | DATA |
---|---|---|
JSON | Tells JSON version and encoding used. | version : "1.0" encoding : "UTF-8" |
feed | Primary object for blog feed. All blog information resides here. | refer JSON viewer.. |
json.feed.id.$t | Displays your blog ID and CMS platform | tag:blogger.com,1999:blog-8193278726666811965 |
json.feed.updated.$t | Shows last update of your blog | 2016-04-08T14:09:00.629+05:00 |
json.feed.category[ ] | Shows array of all Labels or Categories used in a blog | refer JSON viewer.. |
json.feed.category[i].term | Shows the ith category | In our case the [0] category index includes the label "SEO" |
json.feed.title.$t | Show blog title | My Blogger Tricks |
json.feed.subtitle.$t | Show blog description | Create your free blog today! Start blogging using our widgets, templates and SEO tips. |
json.feed.link[ ] | Includes info about 5 important links. Your blog URL, feed url in xml and json and an alternative link to your JSON feed URL using your blog Id. | An alternate link to our Blog Feed would be: "http://www.blogger.com/feeds/8193278726666811965/posts/default?alt=json" |
json.feed.author[ ] | Shows array of blog authors or admins. Includes your Google+ profile link, thumbnail link and author name. | refer JSON viewer.. |
json.feed.author[i].name.$t | Show the ith author's name. Depending on how many blog co-authors you have. | Mohammad Mustafa Ahmedzai |
json.feed.author[i].uri.$t | Show the ith author's Google+ profile link | https://plus.google.com/107381172453188253394 |
json.feed.author[i].gd$image.src | Show the ith author's profile Thumbnail link | //lh4.googleusercontent.com/-f8qSqNLtpBU/AAAAAAAAAAI/AAAAAAAAQeo/f7nmpa1_dQ0/s512-c/photo.jpg |
json.feed.generator | Gives info about Blogger platform version being used. | version : "7.00" uri : "http://www.blogger.com" $t : "Blogger" |
json.feed.openSearch$totalResults.$t | Show total posts count published so far | 1463 |
json.feed.openSearch$startIndex | Searching of items start from index number 1. | 1 |
json.feed.openSearch$itemsPerPage | Searching can be done for recent 25 items. For searching more than 25 items, we need to pass the attribute max-results inside the JSON feed URL. | 25 |
json.feed.entry[ ] | Shows array of all your blog posts. All details related to your posts will be listed inside it | refer JSON viewer.. |
json.feed.entry[i].id.$t | Shows the ith post ID | tag:blogger.com,1999:blog-8193278726666811965.post-2069161432742150449 |
json.feed.entry[i].title.$t | Shows the ith post title | WordPress Floating Sharing Bar With Animation |
json.feed.entry[i].published.$t | Shows time published of the ith post | 2016-03-31T18:41:00.000+05:00 |
json.feed.entry[i].updated.$t | Shows when the ith post is updated | 2016-04-08T08:46:07.907+05:00 |
json.feed.entry[i].category[] | Shows array of post categories/labels | refer JSON viewer.. |
json.feed.entry[i].category[j].term | Shows the jth category of the ith post | Widgets |
json.feed.entry[i].summary.$t | You will see this node only if you have set "Site Feed" length to "Short" or "Until Jump Break" in your Blogger dashboard settings. This node will show a short snippet description of your post content. The content before jump break. | Will display blog content excerpt here. |
json.feed.entry[i].content.$t | Show post content | Will display all Full post content here. |
json.feed.entry[i].link[ ] | Links array of a post. Includes the comment form link, feed link, post link and title. | refer JSON viewer.. |
json.feed.entry[i].link[j].href | Show the jth link of the ith post | http://www.mybloggertricks.com/2016/03/WordPress-Floating-Sharing-Bar.html |
json.feed.entry[i].link[j].title | Show the jth title of the ith post | WordPress Floating Sharing Bar With Animation |
json.feed.entry[i].author[] | Array of post authors | refer JSON viewer.. |
json.feed.entry[i].author[j].name.$t | Name of the jth author on the ith post | Mohammad Mustafa Ahmedzai |
json.feed.entry[i].author[j].uri.$t | Shows Profile Link of author profile | https://plus.google.com/107381172453188253394 |
json.feed.entry[i].author[j].gd$image.src | Image uri of the jth author profile on the ith post | //lh4.googleusercontent.com/-f8qSqNLtpBU/AAAAAAAAAAI/AAAAAAAAQeo/f7nmpa1_dQ0/s512-c/photo.jpg |
json.feed.entry[i].media$thumbnail.url | Shows thumbnail image on the ith post. in 72x72 resolution | https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfGYRxDqwPlRxnVCXbxyvGrNwb8oT16EJDWExIIFg2_pp5hltqiuBV9nejiEPsWXDFitvt-pdqYCzfeSlA1YtDF9uJ_cAGtVpFwQmN8pg6yhqoAoe5GmumfA0XCxBJUV8qF36MQ8SZO24/s72-c/image11.png?imgmax=800 |
json.feed.entry[i].thr$total.$t | Show total count of threaded comments | 3 |
This is was the most comprehensive Data sheet about blogger JSON Feed API. I hope this is self explanatory and may help you better understand the core basics of blogger widget development. In coming days, I will release two advance widgets for post feed and comment feed to give you a clear idea of what could be done using the data sheet above. Stay tuned. Do post your queries and feel free to ask for any help needed. Always here! =)
If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »
Can I do guest posting for this website?
ReplyDeleteBuddy we have stopped accepting guests posts since a year. We may allow it later this year when we feel we need help in posting
Deletemedia$thumbnail shows the first images only, is there a way to use the second image instead?
ReplyDeleteThanks for the detailed information!
Hi Micha,
Deletemedia$thumbnail is an object and not an array so by mentioning an index [2] wont work. There is a easy work around which I already shared in this part of the series:
Display Posts by Label with 3rd Party Images
Simple replace this part of the code:
ListImage = json.feed.entry[i].content.$t.match(/src=(.+?[\.jpg|\.gif|\.png]")/)[1]
with this
ListImage = json.feed.entry[i].content.$t.match(/src=(.+?[\.jpg|\.gif|\.png]")/)[2]
What this code does that it will scan your entire post for images. It will pick all images from inside the post. You can then choose which image to display by mentioning the image index inside [*]
Let me know if you needed more help. I am glad you are trying the code and actually trying to learn by implementing. :)
Hey Mustafa, I wanted to know is there a way to know when was the blog last updated without getting rest huge data along in response. Though "max-result=1" helps but still "category" in response is huge and is responsible for large size of response. How to solve this issue.
ReplyDeletenice
ReplyDelete