WordPress.org

1. xiabolai
   Member
   Posted 5 months ago #
   

   Hi!

   I am using the following function to place addthis share buttons after the content of each post:

   function diww_add_post_content($content) {
   	if (is_single()) {
   		$content .= '<div class="addthis_toolbox addthis_default_style">
   <a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
   <a class="addthis_button_tweet"></a>
   <a class="addthis_button_pinterest_pinit"></a>
   <a class="addthis_counter addthis_pill_style"></a></div>';
   	}
   	return $content;
   }
   
   add_filter ('the_content', 'diww_add_post_content', 0);

   It's working fine, but I also want to add a button for sharing on the site FANCY.com which mixes PHP and HTML and I can't figure out how to "open" and "close" each PHP snippet. Here is the FANCY button code:

   <a id="FancyButton" href="http://www.thefancy.com/fancyit?ItemURL=<?php the_permalink(); ?>&Title=<?php echo get_the_title(); ?>&Category=Men's&ImageURL=<?php if(function_exists('the_post_thumbnail')) echo wp_get_attachment_url(get_post_thumbnail_id()); ?>">Fancy</a>

   I don't know PHP...can someone please help me properly open and close this to work inside the function above?

   Thanks!

2. bcworkz
   Member
   Posted 5 months ago #
   

   Insert the following code below the last <a class=... line and above the curly brace '}' and the return $content; line.
   

   $content .= '<a id="FancyButton" href="http://www.thefancy.com/fancyit?ItemURL=';
   $content .= get_permalink();
   $content .= '&Title=';
   $content .= get_the_title();
   $content .= '&Category=Men\'s&ImageURL=';
   if(function_exists('the_post_thumbnail')) $content .= wp_get_attachment_url(get_post_thumbnail_id());
   $content .= '">Fancy</a>';

   Untested, hopefully I didn't make a dumb syntax error. Good luck.

3. xiabolai
   Member
   Posted 5 months ago #
   

   Thanks! Yes, it works! I really appreciate it.

   One other question: Is it possible to style this div? No matter where I try to place some CSS, it has no effect. I want to move the div down.

   Thanks again!

4. xiabolai
   Member
   Posted 5 months ago #
   

   Hi, sorry to trouble you but after further testing there is one small problem. It's popping up an error saying it can't find the path to the image...but it is finding the path and it's working properly. Can you think of any reason why, when using this code, it's showing a false error message?

   Thanks!

5. bcworkz
   Member
   Posted 5 months ago #
   

   Speaking of divs, I didn't pay much attention to what I was doing, thefancy button code is not in the div with the rest of the buttons. To make it so, cut the </div> out of the end of the last <a class=... line, such that the single quote and semi-colon follow the </a> tag. Paste that </div> in the similar location of the last line of the code I provided so it looks like $content .= '">Fancy</a></div>';

   Yes, you should be able to move the div down. Styling WP can be a nightmare. Combined with CSS often being confusing anyway, like the 'top' style only works with certain 'position' styles. (Or something like that, I can't keep it straight) You really need a CSS analysis tool to know where to adjust the style. Firefox has the Firebug plugin for this, other browsers have similar tools built in. Even once you determine the right place to edit the styling, sometimes you still need to add the '!important' modifier to your rule to get it to take effect.

   If you get really desperate, you could add a style attribute directly to the <div> html code. Not recommended, but a possibility.

   For the image error thing, you might check the html source of the buttons in your browser and verify the thumbnail url that's passed to thefancy.com is completely correct in form and syntax. Also, I'm surprised the url in this situation is not urlencoded. You might try that to see if it helps. In my code, make the part after the if() portion look like
   

   $content .= urlencode(wp_get_attachment_url(get_post_thumbnail_id()));

   Alternately, it may break the button, but worth a try.

   I hope you can make sense of all of this. Cheers.

6. xiabolai
   Member
   Posted 5 months ago #
   

   Hi!

   Thank you SO MUCH for all of the information and advice. I will give everything a try. Yes, the CSS is tricky. I'm pretty good with CSS and have tried everything, including adding styling to the div itself (as in <div style="margin-top: 20px !important;"), as well as naming the div and adding styling to the style.css...but nothing works. I thought it's because it's in a function which I'm not familiar with styling within a function. Guess I'll keep trying.

   Anyway, thanks again!

7. xiabolai
   Member
   Posted 5 months ago #
   

   Hi!

   Perhaps I can trouble you one more time. I have a clue regarding the image error. In the html source, the Fancy.com share button image path link getting the error looks like this:

   ImageURL=http%3A%2F%2Fmysite.com%2Fwp-content%2Fuploads%2F2012%2F10%2Fthe_image.jpg

   Notice the slashes are being replaced by %2F.

   But in my live site where the Fancy.com button functions without error, the image path link looks like this:

   ImageURL=http://mysite.com/wp-content/uploads/2012/10/the_image.jpg

   Notice the slashes are correct.

   Does this tell you why the error is happening, and perhaps how to correct it?

   BTW, I tried adding the the urlencode and that had no effect.

   Thanks!

8. bcworkz
   Member
   Posted 5 months ago #
   

   CSS. Arrrgh! Yes, sometimes margins do not seem to work. top seems reliable IF the position style of the container and it's parent are right. Keep trying, something will work. A good approach would be to get it working with the tag's style attribute, then move it to the css file and hope it still works.

   Urlencode basically hex encodes the slashes among a few other characters, I had thought the slashes may have been causing the problem. Seems to be the other way around. I can't imagine where else this happens. AFAIK, wp_get_attachment_url returns true slashes. The 'the_content' filter gets immediately echoed out to the browser on return. Could there be another hook to 'the_content' processing the content? Some plugin? Not sure why a plugin would do that, grasping at straws I guess.

   Since you have a functional link, it's clear the hex encoding needs to be stopped. Assuming you've since removed my useless urlencode idea, I don't know where else this could be happening.

9. xiabolai
   Member
   Posted 5 months ago #
   

   Okay, thank you again for all of your help. I'll keep trying the CSS as well as the Fancy.com button image path issue. There's absolutely no reason for it to trigger an error pop-up...it's working fine. One of those vexing problems that's probably just too simple to notice.

   Thanks!

Reply

You must log in to post.