Search code examples
javascripttumblrblogger

Tumblr custom share button on Blogger - open pop up window


I am trying to create a share button from blogger to tumblr under my posts. Using advanced options I almost achieved my goal but instead of opening a new window the code is using the same tab as the shared post and hangs on the last second when it should close the tab.

How to alter the code to open a nice pop up?

<!-- Put this tag wherever you want your button to appear -->
<span id="tumblr_button_abc123"></span>

<!-- Set these variables wherever convenient -->
<script type="text/javascript">
    var tumblr_link_url = "http://www.example.com/permalink/my-article";
    var tumblr_link_name = "My Awesome Article";
    var tumblr_link_description = "Lorem ipsum...";
</script>

<!-- Put this code at the bottom of your page -->
<script type="text/javascript">
    var tumblr_button = document.createElement("a");
    tumblr_button.setAttribute("href", "http://www.tumblr.com/share/link?url=" + encodeURIComponent(tumblr_link_url) + "&name=" + encodeURIComponent(tumblr_link_name) + "&description=" + encodeURIComponent(tumblr_link_description));
    tumblr_button.setAttribute("title", "Share on Tumblr");
    tumblr_button.setAttribute("style", "display:inline-block; text-indent:-9999px; overflow:hidden; width:20px; height:20px; background:url('http://platform.tumblr.com/v1/share_4.png') top left no-repeat transparent;");
    tumblr_button.innerHTML = "Share on Tumblr";
    document.getElementById("tumblr_button_abc123").appendChild(tumblr_button);
</script>

Solution

  • You could change the link target:

    tumblr_button.setAttribute("target", "_blank");
    

    But if you want to control the dimensions (and guarantee it doesn't render in new tab instead), you'll want to do something more like:

    tumblr_button.setAttribute("onclick", "window.open(this.href, 'mywin','left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;");
    

    The latter solution is borrowed from here, but you'll probably also want to check out this IE compatibility issue.