Adding social media buttons to footer
-
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
-
Link to site?
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).
So you are saying to use the plugin and place some HTML to replicate what the plugin is doing?
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
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
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>'; }
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
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.
Hey ElectricFeet,
I will try this on the left block with the social media code that I have.
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.
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>'; }
- The topic ‘Adding social media buttons to footer’ is closed to new replies.