Social Share Links with Custom Icons [closed]

Question

I'm looking for any solid current information on creating custom share icons for the following.

• Facebook
• Twitter
• Google +
• LinkedIn
• Pinterest

All the documentation I keep getting to seems to be about using THEIR social like / share buttons - which most of the time I think are not very appealing. Things like socialite.js help to deal with some of the other issues that arrise when using the "native" like / share buttons (sorry not sure what else to call them), but they're not very pretty to be honest.

Any reference material / tutorials or guidance would be awesome.

Cheers.

Answer 1

None of the answers here seem to actually answer the OP question. So here is my attempt:

Many social networks actually provide guidelines on how to use their logos, sharing icons and other links. Some are more flexible than others on that subject.

Of course, in most cases, they won't fit your design really well and you might want to customize them with your own theme/website colors.

"Do this at your own risks" is probably the best answer you will ever get.

I am not a lawyer (so this is no legal advice!) but from what I could read in different articles, some websites that were selling icon sets with customized social network logos were asked to remove them from their products list.

There is little chance that Facebook, Twitter or any other social network company will sue you (although they probably could) for having customized their icons/logos for your personal blog or website, but if you want to cover yourself, you probably want to consider following their guidelines...

Here are a few links to social network brands guidelines:

• Facebook: https://www.facebookbrand.com/
• Twitter: https://about.twitter.com/company/brand-assets
• Google+: https://developers.google.com/+/branding-guidelines
• StumbleUpon: http://www.stumbleupon.com/press/stumbleupon-image-use-guidelines
• Delicious: http://delicious.com/branding
• LinkedIn: https://brand.linkedin.com/
• Tumblr: https://www.tumblr.com/logo
• Reddit: https://www.reddit.com/about/alien/
• etc.

You can search the web for "[brandname] brand guidelines" to find these guidelines for almost every social network.

Some source for the above information if you want to read more:

• http://www.evolvecreativegroup.com/the-secretly-strict-brand-guidelines-of-social-media/
• https://www.quora.com/Internet-Law-Is-it-legal-to-alter-Facebook-and-Twitter-icons-to-match-the-rest-of-your-website
• https://webmasters.stackexchange.com/questions/54499/putting-altered-social-media-logo-icons-on-my-website-can-i-get-sued
• http://www.kgshultz.com/using-modified-social-media-icons/
• https://www.nosegraze.com/allowed-use-modified-social-media-icons/

Hope this helps.

Answer 2

This is my solution for facebook in php. Guess you can do simular for other social networks.

function customFShare() {
    $like_results = @file_get_contents('http://graph.facebook.com/'. get_permalink());
    $like_array = json_decode($like_results, true);
    return (isset($like_array['shares']) ) ? $like_array['shares'] : "0";
}
function fShareButton() {
    return "<a data-share='http://www.facebook.com/sharer/sharer.php?u=". $your_url_here ."' href='#' rel='nofollow'><i>Icon</i> <span>". customFShare() ."</span></a>";
}

HTML

<div class="facebook-share">
    <?php echo fShareButton(); ?>
</div>

JQuery

jQuery(document).on("click",".facebook-share > a", function (e) {
        e.preventDefault();
        var winHeight = 350,
            winWidth = 520,
            winTop = (screen.height / 2) - (winHeight / 2),
            winLeft = (screen.width / 2) - (winWidth / 2),
            link = $(this).data('share');
        window.open(link, 'sharer', 'top=' + winTop + ',left=' + winLeft + ',toolbar=0,status=0,width=' + winWidth + ',height=' + winHeight);
    });

You will get nice facebook button with icon and counter.

Answer 3

The solution suggested by Grzegorz is deprecated and it's not really the best way to do it. For Facebook, you just need to load the JS SDK ( https://developers.facebook.com/docs/reference/javascript/ ) and call the UI feed method on click on your custom button. More details on the UI method: https://developers.facebook.com/docs/reference/javascript/FB.ui/

For Twitter: https://dev.twitter.com/docs/tweet-button#build-your-own

You will have other options for LinkedIn, Google+, etc. but I don't know them from the top of my head and not sure if of all them offer alternatives.

Keep searching, you probably just didn't dig deep enough, it took me 2 minutes to find the link for Twitter :)

Answer 4

Your required social media custom share links are provided below.

Facebook

http://www.facebook.com/sharer.php?u=[EncodedURL]

Twitter

http://twitter.com/share?text=[TITLE]&url=[URL]

Google +

https://plus.google.com/share?url=[EncodedURL]

LinkedIn

http://www.linkedin.com/shareArticle?mini=true&url=[EncodedURL]

Pinterest

http://pinterest.com/pin/create/button/?url=[EncodedURL]&media={[MEDIA]}&description=[TITLE]

You can find some other social media custom URL links and implementation guide from here - How to Create Custom Social Share Links

Answer 5

Below, I am going to offer you the various services URL’s

Twitter

http://twitter.com/home?status=[TITLE]+[URL]

Digg

http://www.digg.com/submit?phase=2&url=[URL]&title=[TITLE]

Facebook

http://www.facebook.com/share.php?u=[URL]&title=[TITLE]

StumbleUpon

http://www.stumbleupon.com/submit?url=[URL]&title=[TITLE]

Delicious

http://del.icio.us/post?url=[URL]&title=[TITLE]]&notes=[DESCRIPTION]

Linkedin

http://www.linkedin.com/shareArticle?mini=true&url=[URL]&title=[TITLE]&source=[SOURCE/DOMAIN]

Slashdot

http://slashdot.org/bookmark.pl?url=[URL]&title=[TITLE]

Technorati

http://technorati.com/faves?add=[URL]&title=[TITLE]

Tumblr

http://www.tumblr.com/share?v=3&u=[URL]&t=[TITLE]

Reddit

http://www.reddit.com/submit?url=[URL]&title=[TITLE]

Google Bookmarks

http://www.google.com/bookmarks/mark?op=edit&bkmk=[URL]&title=[title]&annotation=[DESCRIPTION]

Newsvine

http://www.newsvine.com/_tools/seed&save?u=[URL]&h=[TITLE]

Ping.fm

http://ping.fm/ref/?link=[URL]&title=[TITLE]&body=[DESCRIPTION]

Evernote

http://www.evernote.com/clip.action?url=[URL]&title=[TITLE]

Google+

https://plus.google.com/share?url=[URL]

Answer 6

Twitter link format http://twitter.com/home?status=[TITLE]+[URL] is deprecated and will no longer work for the Twitter iOS app.

Use instead

https://twitter.com/intent/tweet?text=[TITLE]+[URL]

Source: https://dev.twitter.com/web/tweet-button