Solved

Twitter list

Posted on 2014-11-19
30
63 Views
Last Modified: 2016-05-10
Do you think it would be feasible to insert a Twitter listing in the leftmost column of the homepage at the bottom where there's free space here at http://www.smartgrowthanalytics.co.uk/index.html without putting the page layout out of whack?

Ideally what i'd like is a demo, someone having used their browser dev tools to do a proof of concept plus taking a screenshot of the temporary result.
0
Comment
Question by:CEHJ
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 13
  • 13
30 Comments
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 40454172
Charles! Long-time no-see, sir.

I am on an iPad at the moment and can't do a mockup but I can do one in a few hours.  Eyeballing it, I can see a widget will probably fit there but it might be a bit on the narrow side.
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 40455898
Here's a quick mockup:

Mockup
0
 
LVL 86

Author Comment

by:CEHJ
ID: 40455915
That, my dear sir, is brilliant! Would you be so kind as to

a. post the code (suitably obfuscated as necessary) that you used to create the feed?
b. show me the exact location for insert?
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 40455925
And another with reduced widget height (first was 600px, this one is 400px)

Resized
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 40455941
So the code simply comes from the Twitter Widget Generator.  Login to your Twitter account, go to Settings.  On the menu on the left, the last item is Widgets.  Click it, then click "Create New Widget" when you see it.

I've attached a screenshot of the settings I used:

Jason's Widget
Once you create the Widget (and you can do so with your account, a search, someone else's account e.g. CNN or a hashtag) and save it, Twitter gives you some code to copy/paste into your site.  From the above, this is it:

<a class="twitter-timeline" data-dnt="true" href="https://twitter.com/CNN" data-widget-id="535506810950545408">Tweets by @CNN</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

Open in new window


Just stick the generated code where you want the widget to appear.  In your case, I stuck it right after the closing <p> tag of this paragraph:

We provide economic intelligence to inform business plans of both the Private Sector and the Public Sector, including planning activities of economic development organisations. We provide Regional Growth Fund support, Core Strategy development and Inward Investment Support. more

and removed the scripts that were there as I think they are unnecessary.
0
 
LVL 86

Author Comment

by:CEHJ
ID: 40456150
Funny thing is, i did that on a test page and it decimated the page layout. I suppose i could have made a bit of a blunder
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 40456166
It shouldn't do anything to layout UNLESS you don't have good CSS controlling div widths.  The twitter widgets expand to fill any available width so as long as it appears inside of a well-defined div, you shouldn't have problems with it.
0
 
LVL 86

Author Comment

by:CEHJ
ID: 40456178
Well i'm puzzled now, as surely the CSS of the site in question was in force on your mockup?
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 40456211
Yes, but I have a feeling you put the code in the wrong place.
0
 
LVL 86

Author Comment

by:CEHJ
ID: 40456233
What i'm getting at is that i'll be using the same CSS as you, won't i?

Did you by any chance remove some scripts before you pasted it?
0
 
LVL 86

Author Comment

by:CEHJ
ID: 40456278
Yup, check out this horror - it appears to be in the right place

http://www.smartgrowthanalytics.co.uk/index-test.html
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 40456558
Your code is different from mine....

<!-- Twitter --> 
<iframe title="Twitter Timeline" style="border: medium none; max-width: 100%; min-width: 180px; width: 220px;" allowfullscreen="" class="twitter-timeline twitter-timeline-rendered" allowtransparency="true" scrolling="no" id="twitter-widget-0" frameborder="0" height="600"></iframe>
<script>// <![CDATA[
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
// ]]></script>
<!-- end Twitter -->

Open in new window


You're using an iframe and that's what is throwing things off.  Where did you get that code from?
0
 
LVL 86

Author Comment

by:CEHJ
ID: 40456894
Jason, i think the js is replacing nodes in the document as this is what i was given and inserted:

<a class="twitter-timeline" href="https://twitter.com/XXXX" data-widget-id="535206678560772097">Tweets by @XXXX</a>
<script>// <![CDATA[
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
// ]]></script>

Open in new window


(i've slightly obfuscated there so as not to cause search noise)
0
 
LVL 70

Accepted Solution

by:
Jason C. Levine earned 500 total points
ID: 40467448
The code is still slightly different from mine

<a class="twitter-timeline" href="https://twitter.com/XXXX" data-widget-id="535206678560772097">Tweets by @XXXX</a>
<script>// <![CDATA[
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
// ]]></script>

vs.

<a class="twitter-timeline" data-dnt="true" href="https://twitter.com/XXXX" data-widget-id="535506810950545408">Tweets by @XXXX</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

I've bolded the obvious changes.  It may be that those are causing the difference.  The other issue might be me downloading the page and editing it locally.  While I am downloading all scripts and styles, it is possible the rendering on the server throws off the layout.  It shouldn't though...

Try my version of the code with data-dnt in the <a> tag and CDATA references removed and see if it works?
0
 
LVL 86

Author Comment

by:CEHJ
ID: 40467587
Sorry Jason - no dice. As you can see, i put in the data-dnt attribute, but i'm afraid the CDATA is simply reinserted after i remove it

http://www.smartgrowthanalytics.co.uk/index-test.html

is still well and truly skew-whiff
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 40467607
And if you take all of the Twitter code out, the ul's realign properly?
0
 
LVL 86

Author Comment

by:CEHJ
ID: 40467640
Jason - we might be getting somewhere - though i don't know where ;)

I thought i might have malformed html (you'll have to forgive me - i'm working in a control panel that has no indentation whatsoever and the server removes indentation)

I pasted the source into an editor then copied and saved it then ran Tidy on it to validate and indent. Then i copied and pasted back into the site page. It's still skew-whiff with the Twitter code removed (!) There's something wrong, but i don't know what
You can confirm the page is wonky perhaps?
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 40467677
I think you may have some missing closing </div> tags in the upper part of the document and that's throwing it off but it's such a complicated mess of nested divs I'm having a hard time seeing it.

Can you roll back to known-good state?
0
 
LVL 86

Author Comment

by:CEHJ
ID: 40467947
Well index.html is that good state actually
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 40468447
Okay, from that page I see:

				<div class="col-220">
					<h3><cufon style="width: 38px; height: 18px;" alt="Our " class="cufon cufon-canvas"><canvas style="width: 57px; height: 20px; top: -3px; left: -2px;" height="20" width="57"></canvas><cufontext>Our </cufontext></cufon><cufon style="width: 55px; height: 18px;" alt="clients" class="cufon cufon-canvas"><canvas style="width: 71px; height: 20px; top: -3px; left: -2px;" height="20" width="71"></canvas><cufontext>clients</cufontext></cufon></h3> <br>

					<p>We provide economic intelligence to inform business plans of both the Private Sector and the Public Sector, including planning activities of economic development organisations. We provide Regional Growth Fund support, Core Strategy development and Inward Investment Support. <a href="about.html">more</a></p>

<script charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
  version: 2,
  type: 'profile',
  rpp: 4,
  interval: 15000,
  width: 'auto',
  height: 320,
  theme: {
    shell: {
      background: '#ffffff',
      color: '#346699'
    },
    tweets: {
      background: '#ffffff',
      color: '#000000',
      links: '#346699'
    }
  },
  features: {
    scrollbar: false,
    loop: true,
    live: true,
    behavior: 'default'
  }
}).render().setUser('growthanalytics').start();
</script>

				</div><!-- end .col-220 --> 				

