Social Sharing Icons/Buttons Without Needing HTTP Requests

CCarter

CCarter

Final Boss ®
Moderator
BuSo Pro
Boot Camp
Digital Strategist
Joined
Sep 15, 2014
Messages
4,358
Likes
8,866
Degree
8
Alright, so I do mention at times that I create social icons for sharing without needing to have each page ping home to the respective network - meaning less https requests.

Well here is the code I utilize for everyone, as I find more hardcoded content I'll add it. I'm going to use tags like {{ current_page.url }} - that's PicoCMS (twig template) but you can easily adapt it to wordpress or whatever CMS you are using, or script it so jquery implements it. It's pretty simple, where {{ current_page.url }} is you input your code or hardcode the url - obviously without the {{ and }}. If you are using PicoCMS, Phile, or something based on twig templates, you don't need to edit anything in the code:

So here is a recent new page I'm working on that I utilize the exact code below with:

social-sharing.jpg


The code itself uses Font Awesome for the icons, you can use font awesome or not, I utilize it throughout the site, so it's readily available for users.

Full code:

Code: 
    <div class="cta">

<div class="facebook button">
    <a href="https://www.facebook.com/sharer/sharer.php?u={{ current_page.url }}" target="_blank"><i class="fa fa-facebook fa-lg"></i> &nbsp; Share</a>
</div>
<div class="twitter button">
    <a href="http://twitter.com/share" target="_blank" class="twitter-share-button" data-text='{{ current_page.url }} - {{ meta.title }} - {{ site_title }}' data-count="none"><i class="fa fa-twitter fa-lg"></i> &nbsp; Tweet</a>
</div>
<div class="reddit button">
    <a href="http://www.reddit.com/submit" onclick="window.location = 'http://www.reddit.com/submit?url=' + encodeURIComponent(window.location); return false"><i class="fa fa-reddit fa-lg"></i> &nbsp; Reddit</a>
</div>
<div class="email button">
    <a href="mailto:?subject={{ meta.title }} - {{ site_title }}&amp;cc=mattcutts@googly.com&amp;body={{ meta.title }} - {{ site_title }}: {{ current_page.url }}"><i class="fa fa-envelope fa-lg"></i> &nbsp; Email</a>
</div>

<br>

    </div>

--

Broken down

Facebook: Once someone clicks this, a Facebook sharing option with the URL embedded will appear. (If you are smart and have Open Graph already installed an image will also appear)

Code: 
<div class="facebook button">
    <a href="https://www.facebook.com/sharer/sharer.php?u={{ current_page.url }}" target="_blank"><i class="fa fa-facebook fa-lg"></i> &nbsp; Share</a>
</div>

--

Twitter: Once clicked, this will populate the user's tweet with the current page url, and title of the site. (Again if you are smart and have Twitter Cards installed once the user clicks submit a nice high-resolution image with a summary will appear within the tweet)

Code: 
<div class="twitter button">
    <a href="http://twitter.com/share" target="_blank" class="twitter-share-button" data-text='{{ current_page.url }} - {{ meta.title }} - {{ site_title }}' data-count="none"><i class="fa fa-twitter fa-lg"></i> &nbsp; Tweet</a>
</div>

--

Reddit: This is a trick onclick use, since it had javascript in it if you look carefully, but it works perfectly out of the box without any additional replacement of the code.

Code: 
<div class="reddit button">
    <a href="http://www.reddit.com/submit" onclick="window.location = 'http://www.reddit.com/submit?url=' + encodeURIComponent(window.location); return false"><i class="fa fa-reddit fa-lg"></i> &nbsp; Reddit</a>
</div>

--

Email: A bit tricky, since it utilizes the old-school "mailto" html tag, but you can do some interesting stuff with it, like create the subject line, and body, and CC (or BCC) yourself if you really want to. When they click on the link, it'll open up THEIR email client with all this data filled out for them, and if you added a CC or BCC, that field will be filled out as well - cute trick :smile: For this example I'll add the cc as well:

Code: 
<div class="email button">
    <a href="mailto:?subject={{ meta.title }} - {{ site_title }}&amp;cc=mattcutts@googly.com&amp;body={{ meta.title }} - {{ site_title }}: {{ current_page.url }}"><i class="fa fa-envelope fa-lg"></i> &nbsp; Email</a>
</div>

Some more HTML mailto tricks here: http://rijamedia.com/blog/2010/12/email-tutorial-to-cc-bcc-subject-body-in-mailto-links/

--

As I find more social icons and scripts that do not add http requests to 3rd party just to share, I'll add them to this thread. (This might be hot to implement into certain wordpress themes @Ryuzaki)
 
