ThemeShaper Forums » Thematic

[closed]

Adding facebook like button / social widgets next to post meta

(37 posts)
  • Started 3 years ago by mcdermos20
  • Latest reply from carrisi
  • This topic is not resolved
  1. mcdermos20
    Member

    Hi

    I'm trying to add Facebook like button and social widgets next to the meta area underneath my post header.

    Anyone got any ideas how to do this / where in my child theme I can add these buttons.

    Thanks

    Posted 3 years ago #
  2. sounds like you'll want to filter the postmeta. idk what the code you want to add looks like, but this is the general idea.

    function child_postheader_postmeta() {
        $postmeta = '<div class="entry-meta">';
        $postmeta .= thematic_postmeta_authorlink();
        $postmeta .= '<span class="meta-sep meta-sep-entry-date"> | </span>';
        $postmeta .= thematic_postmeta_entrydate();
        $postmeta .= thematic_postmeta_editlink();
    	$postmeta .= '<span class="fb">Facebook Like Stuff</span';
        $postmeta .= "</div><!-- .entry-meta -->\n";
    }
    add_filter('thematic_postheader_postmeta','child_postheader_postmeta');
    Posted 3 years ago #
  3. mcdermos20
    Member

    Thanks - not sure where I would put this though? In the functions page?

    Posted 3 years ago #
  4. yes. all functions for your child theme always go in your functions.php

    Posted 3 years ago #
  5. mcdermos20
    Member

    Hmmn.... Not to great on the code - need to try and work it out.

    Posted 3 years ago #
  6. Oh, helgatheviking -- or anyone
    Very much want to do something similar. I want to add the fb like and the twitter retweet button to the postmeta.

    How would you add the twitter retweet stuff?

    Joanne

    Posted 3 years ago #
  7. i'd probably suggest using the childtheme_override_postmeta() function these days. you need to have some code for the fb like and twitter retweet buttons. aren't there a couple of plugins that do this automatically?

    Posted 3 years ago #
  8. Yes, I have been searching for such a plugin. The postmeta isn't usually the target for the output.

    That's why I want to code my own...

    Posted 3 years ago #
  9. well you can override or filter almost any of thematic's functions. so you don't have to put it in the postmeta. you can put stuff anywhere!

    Posted 3 years ago #
  10. Thanks Helgatheviking (nice nickname)

    Being at the copy-and-paste level of coding, I was hoping you might have a suggestion for how to add this

    &service=<service>&service_api=<api>"><img src="http://api.tweetmeme.com/imagebutton.gif?url=<url>" height="61" width="51" />

    to what you have above

    Posted 3 years ago #
  11. The inspiration is this site where the index.php shows the tweetmeme button under the postmeta;

    http://epiclaunch.com/

    Posted 3 years ago #
  12. couldn't you just use this:
    http://wordpress.org/extend/plugins/tweetmeme/

    but if not then you could take what i have above and swap out "<span class="fb">Facebook Like Stuff</span>" with your code... which didn't up well. you can post code between 2 backtick marks (top left of a US keyboard)

    Posted 3 years ago #
  13. Hello,

    I always use this plugin: http://wordpress.org/extend/plugins/simple-facebook-connect/
    Activate the main plugin and the Like button module.

    Then put this in your functions.php (obviously modify to your liking):

    function social_links() {
    if (is_page()) {?>
    
    <div id="social_contextual">
    
    	<div id="twitter">
    	<a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="TwitterUsername">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
    	</div><!-- twitter -->
    
    	<div id="facebook_like">
    	<?php sfc_like_button(); ?>
    	</div><!-- facebook_like -->
    
    </div><!-- social -->
    
    <?php }}
    add_action('thematic_belowpost','social_links');

    Enjoy!

    Posted 3 years ago #
  14. Ok, sorry I didn't read the whole thread....

    function child_postheader_postmeta() {
        $postmeta = '<div class="entry-meta">';
        $postmeta .= thematic_postmeta_authorlink();
        $postmeta .= '<span class="meta-sep meta-sep-entry-date"> | </span>';
        $postmeta .= thematic_postmeta_entrydate();
        $postmeta .= thematic_postmeta_editlink();
        $postmeta .= "</div><!-- .entry-meta -->\n";
        $postmeta .= '<div id="twitter">
    	<a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="TwitterUsername">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
    	</div><!-- twitter -->';
    }
    add_filter('thematic_postheader_postmeta','child_postheader_postmeta');

    Yes? This uses the official Twitter button, not Tweetmeme....

    Posted 3 years ago #
  15. wlanni
    Member

    I have to give a huge thumbs up to the Social Media Widget -- the developer Brian is awesome on support, and his plugin supports custom icons:

    http://www.idontlikethisgame.com/updates/social-media-widget/

    I followed instructions elsewhere in these forums to add my own widget area in the header for my social media stuff.

    I'm pretty sure that you could add his plugin beneath the meta data widget, and just not include a title. That way it would look like it's a part of that widget?

    Posted 3 years ago #
  16. Wlanni
    That plugin is a sidebar widget only. And no options for manually placing it in the theme as is the question.

    But it is a nice plugin for a sidebar -- thanks for bringing it up.

    Posted 3 years ago #
  17. did joperron's code work? you haven't said.

    Posted 3 years ago #
  18. joperron's code did not work -- as-is --here is how I've modified it so far

    <?php
    function child_postheader_postmeta($postmeta) {
        $addtometa = '<div id="facebook">
    	<iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo urlencode(get_permalink($post->ID)); ?>&layout=standard&show_faces=false&width=450&action=like&colorscheme=light&height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true"></iframe>';
    	return $postmeta . $addtometa;
    }
    add_filter('thematic_postheader_postmeta','child_postheader_postmeta');
    ?>

    The output shows up in the desired place. But there must be something wrong with the syntax because I get a FB error that it can't find tue URL

    Suggestions appreciated....

    Posted 3 years ago #
  19. And I see I need to close the <div> too...

    Posted 3 years ago #
  20. This was the error with the URL
    The page at http://</?php+echo+urlencode%28get_permalink%28%24post-%3EID%29%29%3B+%3F%3E could not be reached.

    Posted 3 years ago #
  21. The goal is to implement share and retweet buttons side by side.

    Here is a cool implmentation on this page:

    http://www.wpbeginner.com/wp-tutorials/how-to-add-facebook-like-button-in-wordpress/

    It's in a fixed position div that persists in the left margin as you go about the post.

    Posted 3 years ago #
  22. i can't help with existing problem but can suggest the method i use.
    i dont use plugins.
    (1) visit http://www.addthis.com/
    (2) choose a layout (i think the 4th option is what you are looking to do)
    (3) do you want free analytics? nah, we have enough statistics in this world already.
    (4) get button.
    (5) grab the code

    <div class="addthis_toolbox addthis_default_style ">
    <a href="http://www.addthis.com/bookmark.php?v=250&amp;username=xa-4d4ca34f2673a177" class="addthis_button_compact">Share</a>
    <span class="addthis_separator">|</span>
    <a class="addthis_button_preferred_1"></a>
    <a class="addthis_button_preferred_2"></a>
    <a class="addthis_button_preferred_3"></a>
    <a class="addthis_button_preferred_4"></a>
    </div>
    <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=xa-4d4ca34f2673a177"></script>

    (6) that could be inserted into the filter you are using currently. but.... that includes inline script and that makes me weez. so...

    i remove the <script> section out of the code above and enqeue it correctly so it loads at the bottom.

    function register_scripts() {
    if (!is_admin()) {
    wp_deregister_script('jquery');
    wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js', false, '1.4.4', true);
    wp_register_script('addthis', "http://s7.addthis.com/js/250/addthis_widget.js#username=xa-4d4ca34f2673a177", array('jquery'), '1.0', true );
    wp_enqueue_script('jquery');
    wp_enqueue_script('addthis');
    }
    
    }
    add_action('wp_print_scripts', 'register_scripts', 100);

    or better still, if you only plan to use the addthis on a SINGLE page, lets not have this script load on every page.

    function register_scripts() {
    if (!is_admin()) {
    wp_deregister_script('jquery');
    wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js', false, '1.4.4', true);
    wp_register_script('addthis', "http://s7.addthis.com/js/250/addthis_widget.js#username=xa-4d4ca34f2673a177", array('jquery'), '1.0', true );
    }
    if (!is_admin()) {
    wp_enqueue_script('jquery');
    }
    if (is_single()) {
    wp_enqueue_script('addthis');
    }
    
    }
    add_action('wp_print_scripts', 'register_scripts', 100);

    oh, something to note, the above enqeue script code is loading jquery from google, its faster and cached in users browsers already, i haven't heard many arguments against this approach.

    (7) this monkeys gone to heaven

    hope this helps, or anyone who may be reading it.

    note: dont just copy the addthis code above, you to generate ya own

    Posted 3 years ago #
  23. Thanks jonnyj

    Wow that is a hunk of help. I will give it a try as soon as I get a chance.

    Appreciate it.

    (now, a moment of silence for your monkey)

    Cheers

    Posted 3 years ago #
  24. monkey says yes :)

    Posted 3 years ago #
  25. Hi Jonny,

    I followed your instructions, some really useful stuff there, thanks.

    I tested it. When viewing from the blog front page, it seems like all the links point to the main page, rather than to the individual post. I would prefer if the link was to the post.

    I want to avoid using plugins as much as possible, but to get the desired behaviour I will probably have to, right?

    Kit

    Posted 3 years ago #
  26. It's taken me three days, but I've finally found a solution I am happy with. No plugins, no java, just links.

    I got the idea from this page, though it's a little out of date so I couldn't just copy-and-paste code.

    Posted 3 years ago #
  27. Hm that would be nice. Just links, no plugins and no java.

    When i put the code from the page into my functions.php and some icons into my icons folder.
    Nothing happens with my page
    i think i have a general difficulty with hooks, some infomation i am missing?

    how did you implement the idea from Xerces Tech?

    I'm using WP 3.1 and a Thematic Childtheme on Thematic 0.9.7.7

    have a nice day :)

    Posted 3 years ago #
  28. Oki it was just a cache problem from my host.
    But maybe some one needs the same as i do
    so here is, what i did with oldmankit's link:


    function custom_social_media_links() { ?>
    <div id="custom_social_media_links">
    Teile mit:
    &t=<?php the_title(); ?>" title="Click to send this article to Facebook!" target="blank"><img src="http://mariosta.ch/bilder/icons/facebook_32.png" alt="Share this article on Facebook" />
    – <?php the_permalink(); ?>" title="Click to send this article to Twitter!" target="_blank"><img src="http://mariosta.ch/bilder/icons/twitter_32.png" alt="Share this article on Twitter" />
    </div>
    <?php }

    function add_social_media_links_to_postfooter($footer) {
    $social_media_links = custom_social_media_links();
    $footer = $social_media_links . $footer;
    return $footer;
    }

    add_action('thematic_postfooter','add_social_media_links_to_postfooter');

    function custom_face_youtube_links() { ?>
    <div align="center" id="custom_face_youtube_links">
    <img src="http://mariosta.ch/bilder/icons/facebook_64.png" alt="Trete der Facebookgruppe bei!" />
    <img src="http://mariosta.ch/bilder/icons/youtube_64.png" alt="Schau dir unseren YouTube Kanal an!" />
    <p> </p>
    </div>
    <?php }

    function add_face_youtube_links_to_betweenmainasides($side) {
    $face_youtube_links = custom_face_youtube_links();
    $side = $face_youtube_links . $side;
    return $side;
    }

    add_action('thematic_betweenmainasides','add_face_youtube_links_to_betweenmainasides');

    here is how it looks like!

    Posted 3 years ago #
  29. @Karaviro - looks great on your site. can you repost your code? it got mangled. put it between two backtick ( ` ) marks. on a US keyboard the backtick is to the left of the numeral 1. but on a german keyboard i have no idea.

    Posted 3 years ago #
  30. @Karaviro, good to hear you found a solution. thats simple and effective.

    the above code i posted (working this end, unsure about home problem, will take a look) is for adding the 'addthis' network. it opens open the many million shite networks.

    for someone just wanting the usual twitter, facebook, etc, your solution is best.

    Posted 3 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.