Log in | Register
  1. Forum
  3. Discontinued Products
  5. JFBConnect v8.x Support (Joomla 3 Only) (CLOSED)
  7. use your share feature within another component?

Topic-icon use your share feature within another component?

Active Subscriptions:

None
8 years 11 months ago #52996 by Beatsuka
Hi

Is it somehow possible for me to use your share feature, ether directly from JFBConnect itself or the module to display within a certain component?
The component / extension is a vehicle advert program that has it's own share feature but it does not share correctly and I can not for the life of me figure out how to fix it..

You can see the share buttons currently in use here just under the images and at the bottom:
bilasidan.is/component/jsautoz/overview/...BDsing-57?Itemid=215

It doesn't share the correct photo and the correct text. I was hoping maybe yours could..

I was thinking in the lines of placing the share options from your component where the current share options are now.
So it would have to be placed within the php code for that certain view.

Looking forward to hear from you if this is possible or not.

best regards
Beatsuka
The topic has been locked.
Active Subscriptions:

None
8 years 11 months ago #53002 by Beatsuka
Hi again...
I ofc. found what I was looking for here: www.sourcecoast.com/jfbconnect/docs/social-sharing/easy-tags

This is what you get for not speaking native english.. you are not always sure what you are looking for :P

But since this is open. Maybe you can give me one pointer with this..
I have set it up to replace the built in share options of the extension i'm using.. 3 issues i'm having.

issue nr 1.
It is much better now, G+ works great. Twitter works wonders but FB is still bugging me.. Only shares the title correctly. but not the image and the text I wanted..
I am try'n to imput some opengraph lines aswell. so far I managed to create a custom description. but the image part is not working as I would have hoped.
I have imput these opengraph options:
{SCOpenGraph description=Auglýstu bílinn þinn frítt á Bílasíðunni! } 
{SCOpenGraph image="http://bilasidan.is/js_autoz_data/data/vehicle/vehicle_<?php echo $this->vehicle->id; ?>/images/thumbs/<?php echo 'jsautoz_l_' . $vehicleimage->filename; ?>"}

Facebook debug tool gives me this critical error:

Object at URL 'bilasidan.is/auglysingar/overview/vehicl...3%BDsing-57/dealer--' of type 'article' is invalid because the given value ''bilasidan.is/js_autoz_data/data/vehicle/..._l_124lambo2.jpg.jpg'' for property 'og:image:url' could not be parsed as type 'url'.


The image url created by the above opengraph string works if you put it in the addressbar directly.

Second problem is...
The share buttons do not align properly.
The div's I used was the same as for the other share buttons that were before and aligned perfectly but facebook button now is a bit lower then the others. .. see screenshot.

File Attachment:


Here is the code for the total commands in my script
<div id="jsautoz_share_pannel">
                {SCOpenGraph description=Auglýstu bílinn þinn frítt á Bílasíðunni! } 
                {SCOpenGraph og:image:url="http://bilasidan.is/js_autoz_data/data/vehicle/vehicle_<?php echo $this->vehicle->id; ?>/images/thumbs/<?php echo 'jsautoz_l_' . $vehicleimage->filename; ?>"}
                    <div id="jsautoz_share_content" class="border-share">
                        {SCTwitterShare data_count=horizontal via=bilasidan related=mandreae hashtags=bilasidan,tilsölu size=medium}
                  </div>
                
                    <div id="jsautoz_share_content" class="border-share">
                        {SCGooglePlusOne size=medium annotation=bubble}
                    </div>
               
                    <div id="jsautoz_share_content" class="border-share">
                     {JFBCShare layout=button_count}  
                    </div>


Third problem..
It's the speed the share buttons load. takes a bit long imo. I would love to know if this is just normal or if there is something I can do.
I have asked this before. but that was for the module. I suppose the answere is the same. that it's just the normal loading time and nothing to be done about it. but if so. then that is so. but it's best to ask anyways just incase..
The topic has been locked.
Support Specialist
8 years 11 months ago #53003 by alzander
It looks as though you've already figured out how to use our share features in your content as I see the Twitter, G+1 and Facebook Share buttons on that page are from JFBConnect. The Share button also looks to work as expected with the proper image, title and description.

