I am wondering about the default Pinterest image and description for the social buttons. I added the pin it button with my facebook and twitter share buttons, but when anyone clicks the pin button it doesn't have an image set to show on pinterest. Is there an easy way to set the images to something, preferably without having the image on the page itself. Also being able to set the default description would be nice. I might have missed something but I didn't see anything when I searched for a solution. The best I could find is that I can make a custom url to link to that will include all that data, I just don't know how to replace the Pinterest url that is automaticlly generated by the theme.
Thanks for the responce. I think I have all my OG meta tags set up right for it (Using SEO Yoast), but the button isn't pulling the data for the link. Maybe you can take a look at it: http://sneakycards.net/ I did try a few other plugins to no avail. I am loving this theme, it is really nice to use and I have only had to work around a few small things like this which is a lot better than most themes.
Hey Cody - my apologies I forgot that Pinterest functions a bit differently than the other social sharing buttons. If you open the init.js file and search for "function pinterestShare" you'll end up at the right place:
It doesn't use the OG tags, it only picks content from the page but you could in theory modify it to pick any content from the page - even hidden content that you set in a given div that you use css to hide from visibility.
Yey! That did the trick. I am pretty rubbish at Javascript but I was able to get it going. Thanks for your help! I am so happy with how my site has turned out. :)
I'm having the same issue...on my homepage the pinterest button is not selecting any images...on my porfolio page it is...how does it pick the image...i need a fix for homepage.
I am wondering about the default Pinterest image and description for the social buttons. I added the pin it button with my facebook and twitter share buttons, but when anyone clicks the pin button it doesn't have an image set to show on pinterest. Is there an easy way to set the images to something, preferably without having the image on the page itself. Also being able to set the default description would be nice. I might have missed something but I didn't see anything when I searched for a solution. The best I could find is that I can make a custom url to link to that will include all that data, I just don't know how to replace the Pinterest url that is automaticlly generated by the theme.
Thanks so much, you are awesome!
Hey Cody!
You could try using a plugin like this to define the data that will be used by social networking sites: http://wordpress.org/plugins/wp-open-graph/
Cheers :)
Thanks for the responce. I think I have all my OG meta tags set up right for it (Using SEO Yoast), but the button isn't pulling the data for the link. Maybe you can take a look at it: http://sneakycards.net/ I did try a few other plugins to no avail. I am loving this theme, it is really nice to use and I have only had to work around a few small things like this which is a lot better than most themes.
My pin button is opening a window with this url:
http://www.pinterest.com/pin/create/button/?url=http://sneakycards.net/&media=undefined&description=
I need it to open a url like this:
http://www.pinterest.com/pin/create/button/?url=http://sneakycards.net/&media=http://sneakycards.net/wp-content/uploads/2014/01/pinit.png&description=Sneaky%20Cards%20is%20designed%20to%20encourage%2C%20inspire%2C%20or%20facilitate%20playful%20interactions.%20Breaking%20up%20the%20tedium%20of%20everyday%20life%2C%20with%20small%20entertaining%20objectives.%20
Hey Cody - my apologies I forgot that Pinterest functions a bit differently than the other social sharing buttons. If you open the init.js file and search for "function pinterestShare" you'll end up at the right place:
function pinterestShare(){ var $sharingImg = ($('.single-portfolio').length > 0 && $('div[data-featured-img]').attr('data-featured-img') != 'empty' ) ? $('div[data-featured-img]').attr('data-featured-img') : $('#post-area img').first().attr('src'); window.open( 'http://pinterest.com/pin/create/button/?url='+window.location+'&media='+$sharingImg+'&description='+$('.section-title h1').text(), "pinterestWindow", "height=640,width=660,resizable=0,toolbar=0,menubar=0,status=0,location=0,scrollbars=0" ) return false; }It doesn't use the OG tags, it only picks content from the page but you could in theory modify it to pick any content from the page - even hidden content that you set in a given div that you use css to hide from visibility.
Hope that helps :)
Yey! That did the trick. I am pretty rubbish at Javascript but I was able to get it going. Thanks for your help! I am so happy with how my site has turned out. :)
I'm having the same issue...on my homepage the pinterest button is not selecting any images...on my porfolio page it is...how does it pick the image...i need a fix for homepage.
Hey Ed,
open the init.js file, locate this function:
function pinterestShare(){ var $sharingImg = ($('.single-portfolio').length > 0 && $('div[data-featured-img]').attr('data-featured-img') != 'empty' ) ? $('div[data-featured-img]').attr('data-featured-img') : $('#post-area img').first().attr('src'); window.open( 'http://pinterest.com/pin/create/button/?url='+window.location+'&media='+$sharingImg+'&description='+$('.section-title h1').text(), "pinterestWindow", "height=640,width=660,resizable=0,toolbar=0,menubar=0,status=0,location=0,scrollbars=0" ) return false; }and change it to be:
function pinterestShare(){ var $sharingImg = ($('.single-portfolio').length > 0 && $('div[data-featured-img]').attr('data-featured-img') != 'empty' ) ? $('div[data-featured-img]').attr('data-featured-img') : $('.main-content img').first().attr('src'); window.open( 'http://pinterest.com/pin/create/button/?url='+window.location+'&media='+$sharingImg+'&description='+$('.section-title h1').text(), "pinterestWindow", "height=640,width=660,resizable=0,toolbar=0,menubar=0,status=0,location=0,scrollbars=0" ) return false; }Cheers :)