Last edited:
This is what I've done for my own sites as well, for the same reasons. All of these different social plugins are crazy in terms of # of HTTP Requests and their effect on load time.

Here's another one, for easy reference for the future, pre-set up using Wordpress PHP. Switch to whatever needed:

Google+
Code: 
<a target="_blank" href="https://plus.google.com/share?url=<?php the_permalink(); ?>">Google+</a>

Like CCarter is doing above, I'll also integrate icons to grab people visually as well, and I do it with an icon font. This way I can pull as many icons as I like, change their size, change their color, etc., all with one HTTP request. Socicon is my preferred solution for this.

Here's some I made recently:

gMu0hn7.png

When building your own, you can do whatever you want with the colors, responsiveness, etc. For instance, on mobile, this set above will stay horizontal in orientation but drop out the "on facebook" portion so ultimately it's just the off-colored icon part and the word "share".

A heads up for these would be to watch which parameters each social network will accept. Google+ takes the URL only and pulls the rest of the info itself, where as Twitter might let you pass a description and more. You can customize as much as you like. And if you have Open Graph and Twitter Cards set up, it's going to make a huge impact on CTR/Shares/Likes once it hits the networks.
 
Thanks guys a lot!

This is coming just in time :D I knew you were doing this becosue you have mentioned it earlier somewhere, but had no idea how to make it work on my own

:D:wink:
 
I see what you did there, but I don't really get the evolutional phase from cluts to cutts. You might be getting serious in your years, but thank you for all you shared on wf and buso.

I've implemented most of your suggestions on https://www.buildersociety.com/threads/google-structured-data-schema-org-annotations.1017. . And thanks for that, I've got a better website.

CCarter said:
cc=mattcutts@googly.com
Click to expand...
http://www.wickedfire.com/1884207-post2.html?s=38004e0ebb3af88baa2caf5b2a764fe0

Also:
http://crunchify.com/how-to-create-...pt-loading-wordpress-speed-optimization-goal/

just replace their crunchify branded words in notepad ++ with your own?

That crunchify tutorial works for my site without http requests, but doesn't have the fancy icons, only the colours.
 
Here's it for WordPress, no JS or anything. This hooks it underneath the title. Right now I have Bootstrap HTML around the social network, you can change that to whatever you want.

Code: 
//add social media and wpulike underneath single post title
add_filter( 'the_content', 'single_social_share' );
function single_social_share( $content ) {
    global $post;
    $postlink  = get_permalink($post->ID);
    $posttitle = get_the_title($post->ID);

    $html = '<div class="row"><div class="col-md-12 btn-group-social">';
    $html .= '<a class="btn btn-sm btn-twit" title="Share on Twitter" href="http://twitter.com/share?text='.$posttitle.'&url='.$postlink.'&via=YOURUSERNAME">Twitter</a>';
    $html .= '<a class="btn btn-sm btn-fb" title="Share on Facebook" href="http://www.facebook.com/share.php?u=' . $postlink . '">Facebook</a>';
    $html .= '<a class="btn btn-sm btn-gplus" title="Share on Google+" href="https://plusone.google.com/_/+1/confirm?url=' . $postlink . '">Google+</a>';
    $html .= '</div></div>';
    return $html . $content;
}

If you want it top and bottom just change:
return $html . $content; to: return $html . $content . $html;
 
Thanks so much for this!

This works for pinterest in wordpress and includes the thumbnail as the pin image

Code: 
//add social media and wpulike underneath single post title
add_filter( 'the_content', 'single_social_share' );
function single_social_share( $content ) {
   global $post;
    $postlink  = get_permalink($post->ID);
    $posttitle = get_the_title($post->ID);
    $postimg = get_the_post_thumbnail_url($post->ID, $size=full);

    $html = '<div class="row"><div class="col-md-12 btn-group-social">';
    $html .= '<a class="btn btn-sm btn-twit" target="_blank" title="Share on Twitter" href="http://twitter.com/share?text='.$posttitle.'&url='.$postlink.'&via=YOURUSERNAME">Twitter</a>';
    $html .= '<a class="btn btn-sm btn-fb" target="_blank" title="Share on Facebook" href="http://www.facebook.com/share.php?u=' . $postlink . '">Facebook</a>';
    $html .= '<a class="btn btn-sm btn-gplus" target="_blank" title="Share on Google+" href="https://plusone.google.com/_/+1/confirm?url=' . $postlink . '">Google+</a>';
    $html .= '<a class="icon-pinterest" title="Share on Pinterest" href="http://pinterest.com/pin/create/button/?url=' . $postlink . '&description=' . $posttitle . '&media=' . $postimg . '" target="_blank" title="Pin it">Pinterest</a>';
    $html .= '</div></div>';
    return $html . $content;
}
 
You must log in or register to reply here.
Back