[META] How can we add BrewPoll's submission badges to questions?

Question

BrewPoll is "A Place for Sharing Beer Brewing Articles, Tips and News - Where Every Vote Counts!" It's a submission site for brewing articles sponsored by BeerSmith. Their RSS feed has a steady trickle of posts and it's a good way to reach homebrewers. While it's not appropriate to submit every question to BrewPoll our wiki articles are great candidates.

Submitting an article is easy enough, but the power comes from having their badge on your article where you can vote it up on BrewPoll (different from BrewAdvice voting). The method involves adding an iFrame to the page which requests the badge. Since we (rightfully) can't do this through the editor we need an ingenious method to get their content in our posts.

I added it to my blogspot blog after a little tinkering, but they allow javascript. Been pondering the problem of getting the badge over here, but came up blank. Put on your HTML & javascript hat and think with me.

How can we get BrewPoll's badges on our articles?

Answer 1

Here's some working javascript without the dependency on jquery. It replaces all occurrences of {brewpoll} in the question only with the BrewPoll iFrame. It is a global, case-insensitive search. Just put {brewpoll} in your question where you want to see the box. Don't forget to submit the article there.

<script type="text/javascript">
   window.onload = function ()
   {  // Use window.onload so the question is all there
      var my_url = document.URL.replace(/\/?[0-9]*#.*/, ""); // Chop off links to answers
      var brewpoll = '<iframe ' +
                        'frameborder="0" ' +
                        'height="71" ' +
                        'name="brewadvice_plug" ' +
                        'scrolling="no" ' +
                        'src="http://www.brewpoll.com/evb/url.php?url=' + my_url + '" ' +
                        'width="54" ' +
                     '></iframe>';
      var regexp = /{brewpoll}/gi;
      var question = document.getElementById("question");  // Only apply to the question
      question.innerHTML = question.innerHTML.replace( regexp, brewpoll );  // innerHTML is bad, mmmkay?
   }
</script>

Answer 2

We could have some sort of flag that then loads the iFrame. For example, you would write something like [BrewPoll-IDGoesHere], and we could use some js regex to replace that with the iframe on load.

---

Edit. Here is my javascript (jquery) solution. For you techies.

I think the tag will be something like ~~brewpoll=[TITLE]~~

So that's doublde tilde (~) brewpoll = page title double tilde

Example: ~~brewpolll=Brew_Advice_-_Knowledge_Sharing_Experiment~~

In the example above, make sure you spell brewpoll with two L's, not three. I had to do that otherwise it would turn that into a voting link.

We can use a different tag than the double tilde, just let me know your suggestions.

Here is the code. I realize jquery is not required here.

<script type="text/javascript" src="jquery.1.4.2.min.js"></script>
<script type="text/javascript">
    function regit(){

        var pattern = /~~brewpoll=([\w]{1,})~~/i
        var new_page = $( 'body' ).html()
        var iframe1 = "<iframe src='http://www.brewpoll.com/evb/url.php?url="
        var iframe2 = "' height='71' width='54' scrolling='no' frameborder='0'></iframe>"

        while( pattern.test( new_page ) )
            new_page = new_page.replace( pattern, iframe1 + "$1" + iframe2)

        $( 'body' ).html( new_page )

    } // regit

    $( document ).ready(
        function(){
            regit()
        } // function
    ) // ready

</script>

This does throw a sweet error in Safari, which I may or may not care about:

Unsafe JavaScript attempt to access frame with URL http://pjhoberman.com/dev/js_regex.html from frame with URL http://www.brewpoll.com/evb/url.php?url=Brewing_News_2009_reader_survey. Domains, protocols and ports must match.

Answer 3

This is the live answer. It works. It uses jQuery, but we're already including it for other stuff, so that's fine. It finds the question, and then in that, finds the content itself.

Here is the code:

<script type="text/javascript" src="jquery.1.4.2.min.js"></script>
<script type="text/javascript">
   window.onload = function ()
   {  // Use window.onload so the question is all there
      var my_url = document.URL.replace(/\/?[0-9]*#.*/, ""); // Chop off links to answers
      var brewpoll = '<iframe ' +
         'frameborder="0" ' +
         'height="71" ' +
         'name="brewadvice_plug" ' +
         'scrolling="no" ' +
         'src="http://www.brewpoll.com/evb/url.php?url=' + my_url + '" ' +
         'width="54" ' +
         '></iframe>';
      var regexp = /{brewpoll}/gi;

  $( '#question .post-text' )
        .html( 
           $( '#question .post-text' ).html().replace( regexp, brewpoll ) 
         )

   }
 </script>

Answer 4

How about adding it to all questions? I noticed that the .votecell td is the same width as the iframe, so it should fit right under the vote/favorite div. There would be no need to add {brewpoll} to your post. Would this confuse people too much?

I noticed that if you change the post's title after submitting it to Brew Poll it loses your submission. That's because Brew Advice's URLs change with the title. This new code chops off everything after the post number, resulting in a URL that still gets to the question, but eliminates parts that change. https://homebrew.stackexchange.com/questions/864

Depends on jQuery.

<script type="text/javascript">
   $(document).ready(function() {
      var my_url = escape( document.URL.replace( /(\/questions\/[0-9]+).*/i, "$1" ) );
      var brewpoll = '<iframe ' +
                        'frameborder="0" ' +
                        'height="71" ' +
                        'name="brewadvice_plug" ' +
                        'scrolling="no" ' +
                        'src="http://www.brewpoll.com/evb/url.php?url=' + my_url + '" ' +
                        'width="54" ' +
                        '></iframe>';
   $("#question .votecell:first").append(brewpoll);
   } );
</script>

Test it out, let me know.