Community Forums › Forums › Archived Forums › Showcase and Feedback › MooseNotes.com
Tagged: naked social share buttons
- This topic has 14 replies, 2 voices, and was last updated 8 years, 5 months ago by Carla the Moose.
-
AuthorPosts
-
November 1, 2015 at 6:49 pm #169840Carla the MooseMember
Hi folks!
A few minutes shy of midnight on Halloween, I pressed the publish button and launched my website MooseNotes.com.
I have a list of things I need to adjust. Specifically, I'm having some problems with Google Fonts loading properly. I'm also coding my own social share icons (with help from a good tutorial) and intend to gently integrate them. The archives page hasn't been created yet, but for the most part I'm done.
Please take a look, click around, and let me know how it goes.
I'm using three Google Fonts as my primary design elements. I love the look of a sans-serif font, but since this is an essays blog, I found it to be rather tiresome after the first couple of paragraphs. I chose Lora for the primary font and Ubuntu for titles, nav links, headers, etc. It's Ubuntu that doesn't always load; instead I end up with the default serif, which isn't pretty.
Anyway, I do hope to receive some feedback. Thank you!!
Carla :o)
November 2, 2015 at 5:59 am #169850carasmoParticipantNice!
Re: share buttons. I LOVE https://wordpress.org/plugins/naked-social-share/ - clean, fast loading share post/page buttons, that I styled myself. I hooked them to a couple locations:
/** ============================================================ Add Naked Share Buttons Before Content ============================================================*/ add_action( 'genesis_before_content', 'cab_social_header', 15 ); function cab_social_header() { echo '<div class="social-header hidden-print">'; echo '<a title="print page" class="twbstooltip" href="javascript:window.print()"><span class="fa fa-print"></span></a>'; ''.naked_social_share_buttons().''; echo '</div>'; } /** ============================================================ Add Naked Share Buttons After Content ============================================================*/ add_action( 'genesis_after_content', 'cab_naked_social', 10 ); function cab_naked_social () { echo '<div class="social-footer hidden-print">'; ''.naked_social_share_buttons().''; echo '</div>'; }
And styled them to fit where I wanted: to the right of the
.content-sidebar-wrap
and just above the navigation on the bottom.
November 2, 2015 at 9:44 am #169864Carla the MooseMemberWow, truly stellar website. Gorgeous design, so tasteful and elegant. I'm impressed!
I'll definitely take a look at this plugin. Originally, at the bottom of my post, I had "Share this Nature Notes essay on" and a Facebook and Twitter icon I created myself. But the Facebook link stopped working, and the workaround wasn't straight forward.
That'd be great if I can get this plugin to work for me.
:o)
November 2, 2015 at 10:33 am #169881Carla the MooseMemberWhich five social share icons do you feel are most used by site visitors?
Facebook, Twitter, Instagram and Pinterest for photos (but my site only rarely will have images in posts) ... what else would you recommend?
Thank you.
November 2, 2015 at 10:51 am #169893carasmoParticipantFacebook, Twitter, LinkedIn, Pinterest, Google +
http://www.ebizmba.com/articles/social-networking-websites
November 2, 2015 at 11:26 am #169894Carla the MooseMemberThank you. Those are the five I was using before I adjusted my design. I've never seen a ranking article like the one you linked to. Much appreciated!
November 2, 2015 at 10:11 pm #169962Carla the MooseMembercarasmo, I just finished creating social share icons with the plugin you recommended. She did a great job with her plugin; it's really streamlined and easy to work with.
Please take a look and let me know what you think.
Carla
November 3, 2015 at 5:21 am #169972carasmoParticipantDig it! Nice they match your design!
Now, I am using the Yoast SEO plugin (free) because it's better and more updated than Genesis, plus I can specify an image (even one that's not being used) and I can change the text that shows up on the networks, if I want.
When you use Yoast, Genesis will turn off their SEO, and you'll see new stuff, one of them is the Social tab, this is very key.
These are private posts.
You can test open graph https://developers.facebook.com/tools/debug/
1. Load Yoast
https://developers.facebook.com/docs/sharing/best-practices#images
https://developers.facebook.com/docs/sharing/best-practices
November 3, 2015 at 12:24 pm #170042Carla the MooseMemberI have the Yoast plugin installed, but I haven't spent any time learning about it. Thanks so much! :o)
The developer of the plugin you recommended took a look at my Facebook share button and used the same debugging tool you linked to. She noticed it was caching an old error message. When she cleared it for me, the button now grabs the moose image from the footer, the post title and an excerpt. I'm so happy it's fixed.
Pinterest, though, throws an error message at anyone who tries to share a blog post that doesn't contain an image. She said this is on their side of things and I would need to bring this to their attention. Sometimes I'll have drawings or photos in a post, but not always. If someone tries to share a blog post that doesn't include an image, they should be shown a polite message that says, "Sorry, but shared content must include an image," so folks aren't confused.
Now, I'm off to explore Yoast!
November 3, 2015 at 12:49 pm #170050carasmoParticipantYoast gives you the ability assign an image even if you have no image in the post, that's what I Iike about it. I wish it had the ability to have a fallback image -- I wrote one for another CMS I use and it works great, if there is an image then show it if not show this one...having a hard time translating some of my skills on WordPress.
I know how to add a fallback image that will take over any Yoast settings -- whether it's loaded before or after in the priority (below is 15 - after, but when it's 5 [before] it still does the same thing). I see both on the scrape but only the fallback posts and that's not what I want. In your case, if you don't have an image for most of your posts, you can add one for at least Facebook and Pinterest -- they both use og.
https://developers.pinterest.com/docs/rich-pins/articles/
goes in functions.php
/** ============================================================ - THEME HEAD : Facebook/Pinterest image change the path to yours ============================================================*/ add_action( 'genesis_meta', 'cab_facebook_fallback', 15 ); function cab_facebook_fallback() { echo '<meta property="og:image" content="'.get_site_url().'/wp-content/uploads/2015/10/fb.jpg" />'; }
November 3, 2015 at 2:07 pm #170067Carla the MooseMemberIs this the path: wp-content/uploads/2? So change that to wherever I'd upload a fallback image?
It's the og stuff and something else I can't recall that confused me, and that's why I pulled down the plugin I created for my website.
That'd be awesome if I can get Pinterest to grab the moose image in the footer like Facebook is now doing and use that as a fallback image.
November 3, 2015 at 2:12 pm #170069carasmoParticipantthis part
/wp-content/uploads/2015/10/fb.jpg
When you load an image in the media library, click on it and in the left it will give you the full path, you don't need the entire path just the one relative to the root because get_site_url does the first part for you.
November 3, 2015 at 2:30 pm #170072Carla the MooseMemberI added the function and a fallback image, but it doesn't seem to be working. I'm not sure how to do it, but maybe I need to clear a cache? I did for my site, but the plugin developer did it for my Facebook cache and got the share button working.
November 3, 2015 at 3:02 pm #170075carasmoParticipantI see it. Have you shared the page in the past. Right now the facebook dev tools are slow or not working.
November 3, 2015 at 3:14 pm #170077Carla the MooseMemberHa, some nice lessons going on here. :o)
I uploaded a 500x500px moose to the library. Then I added him to the Yoast SEO social tab, and a monster sized moose showed up, full width, above the post title and excerpt. I wanted a teeny moose to the left of the shared stuff.
It was stuck and wouldn't go away. So I removed the image from Yoast. Then I resized the moose to 245x245px and tried again, and the monster moose persisted.
So once again I removed it from Yoast. Then I realized, I'll bet it's a Facebook cache thing like what was happening yesterday. So I followed your debugger link and tried refreshing the scrape (weird word). I did it so many times I got a warning from Facebook.
I was still seeing the monster moose. Then I realized, I still had your function in place. It must be working, but when you resize an image from within WordPress's media dash, it gives you a new file name. (I'll resize in my computer and re-upload later). When I updated the path in your function and scraped again, the bitty moose showed up.
So your function is working for Facebook, not for Pinterest.
Whew!! :o)
-
AuthorPosts
- The forum ‘Showcase and Feedback’ is closed to new topics and replies.