Support » Theme: Customizr » Adding social media buttons to footer

  • Resolved DancingFighterG

    (@dancingfighterg)


    Hello, I’m currently using a plugin called simple social buttons to put share social buttons on the site. I want to use the class designated for the plugin buttons – simplesocialbuttons and place these buttons in the footer of the entire site. I was trying to build some custom CSS to do it but its not working for me. Here is what I have right now:

    .footer .simplesocialbuttons {
    height: 20px;
    margin: 10px auto 10px 0;
    text-align: left;
    clear: left;
    }

    Can I get some help on this

Viewing 15 replies - 1 through 15 (of 16 total)
  • Link to site?

    Thread Starter DancingFighterG

    (@dancingfighterg)

    Here is the site:

    http://shadesofhappiness.com/about-us/

    I would like to have the share button be placed on the footer on the left side so that no matter what page I am on I can share that specific page

    For what it’s worth…and I am not an expert…from looking at the plugin’s page, you will need to hook in the php code they provide to the footer with a custom function…css will not do it…I am not talented enough to help with the code…so I guess I am just wasting your time…but others with more skill are likely to help, so just be patient.

    I’d keep it simple by creating a Footer Widget One-Two-Three and adding the html to One (left).

    Thread Starter DancingFighterG

    (@dancingfighterg)

    So you are saying to use the plugin and place some HTML to replicate what the plugin is doing?

    Thread Starter DancingFighterG

    (@dancingfighterg)

    I have some html that will work:

    (JAVASCRIPT)
    <script charset="utf-8" type="text/javascript">var switchTo5x=true;</script>
    <script charset="utf-8" type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
    <script charset="utf-8" type="text/javascript">stLight.options({"publisher":"94b5dc9a-b16f-440c-9d60-4f4cf5ac4cc4"});var st_type="wordpress3.9.1";</script>
    
    (HTML)
    <span class='st_plusone_hcount' st_title='<?php the_title(); ?>' st_url='<?php the_permalink(); ?>'></span>
    <span class='st_fblike_hcount' st_title='<?php the_title(); ?>' st_url='<?php the_permalink(); ?>'></span>
    <span class='st_twitter_hcount' st_title='<?php the_title(); ?>' st_url='<?php the_permalink(); ?>'></span>

    The only issue I have right now is the placement. I would love to have the buttons in the left corner as I don’t like it in the grey bar area

    Thread Starter DancingFighterG

    (@dancingfighterg)

    In the theme is has the ability to place the social media icons in the left corner. I would like to have the social media share buttons there. What would need to be modified to make this happen

    Thread Starter DancingFighterG

    (@dancingfighterg)

    Ok, now I just have to figure out how to get this code to show up in the following block:

    tc_colophon_right_block

    There is a spot for it but modifying the exist block to show it I will need some help with:

    add_filter('tc_colophon_right_block', 'my_social');
    function my_social(){
    	$img_url = get_stylesheet_directory_uri().'/imgs/hdfooterlogo.png'; //put your image in child-theme/imgs
    	$width = '250px';
    	$height = '79px';
    	$img = '<a href="http://www.hunterdouglas.com/" target=_blank><img alt="logo" src="'.$img_url.'" width="'.$width.'" height="'.$height.'" class="pull-right"></a>';
    	return '<div class="span4 right-image">'.$img.'</div>';
    	}
    Thread Starter DancingFighterG

    (@dancingfighterg)

    Is there anyway to make the existing functionality in the theme that puts social media links in the nav and footer the ability to share the page that its on? I love the images that are being used rather than the default ones

    Thread Starter DancingFighterG

    (@dancingfighterg)

    Looks like I would need to place the code for the social links into the:

    tc_colophon_left_block

    Can I get some help on the code for this?

    Looks like I would need to place the code for the social links into the:

    tc_colophon_left_block

    First up, read an easy guide to actions, filters and hooks.

    Once you’ve done that and rooted in class-footer-footer_main.php, you can see that Customizr is giving you a filter for the left block in the footer that looks like this:

    function tc_colophon_right_block() {
    	echo apply_filters(
    		'tc_colophon_right_block',
    		sprintf('<div class="%1$s"><p class="pull-right"><a class="back-to-top" href="#">%2$s</a></p></div>',
    			apply_filters( 'tc_colophon_right_block_class', 'span4 backtop' ),
    			__( 'Back to top' , 'customizr' )
    		)
    	);
    }

    Having read the article, you know that you must return something, bacause this is a filter. The original code is “echo”ing, so it’s looking for some straight html. So you should be able to use something like this in your functions.php:

    add_filter('tc_colophon_right_block','my_colophon_right_block');
    function my_colophon_right_block() {
    	$my_colophon_contents = 'YOUR VALID HTML HERE';
    	return '<div class="span4">' . $my_colophon_contents . '</div>';
    }

    Exchange YOUR VALID HTML HERE for either valid html, or code that will produce valid html.

    If you’ve not used a child theme’s functions.php before, read this guide.

    Thread Starter DancingFighterG

    (@dancingfighterg)

    Hey ElectricFeet,

    I will try this on the left block with the social media code that I have.

    Thread Starter DancingFighterG

    (@dancingfighterg)

    Running into a little bit of an issue with this HTML. The plugin produces the following HTML for me to use:

    HTML

    <span class='st_plusone_hcount' st_title='<?php the_title(); ?>' st_url='<?php the_permalink(); ?>'></span>
    <span class='st_fblike_hcount' st_title='<?php the_title(); ?>' st_url='<?php the_permalink(); ?>'></span>
    <span class='st_twitter_hcount' st_title='<?php the_title(); ?>' st_url='<?php the_permalink(); ?>'></span>

    Javascript

    <script charset="utf-8" type="text/javascript">var switchTo5x=true;</script>
    <script charset="utf-8" type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
    <script charset="utf-8" type="text/javascript">stLight.options({"publisher":"94b5dc9a-b16f-440c-9d60-4f4cf5ac4cc4"});var st_type="wordpress3.9.1";</script>

    I don’t know if I need just the html or both in the function. Also, in the html its called some php so I need to know the proper syntax to be able to put this in the function.

    Replace the line:

    $my_colophon_contents = 'YOUR VALID HTML HERE';

    in my code above with:

    $my_colophon_contents = <span class='st_plusone_hcount' st_title=' . the_title() . ' st_url=' . the_permalink() . '></span><span class='st_fblike_hcount' st_title=' . the_title() . ' st_url=' . the_permalink() . '></span><span class='st_twitter_hcount' st_title=' . the_title() . ' st_url=' . the_permalink() . '></span>

    and that should fix the html part.

    You can add the javascript part following the approach in this snippet.

    Thread Starter DancingFighterG

    (@dancingfighterg)

    Tried using the code and it threw an error:

    Parse error: syntax error, unexpected ‘<‘ in /home/content/10/3671710/html/shadesofhappiness/wp-content/themes/hd/functions.php on line 8

    Here is the code:

    add_filter('tc_colophon_left_block', 'my_social');
    function my_social(){
    	$social = <span class='st_plusone_hcount' st_title=' . the_title() . ' st_url=' . the_permalink() . '></span><span class='st_fblike_hcount' st_title=' . the_title() . ' st_url=' . the_permalink() . '></span><span class='st_twitter_hcount' st_title=' . the_title() . ' st_url=' . the_permalink() . '></span>;
    	return '<div class="span4 left-social">'.$social.'</div>';
    	}
Viewing 15 replies - 1 through 15 (of 16 total)
  • The topic ‘Adding social media buttons to footer’ is closed to new replies.