It would probably be easier to use another social sharing plugin for the buttons in that case. NGFB Open Graph+ uses the javascript provided by each social website — embedded within those javascript files are links to various button images. The only exception is Pinterest, which has a URL to an image that could be changed — all the other images are part of the content generated by each javascript.
There are also some legal implications as well — as far as I know, most of the javascript code is provided with usage terms that specifically prohibit the re-branding or modification of the buttons.
js.
BTW, here’s a cute effect using just CSS:
.ngfb-buttons > div {
filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
opacity:0.3;
}
.ngfb-buttons > div:hover {
filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0'/></filter></svg>#grayscale");
filter: grayscale(0%);
-moz-filter: grayscale(0%);
-ms-filter: grayscale(0%);
-o-filter: grayscale(0%);
filter: none ; /* IE6-9 */
-webkit-filter: grayscale(0%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
opacity:1.0;
}
js.
Thread Starter
Manege
(@manege)
thanks for the reply, right now I’m using another plugin for the share buttons but the problem is, for example when I click on the pinterest button it opens a new window where I can choose the picture to be pinned. If I click on the pinterest button of your plugin then a window opens that allready has the right image and also the description.
I am not sure but I think it has to be this way to make sure it get pinned as a rich pin. I just can’t live with the look of the buttons…
The social share plugin I’m using is “simple share buttons adder” if anyone can recommend a different plugin that can handle the meta tags and have custom icons I would appreciate it very much. Thanks.
@ Jean-Sebastian, once again thank you for your support.
Meta tags and social buttons are independent of each other. Have a look at this video:
https://www.youtube.com/watch?v=cBmXMN0mE7M
All buttons should only share the URL, nothing more (no title, description, etc). The Pinterest and Tumblr buttons are the exception — they need a little more info. The strength of NGFB Open Graph+ is the information it builds for the meta tags, which comes in handy for those buttons as well, so although they may not look as slick as some, they do work pretty well. 😉
The best I could do is add a custom URL for the Pinterest button in the next version. Besides that, any Pinterest button that shares the current webpage URL should turn into a Rich Pin (if you also use NGFB Open Graph+ and your website is approved for Rich Pins).
js.
FYI – The current DEV version at http://downloads.wordpress.org/plugin/nextgen-facebook.zip will allow you to change the Pin button image.
js.
Thread Starter
Manege
(@manege)
Thanks, for now I think I wait until my site is approved by pinterest and twitter and then start to play around with the buttons.
Thanks,
Rainer
Thread Starter
Manege
(@manege)
my website is now approved by pinterest but my products still not showing up as rich pins on pinterest, what do I wrong?
URL to an example Post/Page?
js.
Thread Starter
Manege
(@manege)
Thread Starter
Manege
(@manege)
I have no idea what I am doing wrong…
Expectations? 😉
The small preview does not show the rich details, but click on the preview to expand the pin, and the rich details should be there — they were for me. 😉
js.
Thread Starter
Manege
(@manege)
now it works, thank you for your help
JS, Thanks so much for the code you included above. It did exactly what I came here to find out, which is if there was a way to make the “loud” social buttons much more muted until a mouse over. My theme is all dark greys, and I just couldn’t stand the light colored buttons jumping off the page, yet I wanted to include the share buttons. Your add on code works perfectly to achieve this. I wasn’t even sure where to add it but just assumed tacking it on to the end of the “Buttons Style” included in Open Graph would do the trick and it did. If only all tweaks were this easy for web novices to implement.:-)
Lol. 🙂 No problem. And I know what you mean – this is one of my websites: http://underwaterfocus.com/photo/20070504-143319-jsmoriss-9651 😉
js.
