Tuesday, September 25, 2012

Custom and Two-Domain Pin It Buttons

This post was written by my husband, N. I hope you find it useful! -Georgia

This post has been pinned (loading...) times.

I know this is a bit of a diversion from what Georgia usually writes about, so regular readers will probably just skip over this post. That's ok! This post is for bloggers (or website owners) who want to do something special with the "Pin It" button from Pinterest. Just think of it as a different kind of DIY....

Lately, Pinterest has been our top source of traffic. As I'm writing this, the most-pinned post on MoreLikeHome.net is the Outdoor Sectional. As of RIGHT NOW, it has been pinned 65,000 times. Pretty cool, right? For two reasons...first of all, because that's a lot of pins, secondly because that number is dynamic. Go ahead, refresh the page and see if it changes (it may take a few minutes for another person to pin it, or you could pin it yourself).

I've come up with a way to customize the output of the Pin It button in a few ways. First, as you saw above, it can output as simple text. You can insert this text anywhere, opening the possibility of making any kind of custom button you can think of with the number attached. Second, the number of pins can output as a complete number instead of the classic "65k+" output that is the only option Pinterest gives. (The "Vertical" layout is fixed-width, so it shows the full number until it passes 99,999, then it reverts to 100K+)

The number of pins in any post on MoreLikeHome.net is actually a composite of two numbers...pins from www.morelikehome.net and pins from morelikehome.blogspot.com. As the blog grew, we decided it would look more professional to have a custom domain, and changing domains meant losing all those pins. If we wanted the Pin It button to show the full count of pins, we would have to do something like this, showing both:

when I want it to say the total 

Another problem with the standard pin it button is it doesn't combine the pin counts associated with your site WITH and WITHOUT the leading "www". As an example, I checked one of our favorite blogs, ana-white.com, because they have a pin it button that says 47K+.  When I tested it both ways I found:

         ana-white.com/ - 47,767 pins
www.ana-white.com/ - 595 pins

It's not a lot, but the button should say 48K+.

Pinterest doesn't offer a solution for either of these problems, and they have no meaningful customer service, so I came up with a solution myself. And you're welcome to use it!  Here's how:


Note: This will only work if you use the standard "Pin It" button from Pinterest or something formatted the same way.

The first thing you have to do is choose which format you want for your count number. The choices are:

Classic:           and Full Number: 

If you choose classic, all your buttons will look exactly how they do now, you will just gain the option to insert the 64K+ anywhere you want and the option to combine two domains.

Secondly you will have to choose if will you be combining two domains. This will only work if they both have the exact same permalinks after the different domains. For instance, when we switched from morelikehome.blogspot.com to www.morelikehome.net, all the links carried over:

http://morelikehome.blogspot.com/2011/12/salt-dough-gift-tags.html
   became:
       http://www.morelikehome.net/2011/12/salt-dough-gift-tags.html

See? Exactly the same link after the changed domain name. This is how it usually works when you change domains, otherwise any links to the old domain are pretty much worthless.

After making those decisions, you simply replace the Pinterest header code:

<script src="//assets.pinterest.com/js/pinit.js" type="text/javascript"></script>

with my code:

Click to display code for single domain, classic format.

Click to display code for single domain, full number format.

Click to display code for two-domain, classic format.

Click to display code for two-domain, full number format.


ALSO: If you don't have the following line (or a similar jquery include) in your header already:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

You need to add that above the new Pinterest code.

So that just leaves the text-only option.  Once the header code is replaced, creating a text-only pin count is easy. Simply get the Pin It code just like you always do from the Pinterest goodies page, and change count-layout="horizontal" to count-layout="number". I also suggest removing the placeholder image (<img border="0" src="//assets.pinterest.com/images/PinExt.png" title="Pin It" />) and replacing it with "(loading)".

So that's all!  Are you willing to give it a try? You can always switch back or try the other format if you don't love it.... Leave a comment here if you use the code or if you have any problems with it. And if you consider my time valuable (debatable), consider crediting MoreLikeHome.net in some way on your page or link back to this post (please don't just copy and paste my instructions, that's just wrong).  Enjoy!


*Code reverse-engineered from scripts belonging to Pinterest.com with help from this script*

7 comments:

  1. Thanks so much! My counts weren't displaying correctly until I updated my header code with yours. I really appreciate you taking the time to post this!

    ReplyDelete
    Replies
    1. I'm so glad it helped! My hubs is great at this kind of thing, I would be totally lost on my own. ;)

      Delete
  2. im a code dummie- just made the switch to a .com domain name from blogger. I am needing a little more help with this. Can you be a little more specific about all that i need to replace with my info? I made just 2 changes is that correct?

    ReplyDelete
    Replies
    1. In your case, you will need to paste the two-domain code in your header, replacing the old Pinterest code. Then make two replacements: Replace "http://www.morelikehome.net/" with your new .com address and replace "http://morelikehome.blogspot.com/" with your old blogspot address. Make sure you have the extra "jquery" code (mentioned after all the code options) somewhere in your header. If that doesn't work, let me know your new site address and I'll take a look!

      Delete
    2. still no luck, I think im doing something wrong.

      Delete
    3. src='http://projects.morelikehome.net/code/pinit-dual-classic.js' type='text/javas'>
      < type='text/java'>
      // Custom Pinterest code created by www.morelikehome.net
      $(document).ready(function() {

      var domainname1 = "http://www.littleonceboutique.com/";
      var domainname2 = "http://littleonceboutique.blogspot.com/";

      var d1 = encodeURIComponent(domainname1);
      var d2 = encodeURIComponent(domainname2);
      loadPinterest(d1,d2);
      });


      This is the code I used. I deleted or "tweaked" the "scrpt" so I could message you this. My site is www.littleonceboutique.com.

      Delete
    4. You're trying to use more than one script that work against each other. I sent you a Facebook message, hopefully my solution will work for you.

      Delete