Open in new window


Delete the scripts after the end of the paragraph, add the Twitter embed code:

				<div class="col-220">
					<h3><cufon style="width: 38px; height: 18px;" alt="Our " class="cufon cufon-canvas"><canvas style="width: 57px; height: 20px; top: -3px; left: -2px;" height="20" width="57"></canvas><cufontext>Our </cufontext></cufon><cufon style="width: 55px; height: 18px;" alt="clients" class="cufon cufon-canvas"><canvas style="width: 71px; height: 20px; top: -3px; left: -2px;" height="20" width="71"></canvas><cufontext>clients</cufontext></cufon></h3> <br>

					<p>We provide economic intelligence to inform business plans of both the Private Sector and the Public Sector, including planning activities of economic development organisations. We provide Regional Growth Fund support, Core Strategy development and Inward Investment Support. <a href="about.html">more</a></p>

<a class="twitter-timeline" data-dnt="true" href="https://twitter.com/CNN" data-widget-id="535506810950545408">Tweets by @CNN</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
				</div><!-- end .col-220 --> 	

Open in new window


The cufon stuff probably won't appear in the actual source code as that's re-rendered via something else.  Included to show the parent div.  If you do just that, you should be okay.
0
 
LVL 86

Author Comment

by:CEHJ
ID: 40468890
http://www.smartgrowthanalytics.co.uk/index-test.html
is the result - still borked

Of course, it doesn't help that this site, as you say, is a mass of nested divs. I suspect it was created by a machine
0
 
LVL 58

Expert Comment

by:Gary
ID: 40522173
I've requested that this question be closed as follows:

Accepted answer: 500 points for Jason C. Levine's comment #a40468447

for the following reason:

This question has been classified as abandoned and is closed as part of the Cleanup Program. See the recommendation for more details.
0
 
LVL 86

Author Comment

by:CEHJ
ID: 40520975
Nope - i'm still waiting for the results of testing from Jason
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 40521258
You never mailed me the original file :)
0
 
LVL 86

Author Comment

by:CEHJ
ID: 40521626
Actually i sent it on the first of December Jason - sent (forwarded) again
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 40522174
My fault, I didn't check spam folders. This question will resume.
0
 
LVL 86

Author Comment

by:CEHJ
ID: 40526761
Yes, that's good (just responding to EE reminder)
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
bootstrap wrap text 1 34
Text color in a select 11 23
CSS Won't Show Up On Drupal Omega Sub-Theme 1 11
Make Float not to Wrap 7 15
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

733 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question