Twitter Widget

[Corinne]

Hi, Can anyone help with the twitter widget please? We have a few dotted around our platform from various subjects and we also have 2 on our school website on the homepage (which is a frog learn site). These do not display and this is causing issues as staff use these to post updates and news and if they are not showing on out public site it is missing a big chunk of information. 

I tired the fix which was mentioned here a while ago, this displayed the feeds for I think about a day or 2 and then they have gone back to displaying the message "Tweets by...." as link to the twitter, but not actually showing the feed. 

Does anyone know what this is and how to fix it? I have the head of school, head of ICT and head of sixth form all wanting these fixed but I cannot work out what the issue is. 

 

[Graham Quince]

Hi @Corinne

I'd noticed some issue with the Twitter code myself and when i mentioned this to one of our devs, they pointed out that part of the problem is with Twitter's own script.   I've been opting back to using TwitRSS.me instead and the RSS widget.   

[ADT]

1 hour ago, Graham Quince said:

Hi @Corinne

I'd noticed some issue with the Twitter code myself and when i mentioned this to one of our devs, they pointed out that part of the problem is with Twitter's own script.   I've been opting back to using TwitRSS.me instead and the RSS widget.   

Ah the old "Third Party" excuse....

[Graham Quince]

[Corinne]

@Graham Quince although not as 'pretty' as the twitter feed that solution works! Thanks 

[Graham Quince]

You can target it like any widget for styling?

This is the CSS i use for the forum feed on the community:

 /* RSS feed - forum activity*/
    div[data-content-uuid="D2C73B0D200288AE6903DFFA2E2A1302C38D3B1C96E71BC6"] h2:before  {
        content:"Frog Forums - ";
    }
    div[data-content-uuid="D2C73B0D200288AE6903DFFA2E2A1302C38D3B1C96E71BC6"] h2  {
        visibility:hidden;
        height:0px;
        overflow:hidden;
    }
    div[data-content-uuid="D2C73B0D200288AE6903DFFA2E2A1302C38D3B1C96E71BC6"] small  {
        visibility:hidden;
        height:0px;
        overflow:hidden;
    }
    div[data-content-uuid="D2C73B0D200288AE6903DFFA2E2A1302C38D3B1C96E71BC6"] a  {
       color:#0071b9;
       font-weight:bold;
    }
    div[data-content-uuid="D2C73B0D200288AE6903DFFA2E2A1302C38D3B1C96E71BC6"] .feed_content  {
        position:relative;
        top:-40px;
    }

 

[paulmitchell1989]

For multiple Twitter accounts I've found that embedding the Twitter widget in a blank Frog 3 page and then embedding that page using the 'Embed Frog 3.0' works wonders  

[Corinne]

4 hours ago, paulmitchell1989 said:

For multiple Twitter accounts I've found that embedding the Twitter widget in a blank Frog 3 page and then embedding that page using the 'Embed Frog 3.0' works wonders  

I am hoping to be done with Frog 3 soon so this wouldn't fix the issue for very long. 

@Graham Quince I will try that now thanks 

[vikpaw]

The info here just helped me sort this problem : https://www.frogcommunity.com/app/os#!twitter-embed/

 

[Sue Busher]

I am really struggling to get this working. All I get is 'Tweets by Kennet School' link - not the actual feed which I was hoping for. Any advice?

[Graham Quince]

Hi @Sue Busher

Which site are you trying to add this to?   I'll dial in and take a look

[Sue Busher]

I am trying to add it to the News section of our new website - site name - Kennet School

 

Thanks @Graham Quince

[Graham Quince]

Hi @Sue Busher

You were still using the basic twitter code (i think).  I've swapped it for the code on the tutorial page:

https://www.frogeducation.com/community/tutorials/html-tutorials/embed-twitter

 

[Sue Busher]

@Graham Quince Thank you - works perfectly now.

On the same site, I am having all kinds of trouble getting the table widget, the text table widget and the slide show to resize nicely when in  mobile view. Are there any tricks of the trade that I am missing? Or can you pop on to see what I am doing wrong?

 

Thanks

[Graham Quince]

Hi

You have a fixed width in the table properties.  These can't resize below the width you've added, however if you take a look at this tutorial, you can use CSS to make it responsive.

Control visibility of tables on mobile screens
https://www.frogeducation.com/community/tutorials/html-tutorials/css-styling

[Sue Busher]

@Graham Quince

I have watched this a couple of times and will give it a go, although this doesn't explain how I address the issues I am getting with the table widget. Are you suggesting that I need to rebuild these in the text table widget? A lot of mine have images within the table - will these resize or will I need to adjust?

See the Learning >  Subjects page on the site I mentioned to see what I am talking about.

Edited March 26, 2018 by Sue Busher

[Graham Quince]

Hi Sue,

It's all about the percentages.  If you use pixel dimensions in tables or images you can run into problems.  The tutorial suggests recreating the menu as a mobile view and using CSS to toggle visibility depending on screen width. 

Hope that helps

Graham

[Sue Busher]

@Graham Quince

OK, so I created two tables and added the style sheet class 'desktop' the other 'mobile' as per the video. Added the HTML code to the bottom of the site home page. However, it isn't hiding the tables properly. Can you have a look at the > Learning > Key Stage 3 page and let me know what I've done wrong please?

[Simon Law]

ok, so we have a couple of typos and a missing bracket

@media screen and (max-width: 700px) was missing the '(' start bracket

The semicolon needed to be a colon ':'

@Sue Busher The editor although a bit basic, does try to show you when something is wrong, in the screenshot .mobile and .desktop are highlighted.

I have corrected your CSS and it now works

[Sue Busher]

@Simon Law

Thank you. From the CSS video link which Graham provided, I couldn't see any code to copy and paste so it was me trying to copy it down. Appreciate you sorting it for me - best get myself on a CSS course