If you're still looking for help, just let me know and we'll help however we can.

Thanks,
Alex
The topic has been locked.
Active Subscriptions:

None
8 years 11 months ago #53008 by Beatsuka
Hi Alex

Yeah i still need help i'm afraid. see my reply to my original post.
I get critical error on the facebook debug issue when i try to tell the opengraph what image to use.
the share buttons do not align properly (Facebook button is few px lower then the others and quite far apart from the g1+ button)

Detailed description in the first reply of this post .

All help is greatly accepted thank you :)
Best regards
Beatsuka
The topic has been locked.
Support Specialist
8 years 11 months ago #53017 by alzander
Looks like my post and your post were being made at the same time. Let's see how I can help with your issues below :)

1) The og:image tag that's being inserted on the page looks like:
<meta property="og:image:url" content="'http://bilasidan.is/js_autoz_data/data/vehicle/vehicle_57/images/thumbs/jsautoz_l_124lambo2.jpg.jpg'"/>
That's incorrect because of the following:
* It should just be og:image
* The URL has extra quotes around it.

Please update the SCOpenGraph tag to look like:
{SCOpenGraph og:image=http://bilasidan.is/js_autoz_data/data/vehicle/vehicle_<?php echo $this->vehicle->id; ?>/images/thumbs/<?php echo 'jsautoz_l_' . $vehicleimage->filename; ?>}

2) Facebook looks to be adding a vertical-align:bottom tag to one of their CSS properties. This looks to be a new change that is affecting the layout on many sites. That's making the widget shift down. I'd suggest adding the following to your template's CSS, which should correct the problem:
.sourcecoast.facebook .fb-share-button > span {
  vertical-align: initial !important;
}

3) I didn't really see any loading issues. The buttons do appear last, but the overall load time is pretty quick. The page renders in about 1 second and the buttons are loaded shortly thereafter. With that said, there's not much to be done. Those buttons are loaded over Javascript and are intentionally instructed to load after the rest of the page. The alternative is for the buttons to slow down the rest of the page from loading, which wouldn't be acceptable to just about any users.
The topic has been locked.
Active Subscriptions:

None
8 years 11 months ago #53019 by Beatsuka
Brilliant. thank you for your reply sir!

The image now seems to work. it does display the correct image but still gives me this error:

og:image was not defined, could not be downloaded or was not big enough. Please define a chosen image using the og:image metatag, and use an image that's at least 200x200px and is accessible from Facebook. Image 'bilasidan.is/images/banners/sidebanner5.png' will be used instead.


Strange that it say's that the image "sidebanner5.png" will be used but still it uses the image I point to...
plus that the image I point to is 300x223 px ... not sure on why debugger say's this is a problem..

I also get this error:

og:url tag in the header is not the same URL as rel='canonical' link in the html.


Not sure if this is a problem or just let it go?


The css code fixed the visual issue so it now is in the same hight as the rest.
There is some issue with the G+ button width. since I have this set like {SCGooglePlusOne size=medium annotation=bubble} I can not set the width unless it disapears completely. and I tried to edit the code for .sourcecoast.plusone from the original 90px down to 57px but that messed also with the look of the module parts on the website.

I "fixed" this by just switching G+ to show last. even though it's different on other parts of the website this will do for now :)


The speed is not that bad when i think of it. I was just used to the static images that loaded instantly .. but this is better in so many ways that I dont even care about 1-2 second issues.. :) And you are right. better to have the buttons load few ms's / sec's later then to have the whole content slow down.


