Call function from WordPress function.php to page-home.php

I’m stuck at this. Please help. Basically, I’m trying to create a hover on image to reveal social icons effect. Clicking the social icon will take you to the relevant page of the social website in a new window. I got the hover to work except onclick is not opening at all.

My main social icon function is in functions.php as follows:

    function tfd_social_buttons($content) {
global $post;
$permalink = get_permalink($post->ID);
$title = get_the_title();
if(!is_feed() && !is_home() && !is_page()) {
    $content = $content . '<div class="tfd-social-buttons">
<h5>SHARE ON</h5>

    <a class="icon-twitter" href="http://twitter.com/share?text='.$title.'& url='.$permalink.'"
        onclick="window.open(this.href, 'twitter-share', 'width=550,height=235');return false;">
        <span>Twitter</span>
    </a>    

    <a class="icon-fb" href="https://www.facebook.com/sharer/sharer.php?u='.$permalink.'"
         onclick="window.open(this.href, 'facebook-share','width=580,height=296');return false;">
        <span>Facebook</span>
    </a>

    <a class="icon-gplus" href="https://plus.google.com/share?url='.$permalink.'"
       onclick="window.open(this.href, 'google-plus-share', 'width=490,height=530');return false;">
        <span>Google+</span>
    </a>
</div>';
}
return $content;
 }
  add_filter('the_content', 'tfd_social_buttons');'

This is what I’m trying to implement on my page-home.php

<!-- Beginning of Featured Stories -->
            <div id="freshly-pressed">
<?php
global $post;
$args = array( 'post_type' => 'post', 'posts_per_page' => -1 );
$myposts = get_posts( $args );
 foreach( $myposts as $post ) : setup_postdata($post); ?>

            <div class="press">
   <figure class="cap-bot">
            <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('large', array('class' => 'featured-thumb grayscale')); ?></a>
           <figcaption>
      <div class="tfd-social-buttons">
<a class="icon-twitter" href="http://twitter.com/share?text='.$title.'& url='.$permalink.'"
    onclick="window.open(this.href, 'twitter-share', 'width=550,height=235');return false;">
    <span>Twitter</span>
</a>    

<a class="icon-fb" href="https://www.facebook.com/sharer/sharer.php?u='.$permalink.'"
     onclick="window.open(this.href, 'facebook-share','width=580,height=296');return false;">
    <span>Facebook</span>
</a>

<a class="icon-gplus" href="https://plus.google.com/share?url='.$permalink.'"
   onclick="window.open(this.href, 'google-plus-share', 'width=490,height=530');return false;">
    <span>Google+</span>
</a>
</div>
 </figcaption>
 </figure>
                <div class="press-info">
<h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>
            <p><?php the_date(); ?></p><p><?php $content = get_the_content(); echo wp_trim_words( $content , '15' ); ?></p>
            </div><!-- press-info --> 

            </div><!-- press --> 
      <?php endforeach; ?> 
            </div><!-- Freshly Pressed -->   
            <!-- End of Featured Stories -->

The hover effect and the icons are visible but onclick does not open a new window. Is there anyway I can call the function upon onclick from functions.php. Any help would be much appreciated thanks.