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.

Sparhawk

Check for a Wordpress social sharing icons plugin or Share Link Generator! – Vernacularize

Meddelare is an open source social button proxy which will give you url share counts for custom buttons. – Mertens

Answer 1

Social link URL’s

Twitter

https://twitter.com/intent/tweet?text=[TEXT]

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]

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]

Evernote

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

Chevron

That's not what was being asked for; OP was asking for information on creating "custom share icons". – Regardful

@Andrew, while you're kind of correct, these links are the direct links one would use or would have used with custom icons, THOUGH, as has been discussed below, at least the facebook link shown above is already depreciated, and Google Buzz? do they even still run Google Buzz ? lol. – Sparhawk

Hi @Chevron , please send me google plus services url please. – Granville

@AwladLiton code<a href="plus.google.com/share?url={URL}" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;"><img src="gstatic.com/images/icons/gplus-64.png" alt="Share on Google+"/></a>code – Chevron

@AwladLiton For reference developers.google.com/+/web/share – Chevron

@Chevron thank you for all the links together. however can you pls tell me how to open them up in a popup window..should i create my own using javascript? – Aeon

I believe this code is cut and paste from the web, and also what is the solution in terms of technology (php, javascript etc). – Opah

these are just straight basic anchor tag links which si what I was after, I originally had some concerns as facebooks sharer.php was marked as deprecated, but testing this recently I have found that it still works just fine. – Sparhawk

Be sure the url parameters are fully escaped. Tumblr is the only one I've come across so far that won't work otherwise. – Deneb

Website with up to date share links for Facebook, Twitter, Google+, LinkedIn and Pinterest: sharelinkgenerator.com – Dualistic

Here's a website with how to integrate these urls with your theme, in case you're using WordPress: atlchris.com/1665/… – Apical

@Chevron Any idea how to make work with a URL that contains # hashtag? Like domain.com/#hero ?? – Syncretism

2020, APRIL UPDATE: This no longer works, try it out yourself: linkedin.com/… If you want well-maintained URL's, try out a github project. – Jetpropelled

Answer 2

Just a quick update on these links, here's a link for Google+

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

Now, if you want those links to open in a new window, just add this javascript code after the href's:

onclick="javascript:window.open(this.href,'', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;"

This javascript code works with Twitter, Google+ and Facebook (maybe some other, but I haven't tested any other social networks).

Example for WordPress:

<a href="https://plus.google.com/share?url=<?php the_permalink(); ?>" onclick="javascript:window.open(this.href,'', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;">Here you can add text, image, whatever.</a>

Imprest

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 :)

Hypogeum

nice, will keep looking, didn't come across that twitter link myself but part of why I'm posting this question is for exactly the kind of info you mentioned regarding the depreciated link - collective wisdom FTW. – Sparhawk

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

Swarthy

Answer 5

For Facebook sharing you can simply add this link to any object:

<a href="http://www.facebook.com/sharer.php?u=<url to share>
&t=<title of content>">link or image</a>

For the rest: Sorry, but I cannot help you.

Wendywendye

thanks, can you point me in the direction of any documentation regarding this ? – Sparhawk

originally down voted this as that link is marked for deprecation but some time on now it still works just fine. – Sparhawk

Answer 6

In order to customize buttons as well as the share counts from different social networks and url sharing services, you can use a proxy server. The social button server Meddelare does exactly this (FYI, I'm the developer behind Meddelare).

Meddelare: This is an open source and self-hosted alternative to sharing services such as AddThis and ShareThis. Because you run the proxy server yourself, you are also defending your users’ privacy against the social networks’ tracking. Users only opt in to their tracking once they decide to click a share button – never implicitly just because they visited your page.

There are several versions: a standalone server, middleware for your Express.js server and a separate backend for completely custom solutions.

See Meddelare's examples for the JSON/JSONP you get from the server plus script usage.

Mertens

Answer 7

Social Share URLs ~ On Github!

A github repo that is regularly updated and retested, with what looks like about ~50 or 60 services listed.

https://github.com/bradvin/social-share-urls

This is much better than the accepted answer. NewsVine, Delicious, Slashdot, Ping.fm, etc., are all non-existent services today. Plus, some important ones are missing, Skype, etc..

Jetpropelled

Answer 8

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

Use the following format instead

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

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

Cowes

Answer 9

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.

Catbird

Answer 10

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.

Arnie