Grow your CSS skills. Land your dream job.

[WORDPRESS] How to: Create custom Share links?

  • # June 8, 2013 at 3:32 am

    First off please check out [this blog post](http://sofuckingood.com/2013/05/15/les-illustrations-de-senor-octopus/ “http://sofuckingood.com/2013/05/15/les-illustrations-de-senor-octopus/”).

    On the left you will see the share buttons for Facebook and Twitter.
    I basically would like to learn how to recreate it.

    I’m not sure if the designer created the links on his own or used a WP Plugin of some sort.

    Any ideas on where I can start? Or recommended tutorials?

    I’d really appreciate the help!

    # June 8, 2013 at 9:01 am

    The way they did it:

    for the facebook share button create an anchor link with an href of

    http://www.facebook.com/sharer.php?s=100&ptitle=Les illustrations de Senor Octopus&p[url]=http://sofuckingood.com/2013/05/15/les-illustrations-de-senor-octopus/&p[summary]=C’est par hasard (plus ou moins) qu’on est tombé sur la page Facebook de Senor Octopus, illustratrice et typographe basée à Montpellier. Un seul coup d’oeil nous a suffit pour se dire “

    where the &p[title], &p[url],&p[summary] are the bits you want to change.

    this functionality is used as a share button through sharer.php.facebook has announced that will drop support for share and continue with a simple like button but still supports it

    the twitter share button is again an anchor with an href of

    http://twitter.com/share?via=sfgdablog&text=Les illustrations de Senor Octopus’

    text is your tweet and via is a reference you can insert hashtags in you text as normal

    # June 8, 2013 at 9:07 am

    for teh facebook link you can use the graph api and just have a link to facebook sharer page and include all your information to be shared in meta tags




    just replace the content of each meta tag with real values

    # June 8, 2013 at 4:31 pm

    @pixel_grid Not too familiar* with any of that. So I guess I’ll have to find a tutorial somewhere lol. Appreciate your response, Thanks.

    # June 9, 2013 at 3:45 pm

    @Pixel_Grid
    Is it okay to use custom icons?
    Change the color of them to match a design?
    Or is that against the rules to sharing buttons?

    # June 9, 2013 at 3:56 pm

    I guess you want these share links after each of the post so I tell you the easiest do COPY this code and PASTE in it your functions.php file and use css to arrange them well.
    [PHP]

    function share_this($content){
    if(!is_feed() && !is_home()) {
    $content .= ‘

    Projects

    *May or may not contain any actual "CSS" or "Tricks".