I have one more question. Now since I managed to implement this within this section of the website I am looking to implement on another section but it is just a tad more complicated.
Is it possible to make the share buttons share a target url of a link?
meaning when users of my website go to "your adverts" they get a list of all vehicles that they have signed up on the website.. in the list now are share buttons from the extension (that ofc don't work) that I want to replace with your share buttons.
but they would have to share the advert itself instead of the current url the sahre buttons are displayed on.
Is that possible?

Best regards and thank you so much for outstanding help like usual!
Beatsuka
The topic has been locked.
Active Subscriptions:

None
8 years 11 months ago #53020 by juanhck
Hello Alex!
In case you´ve missed it i still have this problem here:

www.sourcecoast.com/forums/jfbconnect/jf...image-and-basic-data

thank you very much!
The topic has been locked.
Support Specialist
8 years 11 months ago #53024 by alzander

The image now seems to work. it does display the correct image but still gives me this error:

I'd disregard it. Their tool sometimes mis-diagnoses images as too small. If they are large enough though, Facebook will actually use them. Everyone has bugs :)

og:url tag in the header is not the same URL as rel='canonical' link in the html.

Not ideal, but wouldn't worry about it too much as long as the og:url and rel='canonical' point to the same representation of the page.

Share URLs
Almost all of the tags support an href parameter, like:
{JFBCLike href=http://yoursite.com/link-to-target}
You can combine that with PHP like in your image tags as well:
{JFBCLike href=http://yoursite.com/<?php echo 'link-to-target' ?>}

I hope that helps!

Thanks,
Alex
The topic has been locked.
Support Specialist
8 years 11 months ago #53025 by alzander
juanhck,
Please don't post in other user's threads to point to your issues. We try to answer all questions as soon as we can. Some take longer than others depending on the specifics of the problem.

Thanks,
Alex
The topic has been locked.
Active Subscriptions:

None
8 years 11 months ago #53050 by Beatsuka
Thank you Alex for the reply and info

I did try this last night with many variations. and I managed to get the twitter share to link to the correct page.

The G+ button links to the correct page aswell but it doesn't display the correct title. will need to look into that further, any pointers on that?

The facebook button does not link to the correct one though. still just links to current page even though I use the same url as for twitter and google? it also just shares the current page title and some random image.

Code I am using for that currently is:
{SCOpenGraph title=$this->vehicle->maketitle . ' ' . $this->vehicle->modeltitle . ' ' . $this->vehicle->modelyeartitle . ' ' . ('- Bílasíðan.is');}
                                                        {SCOpenGraph description=Auglýstu bílinn þinn frítt á Bílasíðunni! } 
                                                     {SCOpenGraph og:image=http://bilasidan.is/js_autoz_data/data/vehicle/vehicle_<?php echo $this->vehicle->id; ?>/images/thumbs/<?php echo 'jsautoz_l_' . $vehicleimage->filename; ?>}
                                                        <div id="jsautoz_share_content" class="border-share">
                                                        {SCTwitterShare href=http://bilasidan.is/thinar-auglysingar/overview/cont-vehicle/cond--/vehicle-<?php echo JText::_($vehicle->maketitle); ?>-<?php echo JText::_($vehicle->modeltitle); ?>-<?php echo JText::_($vehicle->id); ?> data_count=horizontal via=bilasidan related=mandreae hashtags=bilasidan,tilsölu size=medium}
                                                     </div>
                                                         <div id="jsautoz_share_content" class="border-share">
                                                           {JFBCShare href=http://bilasidan.is/thinar-auglysingar/overview/cont-vehicle/cond--/vehicle-<?php echo JText::_($vehicle->maketitle); ?>-<?php echo JText::_($vehicle->modeltitle); ?>-<?php echo JText::_($vehicle->id); ?> layout=button_count}  
                                                      </div>
                                                           <div id="jsautoz_share_content" class="border-share">
                                                             {SCGooglePlusOne href=http://bilasidan.is/thinar-auglysingar/overview/cont-vehicle/cond--/vehicle-<?php echo JText::_($vehicle->maketitle); ?>-<?php echo JText::_($vehicle->modeltitle); ?>-<?php echo JText::_($vehicle->id); ?> size=medium annotation=bubble}
                                                        </div>

I have tried with and without the OpenGraph texts. this is just where I left of last night , testing few opengraph's to see if I could make the title, description change etc.

I don't think the debug tool helps with this since it will just render the current page instead of reading each fb button, right?

I'm all ears if you got some sugestions here :)

Best regards
Beatsuka
The topic has been locked.
  1. Forum
  3. Discontinued Products
  5. JFBConnect v8.x Support (Joomla 3 Only) (CLOSED)
  7. use your share feature within another component?
From the Blog
Facebook | Twitter | LinkedIn | Blog RSS