Friday, September 21, 2012

Hacking Blogger Dynamic Views to support custom widgets

Blogger Dynamic Views are cool, but they support only few official widgets. Today we're hacking dynamic views to support any custom widgets (using Graddit widget as an example, of course).

Disclaimer. This is dirty hacking, it can stop working at any time and can even negatively affect behaviour of your blog. You were warned.

So, the goal is to make widgets appear when user expands a post in any view (Classic, Flipcard, Magazine, Mosaic, Sidebar, Snapshot and Timeline).

First, open Blogger dashboard and go to Template tab; click Edit HTML and then Proceed button.
For dynamic views we can't change a part of the template that displays posts - it will not work. But we still can change head section. Add the following lines to <head>...</head>:

<link href='http://static.graddit.com/css/graddit.css' rel='stylesheet' type='text/css'/>
<script src='http://static.graddit.com/js/graddit-extras.js' type='text/javascript'/>

These are styles and some cool scripts. Actually, we will need only one function called gradditBloggerDynamicViewsRatingsHack. Now go to the very bottom of the template and add this call just before closing </body> tag:

<script type='text/javascript'>setTimeout(function(){gradditBloggerDynamicViewsRatingsHack();},1000);</script>

Or this if you want also to display related posts (You Might Like widget):

<script type='text/javascript'>setTimeout(function(){gradditBloggerDynamicViewsRatingsHack(true);},1000);</script>

Now save template and close editor. Click Customize button to add some styles (without them stars will not show properly). Select Advanced and then click Add CSS. Add this:

.article .article-content .ffbs_rate img {
  padding: 0;
  border: 0;
  border-image: none;
  -webkit-border-image: none;
  vertical-align: middle;
}

.article .article-content .ffbs_stats {
  font-size: 10px;
}

.article .article-content a {
  border: 0;
}

Click Apply to Blog.

Now it should be working, open your blog and try! Here's live demo: http://ffbs-widgets.blogspot.com/.
Did it work for you?
at

12 comments:

  1. FluksJanuary 7, 2013 at 1:54 PM

    I just finished implementing dynamic views on my website and the codes above work great!

    By the way, somehow the rating part looks different:
    - "Average rating" is missing (see for an example: http://www.thefluks.com/2013/01/vid-top-10-table-tennis-rallies-in-2012.html), could it be that the CSS part is outdated?

    I got two additional questions, I hope you can help me out again!
    1. How can I make the rating go right under the title? (position of the rating)
    2. Is it possible to show the average rating again and the lines "rate this post"?

    Thanks in advance!

    Greetings,

    TheFluks

    ReplyDelete
    Replies
    1. ffbsJanuary 8, 2013 at 6:27 AM

      I added average rating and "Rate this post:" label to the JS function. If you want to change something you'll have to take that function (gradditBloggerDynamicViewsRatingsHack from graddit-extras.js) and make your own implementation.

      P.S. if you still don't see the average and label that means your browser cached graddit-extras.js, you need to refresh the page (Ctrl+R), possibly few times.

      Delete
    2. FluksJanuary 10, 2013 at 1:19 PM

      That worked!
      looks good on my blog :D

      It is kinda weird direct links are not working, is there maybe some kind of work around for that?

      Could it be possible to add the ratings to the "tops"?
      It would also be cool if you can add this to RSS feeds of the latest posts to let users rate external websites! :D

      Just some random ideas, if you got some ideas how I could implement this, please let me know!

      Greets,

      TheFluks

      Delete
    3. ffbsJanuary 10, 2013 at 1:37 PM

      > It is kinda weird direct links are not working, is there maybe some kind of work around for that?
      I remember there was an issue with that, but I can't recall what exactly; it wasn't that simple.

      > Could it be possible to add the ratings to the "tops"?
      Just to display current rating of each record? It's currently possible with tops options, it will display as a number, but I'm planning to change it to stars in future.

      Delete
  2. Amwrit PuriJanuary 9, 2013 at 7:19 AM

    Didn't work :/

    ReplyDelete
    Replies
    1. ffbsJanuary 9, 2013 at 10:16 AM

      Because it's a dirty hack ;)
      I checked it yesterday on some blog, it was somewhat working. And still working on my test blog (expand a post): http://ffbs-widgets.blogspot.com/
      Things change in dynamic template, also it was not working on all views initially. Try another view, try to expand a post by clicking on it (not accessing by direct link). Also, you can use JS function as a reference to create your own.

      Delete
  3. xthoMarch 1, 2013 at 2:37 PM

    Hey mand, I'm really itnerested in being able to add custom widgets to Blogger, specifically the SoundCloud widget to the header or the sidebar, whichever is easier. However, I can't see yours working on Chrome 25. Does it depend on the browser?

    PLease let me know

    my email: cristhopper@gmail.com

    Cristhopper

    ReplyDelete
    Replies
    1. ffbsMarch 1, 2013 at 3:09 PM

      It may or may not be dependent ob browser - you never know with JS. However, in this particular case widgets just stopped working few months ago, my guess is Google changed HTML and as this solution was relying on document structure it broke. If you are familiar with JS you can implement it, better use jQuery to make it easier; use my sources as reference.

      Delete
    2. FluksApril 6, 2013 at 1:29 PM

      Too bad they stopped working.
      Are you planning to update your hack? Is it possible to get it to work again?
      Thanks in advance!

      Delete
    3. ffbsApril 7, 2013 at 6:47 AM

      It's definitely possible, but I was not planning to update it anytime soon. Because everytime you update it, Google updates Blogger too and it stops working. And see how many people interested in this feature - 3 comments for 6 months.

      Delete
  4. AnonymousJanuary 30, 2014 at 12:39 PM

    I am interested in working HTML widget under dynamic templates, because it is a only way i know to add paypal button to my project.
    http://trackerbase.blogspot.com/

    As i understand solution above no longer working?
    Any ideas?

    ReplyDelete
    Replies
    1. ffbsJanuary 31, 2014 at 8:24 AM

      The reason why it's not working (I guess) is because Blogger constantly changing dynamic templates markup. Is that possible to make it working again? I think yes, but I was not planning to support this.

      Delete