1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Need Help Adding Sharre (Social Sharing Widget)To Wordpress

Discussion in 'WordPress' started by Nusaint, Apr 1, 2015.

  1. #1
    Hi Dev,

    So I have been trying for the last few days to get the popular sharre social sharing jquery plugin to work with wordpress with no luck.

    Here is the tutorial I am following (http://www.paulund.co.uk/create-your-own-share-buttons-with-sharrre)

    And here is what I have done without luck :(

    I added these scrips tag to my header to call jquery,sharre and my own jquery.
    <script src="http://code.jquery.com/jquery-1.7.min.js"></script>
    <script type="text/javascript"
       src="<?php bloginfo("template_url"); ?>/js/jquery.sharrre.min.js"></script>
    <script type="text/javascript"
       src="<?php bloginfo("template_url"); ?>/js/sharrebuttons.js"></script>
    Code (JavaScript):
    I then added the HTML code to the single.php file.
    <div id="demo1" data-title="Share Paulund" data-url="<?php echo get_permalink(); ?>" target="_blank"> </div>
    HTML:
    After, I added the CSS to my styles.css folder.
    #demo1.sharrre {
    width:100%;
    display:inline-block;
    }
    #demo1.sharrre .box{
        float:left;
    }
    #demo1.sharrre .share {
        color:#FFFFFF;
        display:block;
        font-size:13px;
        height:60px;
        line-height:60px;
        padding:0;
        text-align:center;
        text-decoration:none;
        width:200px;
        background:#a1a1a1;
        float:left;
      }
      #demo1.sharrre .count {
        display:block;
        font-size:17px;
        line-height:54px;
        height:54px;
        padding:3px 0;
        position:relative;
        text-align:center;
        text-decoration:none;
        width:50px;
        background-color:#eee;
        border-radius:4px;
        color:#000;
        float:right;
      }
      #demo1.sharrre .buttons {
        display:none;
        float:left;
        width:300px;
      }
      #demo1.sharrre .button {
        float:left;
        max-width:50px;
        height:50px;
        margin-left:10px;
      }
    Code (CSS):
    Here is what he said on adding it to wordpress

    To use this with Wordpress it's quite simple, just include the HTML for the sharrre buttons in your theme inside the single.php file. Then add the sharrre javascript file and your own javascript file into your theme folder.

    Then in the functions.php file use the wp_enqueue_scripts() function to include the sharrre plugin and your own javascript on the form.

    Then add your styles to the style.css file in your theme.

    That should do it.

    I have tried that (i think) but no luck. I appreciate any help and guidance on this.

    Thanks in advance.

    Regards.
     
    Nusaint, Apr 1, 2015 IP