Hi Friends, I added Facebook Like button and Send button to viewlisting.tpl {literal} <div id="fb-root"></div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) {return;} js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); </script> <div class="fb-like" data-send="true" data-width="450" data-show-faces="false"></div> {/literal} When I click Send button, popup window appears. But, no image is displayed. viewlisting.tpl page displays one thumbnail image. Facebook suggesting to include Get Open Graph Tags in <head> section. <meta property="og:image" content="" /> viewlisting.tpl does not have <head> section. layout.tpl has <head> section. Added the following line to the layout.tpl <head> section. <meta property="og:image" content="{$smarty.const.URL}/thumbs/small_{$image.image}" /> View listing page - source code - <head> section show: <meta property="og:image" content="http://mysite.com/thumbs/small_" /> {$image.image} is not replaced with the value in layout.tpl Because {$image.image} is available in viewlisting.tpl, not in layout.tpl How to make {$image.image} from viewlisting.tpl available in layout.tpl? Any help is appreciated. Thanks. Peri
I'm not sure what you are doing exactly, but I've had great success using addthis.com to add social sharing features to my classifieds. Very simple code and it works great with 68C...also comes with full analytics.
Basically, I am adding Facebook social plugin Like button and Send button to viewlisting.tpl Facebook documentation https://developers.facebook.com/docs/reference/plugins/like/ I already tried addthis – Facebook Like button and Send button <div class="addthis_toolbox addthis_default_style "> <a class="addthis_button_facebook_like" fb:like:layout="button_count"></a> <a class="addthis_button_facebook_send"></a> </div> <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4ed3e1110a8660f5"></script> Above addthis code displays Like button. But, it does not display Send button. When I click Like button, above code publish the listing at Facebook Wall. But, it does not publish the listing pic. Peri
John, Blair, Any suggestion on how to bring {$image.image} from viewlisting.tpl to layout.tpl? Mike, David, Have you implemented Facebook Like and Send button in your application? Any suggestion on how to resolve pic problem. Thanks. Peri
You don't "like" a single element on the page, you "like" a page. Don't see how you're going to get that to work.
The end result is the same, the layout code and the viewlisting code is complied to a single file and then output as html together. Any javascript running will run on the whole source, so you don't need to add variables belonging to 1 template to another, especially to the layout which is used by all pages.
Mike, John I just copied the code generated from Facebook and pasted at viewlisting.tpl At view listing page, when I click Like or Send button, page Title and Description published at Facebook. But, the problem is that Like & Send button do not publish the pic. Particularly, I want the listing pic to be published. Facebook suggesting to include the following code in the <head> section. meta property="og:image" content="" /> content is the URL to the pic. Like & Send button will pick up this pic, not other images in the page. I noted the following URL of the listing pic from vielisting.tpl {$smarty.const.URL}/thumbs/small_{$image.image} I build the following code: <meta property="og:image" content="{$smarty.const.URL}/thumbs/small_{$image.image}" /> Included in the <head> section in layout.tpl HTML code of the view listing page shows the following line: <meta property="og:image" content="http://mysite.com/thumbs/small_" /> Smarty variable {$image.image} is not replaced with the listing pic name. For testing purpose, I hard coded the listing pic name product.jpg <meta property="og:image" content="{$smarty.const.URL}/thumbs/small_product.jpg" /> What a magic, Like & Send button pick up and publish the pic product.jpg at Facebook. Please help me on how to build the following code with listing pic name: <meta property="og:image" content="{$smarty.const.URL}/thumbs/small_***" /> *** = listing pic name Peri
Ok, edit templates/default/layout.tpl and place this in the head: HTML: {if $body == 'viewlisting.tpl'} {if $data.0.image} <meta property="og:image" content="{$smarty.const.URL}/thumbs/small_{$data.0.image}" /> {/if} {/if} In viewlisting.tpl the images are in the $data array, and the first image will be 0.
John, Your code Simply Works ! I am Very Excited ! I copied your code and placed in <head> section of layout.tpl Facebook Like and Send buttons promptly pick up the listing pic and published in Facebook. You guys are great techies ! Mike, freeze2, Thank you for your replies. Since John's code works well, I live with it. Thank you guys for all the help. Peri
John, When the user post a listing without photo, view listing show the pic NO PHOTO AVAILABLE. After place the following code in <head> section of layout.tpl, view listing gives run time error. HTML: {if $body == 'viewlisting.tpl'} {if $data.0.image} <meta property="og:image" content="{$smarty.const.URL}/thumbs/small_{$data.0.image}" /> {/if} {/if} After seeing the viewlisting.tpl, I applied the if…else structure to the above code. Following is the new code: HTML: {if $body == 'viewlisting.tpl'} {if $viewphotos=="Y" && $data <> ''} {if $data.0.image} <meta property="og:image" content="{$smarty.const.URL}/thumbs/small_{$data.0.image}" /> {else} <meta property="og:image" content="{$smarty.const.URL}/templates/{$smarty.const.MAIN_TEMPLATE}/images/nophoto.gif" /> {/if} {else} <meta property="og:image" content="{$smarty.const.URL}/templates/{$smarty.const.MAIN_TEMPLATE}/images/nophoto.gif" /> {/if} {/if} Above code works well whether the user post photo or not. Please confirm if the above code is correct. If not, please help to amend the code accordingly. Thank you. Peri
Hey all i was wondering if anyone else might have noticed that the og image code isn't working anymore? It seems like a recent change to facebook isn't allowing it to pick up the code. Could anyone verify the same issue?
Just a little follow up to see if anyone else had the same issue as me? The og image, title and description is really useful for facebook marketing.
From Facebook Developer: The URL of an image which is used in stories published about this object. We suggest that you give us an image of at least 200x200 pixels. I believe they took smaller resolutions previously. You are feeding them the thumbnail image. I would suggest sending them the full image. I think they are requiring the larger size to be able to send 2x thumbnail images to the high density screens in many mobile devices (e.g. 200x200 = hi-res 100x100 displayed image)
I found out what the issue was, for some strange reason facebook is reading the wrong rel=canonical link When I passed this through: http://www.performancecentral.com.au/listing/2896/timing_belt_tensioner_to_suit_96_subaru.html It picks up the rel-canonical link as: http://www.performancecentral.com.a.../timing_belt_tensioner_to_suit_96_subaru.html I'm not quite sure where this may be coming from. For now I had to do a temp implementation which is: <meta property="og:url" content="{$smarty.const.URLS}/listing/{$lid}/{$title|replace:' ':'_'|replace:'+':''|truncate:70}.html" />
