ThemeShaper Forums Topic: Adding facebook like button / social widgets next to post meta

ThemeShaper Forums Topic: Adding facebook like button / social widgets next to post meta http://themeshaper.com/forums/ Help In Shaping WordPress Themes en Wed, 22 May 2013 17:05:31 +0000 carrisi on "Adding facebook like button / social widgets next to post meta" http://themeshaper.com/forums/topic/adding-facebook-like-button-social-widgets-next-to-post-meta/page/2#post-24030 Thu, 01 Dec 2011 11:20:53 +0000 carrisi 24030@http://themeshaper.com/forums/ great bit of code from Karaviro but i dont seem to be able to chnge the image link? logostar on "Adding facebook like button / social widgets next to post meta" http://themeshaper.com/forums/topic/adding-facebook-like-button-social-widgets-next-to-post-meta/page/2#post-22372 Tue, 19 Jul 2011 14:33:53 +0000 logostar 22372@http://themeshaper.com/forums/ Never mind, I got it figured out. logostar on "Adding facebook like button / social widgets next to post meta" http://themeshaper.com/forums/topic/adding-facebook-like-button-social-widgets-next-to-post-meta/page/2#post-22354 Mon, 18 Jul 2011 04:25:06 +0000 logostar 22354@http://themeshaper.com/forums/ Already have social media links written up in html, how do one put this in header file before the main content start? newb on "Adding facebook like button / social widgets next to post meta" http://themeshaper.com/forums/topic/adding-facebook-like-button-social-widgets-next-to-post-meta/page/2#post-22339 Fri, 15 Jul 2011 13:50:06 +0000 newb 22339@http://themeshaper.com/forums/ Hi Jonny, I'm using addthis and want to insert it to postfooter meta. Using your code gave me good results except one problem - all icons are at the next line after meta. How to add it to the same line? helgatheviking on "Adding facebook like button / social widgets next to post meta" http://themeshaper.com/forums/topic/adding-facebook-like-button-social-widgets-next-to-post-meta/page/2#post-19474 Wed, 02 Mar 2011 23:03:17 +0000 helgatheviking 19474@http://themeshaper.com/forums/ thanks! the weight training site is mostly defunct, though i wish i would revive it, but i've gotten so busy w/ theme development. your code will come in handy and save me having to look it up myself. to answer your newb question- that is just how filters work. in WP and in thematic there are spots that say apply_filters('filter_name',$variable); basically you return a value and that variable changes the value of the variable before the function is run. i hope that makes sense... had a little whiskey earlier. Karaviro on "Adding facebook like button / social widgets next to post meta" http://themeshaper.com/forums/topic/adding-facebook-like-button-social-widgets-next-to-post-meta/page/2#post-19458 Wed, 02 Mar 2011 15:09:19 +0000 Karaviro 19458@http://themeshaper.com/forums/ Oki 2nd try: <pre><code><code> function custom_social_media_links() { ?> <div id="custom_social_media_links"> Teile mit: <a href="http://www.facebook.com/sharer.php?u=<?php the_permalink(); ?>&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" /></a> <a href="http://twitter.com/home?status=<?php the_title(); ?> – <?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" /></a> </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"> <a href="http://www.facebook.com/group.php?gid=352037097808" title="Trete der Facebookgruppe bei!" target="blank"><img src="http://mariosta.ch/bilder/icons/facebook_64.png" alt="Trete der Facebookgruppe bei!" /></a> <a href="http://www.youtube.com/user/lakaraviro" title="Schau dir unseren YouTube Kanal an!" target="_blank"><img src="http://mariosta.ch/bilder/icons/youtubex64.png" alt="Schau dir unseren YouTube Kanal an!" /></a> <a href="<?php bloginfo('rss2_url') ?>" title="<?php echo wp_specialchars(get_bloginfo('name'), 1) ?> <?php _e('Posts RSS feed', 'thematic'); ?>" rel="alternate nofollow" type="application/rss+xml"><img src="http://mariosta.ch/bilder/icons/rss_64.png" alt="RSS Feed!" /></a> &nbsp; </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'); </code></code></pre> @helgatheviking: Thanks :) i like your Site too, hehe and also the subject of fitness. @Jonny: I'm a Noob so, i don't know :) how efficient my way is. I have a Noob question, about this Code above, since i am working with Copy&Paste method: I don't understand what is the purpose of the second Part of the Function, there where you write the second time Function and end it with Return. And why you are creating something like "$xxx"? have a nice day! oldmankit on "Adding facebook like button / social widgets next to post meta" http://themeshaper.com/forums/topic/adding-facebook-like-button-social-widgets-next-to-post-meta/page/2#post-19446 Wed, 02 Mar 2011 03:01:28 +0000 oldmankit 19446@http://themeshaper.com/forums/ I've noticed code getting mangled when I've tried to copy and paste too. I hope this works. This is a little section from function my_postfooter(). Please note that it's not super-pretty because I have a load of no-breaking spaces. I use css background sprites (using a custom span class) instead of normal image links. See what I mean <a href="http://peaceandtruth.com/blog">here</a>. (I have since learned there is a cleaner way to do this.) Please also note that the code I found on that website doesn't validate. Replace the ampersand and em-dash with the html code. Actually, before I did this, it broke my entire site layout in IE. <pre><code>$postfooter .= '<a href="http://twitter.com/home?status=' . get_the_title() . '-' . apply_filters('the_permalink', get_permalink()) . '" title="share on twitter" target="_blank">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>'; $postfooter .= '&nbsp;&nbsp;&nbsp;' ; $postfooter .= '<a href="http://www.facebook.com/sharer.php?u=' . apply_filters('the_permalink', get_permalink()) . '&amp;t=' . get_the_title() . '" title="share on facebook" target="blank">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>' ;</code></pre> Jonny Janiero on "Adding facebook like button / social widgets next to post meta" http://themeshaper.com/forums/topic/adding-facebook-like-button-social-widgets-next-to-post-meta#post-19445 Wed, 02 Mar 2011 01:50:53 +0000 Jonny Janiero 19445@http://themeshaper.com/forums/ @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. helgatheviking on "Adding facebook like button / social widgets next to post meta" http://themeshaper.com/forums/topic/adding-facebook-like-button-social-widgets-next-to-post-meta#post-19444 Wed, 02 Mar 2011 00:57:51 +0000 helgatheviking 19444@http://themeshaper.com/forums/ @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. Karaviro on "Adding facebook like button / social widgets next to post meta" http://themeshaper.com/forums/topic/adding-facebook-like-button-social-widgets-next-to-post-meta#post-19441 Tue, 01 Mar 2011 23:00:44 +0000 Karaviro 19441@http://themeshaper.com/forums/ 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: <code> function custom_social_media_links() { ?> <div id="custom_social_media_links"> Teile mit: <a>&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" /></a> <a> – <?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" /></a> </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"> <a href="http://www.facebook.com/group.php?gid=352037097808" title="Trete der Facebookgruppe bei!"><img src="http://mariosta.ch/bilder/icons/facebook_64.png" alt="Trete der Facebookgruppe bei!" /></a> <a href="http://www.youtube.com/user/lakaraviro" title="Schau dir unseren YouTube Kanal an!"><img src="http://mariosta.ch/bilder/icons/youtube_64.png" alt="Schau dir unseren YouTube Kanal an!" /></a>   </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'); </code> <a href="http://lebensgarten.ch">here</a> is how it looks like! Karaviro on "Adding facebook like button / social widgets next to post meta" http://themeshaper.com/forums/topic/adding-facebook-like-button-social-widgets-next-to-post-meta#post-19432 Tue, 01 Mar 2011 11:19:00 +0000 Karaviro 19432@http://themeshaper.com/forums/ 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 :) oldmankit on "Adding facebook like button / social widgets next to post meta" http://themeshaper.com/forums/topic/adding-facebook-like-button-social-widgets-next-to-post-meta#post-19300 Mon, 21 Feb 2011 10:16:23 +0000 oldmankit 19300@http://themeshaper.com/forums/ 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 <a href="http://xercestech.com/social-media-links-for-thematic-and-wordpress.geek">this</a> page, though it's a little out of date so I couldn't just copy-and-paste code. oldmankit on "Adding facebook like button / social widgets next to post meta" http://themeshaper.com/forums/topic/adding-facebook-like-button-social-widgets-next-to-post-meta#post-19299 Mon, 21 Feb 2011 05:26:47 +0000 oldmankit 19299@http://themeshaper.com/forums/ 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 Jonny Janiero on "Adding facebook like button / social widgets next to post meta" http://themeshaper.com/forums/topic/adding-facebook-like-button-social-widgets-next-to-post-meta#post-19021 Tue, 08 Feb 2011 02:14:21 +0000 Jonny Janiero 19021@http://themeshaper.com/forums/ monkey says yes :) bluejpro on "Adding facebook like button / social widgets next to post meta" http://themeshaper.com/forums/topic/adding-facebook-like-button-social-widgets-next-to-post-meta#post-18995 Sun, 06 Feb 2011 05:49:45 +0000 bluejpro 18995@http://themeshaper.com/forums/ 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 Jonny Janiero on "Adding facebook like button / social widgets next to post meta" http://themeshaper.com/forums/topic/adding-facebook-like-button-social-widgets-next-to-post-meta#post-18987 Sat, 05 Feb 2011 01:23:39 +0000 Jonny Janiero 18987@http://themeshaper.com/forums/ i can't help with existing problem but can suggest the method i use. i dont use plugins. (1) visit <a href="http://www.addthis.com/" rel="nofollow">http://www.addthis.com/</a> (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 <pre><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> | <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></code></pre> (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. <pre><code>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);</code></pre> or better still, if you only plan to use the addthis on a SINGLE page, lets not have this script load on every page. <pre><code>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);</code></pre> 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 bluejpro on "Adding facebook like button / social widgets next to post meta" http://themeshaper.com/forums/topic/adding-facebook-like-button-social-widgets-next-to-post-meta#post-18974 Fri, 04 Feb 2011 17:13:33 +0000 bluejpro 18974@http://themeshaper.com/forums/ The goal is to implement share and retweet buttons side by side. Here is a cool implmentation on this page: <a href="http://www.wpbeginner.com/wp-tutorials/how-to-add-facebook-like-button-in-wordpress/" rel="nofollow">http://www.wpbeginner.com/wp-tutorials/how-to-add-facebook-like-button-in-wordpress/</a> It's in a fixed position div that persists in the left margin as you go about the post. bluejpro on "Adding facebook like button / social widgets next to post meta" http://themeshaper.com/forums/topic/adding-facebook-like-button-social-widgets-next-to-post-meta#post-18972 Fri, 04 Feb 2011 14:54:31 +0000 bluejpro 18972@http://themeshaper.com/forums/ This was the error with the URL <code>The page at <a href="http://</?php+echo+urlencode%28get_permalink%28%24post-%3EID%29%29%3B+%3F%3E" rel="nofollow">http://</?php+echo+urlencode%28get_permalink%28%24post-%3EID%29%29%3B+%3F%3E</a> could not be reached.</code> bluejpro on "Adding facebook like button / social widgets next to post meta" http://themeshaper.com/forums/topic/adding-facebook-like-button-social-widgets-next-to-post-meta#post-18971 Fri, 04 Feb 2011 14:50:53 +0000 bluejpro 18971@http://themeshaper.com/forums/ And I see I need to close the <div> too... bluejpro on "Adding facebook like button / social widgets next to post meta" http://themeshaper.com/forums/topic/adding-facebook-like-button-social-widgets-next-to-post-meta#post-18970 Fri, 04 Feb 2011 14:49:32 +0000 bluejpro 18970@http://themeshaper.com/forums/ joperron's code did not work -- as-is --here is how I've modified it so far <pre><code><?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'); ?></code></pre> 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.... helgatheviking on "Adding facebook like button / social widgets next to post meta" http://themeshaper.com/forums/topic/adding-facebook-like-button-social-widgets-next-to-post-meta#post-18962 Fri, 04 Feb 2011 08:35:13 +0000 helgatheviking 18962@http://themeshaper.com/forums/ did joperron's code work? you haven't said. bluejpro on "Adding facebook like button / social widgets next to post meta" http://themeshaper.com/forums/topic/adding-facebook-like-button-social-widgets-next-to-post-meta#post-18957 Fri, 04 Feb 2011 02:44:41 +0000 bluejpro 18957@http://themeshaper.com/forums/ 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. wlanni on "Adding facebook like button / social widgets next to post meta" http://themeshaper.com/forums/topic/adding-facebook-like-button-social-widgets-next-to-post-meta#post-18924 Wed, 02 Feb 2011 22:59:39 +0000 wlanni 18924@http://themeshaper.com/forums/ 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: <a href="http://www.idontlikethisgame.com/updates/social-media-widget/" rel="nofollow">http://www.idontlikethisgame.com/updates/social-media-widget/</a> 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? joperron on "Adding facebook like button / social widgets next to post meta" http://themeshaper.com/forums/topic/adding-facebook-like-button-social-widgets-next-to-post-meta#post-18922 Wed, 02 Feb 2011 22:24:52 +0000 joperron 18922@http://themeshaper.com/forums/ Ok, sorry I didn't read the whole thread.... <pre><code>function child_postheader_postmeta() { $postmeta = '<div class="entry-meta">'; $postmeta .= thematic_postmeta_authorlink(); $postmeta .= ' | '; $postmeta .= thematic_postmeta_entrydate(); $postmeta .= thematic_postmeta_editlink(); $postmeta .= "</div>\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>'; } add_filter('thematic_postheader_postmeta','child_postheader_postmeta');</code></pre> Yes? This uses the official Twitter button, not Tweetmeme.... joperron on "Adding facebook like button / social widgets next to post meta" http://themeshaper.com/forums/topic/adding-facebook-like-button-social-widgets-next-to-post-meta#post-18921 Wed, 02 Feb 2011 22:13:10 +0000 joperron 18921@http://themeshaper.com/forums/ Hello, I always use this plugin: <a href="http://wordpress.org/extend/plugins/simple-facebook-connect/" rel="nofollow">http://wordpress.org/extend/plugins/simple-facebook-connect/</a> Activate the main plugin and the Like button module. Then put this in your functions.php (obviously modify to your liking): <pre><code>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> <div id="facebook_like"> <?php sfc_like_button(); ?> </div> </div> <?php }} add_action('thematic_belowpost','social_links');</code></pre> Enjoy! helgatheviking on "Adding facebook like button / social widgets next to post meta" http://themeshaper.com/forums/topic/adding-facebook-like-button-social-widgets-next-to-post-meta#post-18919 Wed, 02 Feb 2011 21:52:52 +0000 helgatheviking 18919@http://themeshaper.com/forums/ couldn't you just use this: <a href="http://wordpress.org/extend/plugins/tweetmeme/" rel="nofollow">http://wordpress.org/extend/plugins/tweetmeme/</a> but if not then you could take what i have above and swap out "Facebook Like Stuff" with your code... which didn't up well. you can post code between 2 backtick marks (top left of a US keyboard) bluejpro on "Adding facebook like button / social widgets next to post meta" http://themeshaper.com/forums/topic/adding-facebook-like-button-social-widgets-next-to-post-meta#post-18917 Wed, 02 Feb 2011 21:37:58 +0000 bluejpro 18917@http://themeshaper.com/forums/ The inspiration is this site where the index.php shows the tweetmeme button under the postmeta; <a href="http://epiclaunch.com/" rel="nofollow">http://epiclaunch.com/</a> bluejpro on "Adding facebook like button / social widgets next to post meta" http://themeshaper.com/forums/topic/adding-facebook-like-button-social-widgets-next-to-post-meta#post-18916 Wed, 02 Feb 2011 21:36:14 +0000 bluejpro 18916@http://themeshaper.com/forums/ 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 <a>&service=<service>&service_api=<api>"><img src="http://api.tweetmeme.com/imagebutton.gif?url=<url>" height="61" width="51" /></a> to what you have above helgatheviking on "Adding facebook like button / social widgets next to post meta" http://themeshaper.com/forums/topic/adding-facebook-like-button-social-widgets-next-to-post-meta#post-18910 Wed, 02 Feb 2011 20:28:37 +0000 helgatheviking 18910@http://themeshaper.com/forums/ 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! bluejpro on "Adding facebook like button / social widgets next to post meta" http://themeshaper.com/forums/topic/adding-facebook-like-button-social-widgets-next-to-post-meta#post-18904 Wed, 02 Feb 2011 17:36:13 +0000 bluejpro 18904@http://themeshaper.com/forums/ 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...