I need to add a twitter feed to a web project for college. I've never done this before so forgive me for my ignorance. I have tried a few things but nothing seems to work (and the twitter instructions aren't very clear). We have not yet learned JavaScript so I am trying to achieve this using only HTML/CSS. Please check my code & give me a solution. Thanks.I have tried both examples below:
In example 1 the iframe is displaying with nothing inside it.
In example 2 only a link to the page is being displayed.
<div id="container-4" class="container">
<h3>Twitter</h3>
<iframe class="twitter-timeline"
href="https://twitter.com/TwitterDev"
data-tweet-limit="3">
Tweets by #TwitterDev
</iframe>
</div>
<div id="container-4" class="container">
<h3>Twitter</h3>
<a class="twitter-timeline"
href="https://twitter.com/TwitterDev"
data-tweet-limit="3">
Tweets by #TwitterDev
</a>
</div>
Edit: Sorry for all the edits, this is my first question on here. :L
I took the following steps to get an embeded code:
- Visited https://publish.twitter.com/#
- Entered https://twitter.com/extremeironing in the search box.
- I then selected embedded timeline.
- Copied and pasted the following code (which did not work):
<a class="twitter-timeline"
href="https://twitter.com/extremeironing">
Tweets by extremeironing
</a>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8">
</script>
After this attempt I moved onto trying the first 2 examples.
Thanks in advance!
Related
This is the code I have right now for the HTML twitter embed:
<a class="twitter-timeline" data-width="280" data-height="440"
data-theme="dark" data-link-color="#E81C4F"
data-chrome="noheader nofooter noborders transparent noscrollbar"
href="https://twitter.com/CodeLacuna?ref_src=twsrc%5Etfw">
Tweets by CodeLacuna
</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
I am using it for a site on wix. However, despite changing the code to have "noscrollbar", there is still a scroll bar! Which makes no sense. So I'm wondering if perhaps there is some sort of update with the coding that I need to take into account for? I can't do CSS as I am only limited to HTML.
Here is a screenshot of what the result of the code looks like The top and bottom borders are separate assets I added myself.
Not quite the same but might work for you...? Does adding this to the anchor tag still work these days (replace with your number)?
data-tweet-limit="2"
Can someone give me feedback on this: Made the code using a third party image host (i've used them before). When I put the code in where I want it on the page (after checking on google inspect) it doesn't show up at all.
<div id="header"> <img src="preview.ibb.co/n25Rcy/banner_18.jpg"; width="920" height="174">
You need to add the protocol at the start of the url (I used https in the code below).
<div id="header"> <img src="https://preview.ibb.co/n25Rcy/banner_18.jpg"; width="920" height="174">
The company I work for just got the Google Partners Badge and they have asked me to add it to the main website as one of the logos, both in the navbar and in the footer.
However, they just sent me a link and not the logo in itself. So I was wondering what the best option to add this badge is.
Should I do an <iframe src="www.loremipsum.com/partner.html"> or should I ask for or look for an img of the badge and link it to the Google Partners website such a <img src="images/loremipsum.png">
Thank you very much.
Try using this code:
<script src="https://apis.google.com/js/platform.js" async defer></script>
<div class="g-partnersbadge" data-agency-id="XXXXXXXXXX"></div>
I am a beginner with developing websites. I ran into this problem. I would be really glad if I am helped with the same.
I want to incorporate twitter feed in my webpage. I got the script from twitter.com for displaying feeds by creating a widget. When I display just the twitter feed inmy HTML page it works. But when I try to include inside my div tag, it doesn't show up.
The Following is the code snippet
<div class="span3 right tc-sidebar">
<div id="right" class="widget-area" role="complementary">
<a class="twitter-timeline" href="https://twitter.com/xxx" data-widget-id="xxx">Tweets by #_Harish_vK</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>
</div>
U tried every possible thing I can. Please help me out . Since I have can only use the CSS which are already available for my organization(policy), is there a way to do it without modifying those CSS?
I fixed this by making a separate page for twitter feed and including it in an iframe under the divs.
Thank you guys!
Good evening everyone, I have a serious issue with SWIPEBOX galleries and Google chrome mobile.
Now please let me state that I am a total beginner in jquery and javascript and don't know what I am doing.
I am trying to create 5 separate galleries on the same page. I followed the vague steps on the swipebox website and gave each class its own unique name
class="swipebox1", class="swipebox2", class="swipebox3" (kept it simple).
eg.
<div class="box">
<a href="example/assets/full/leap.jpg" class="swipebox1" title="Leap">
<img src="example/assets/leap_thumb.jpg" alt="leap"></a>
</div>
<div class="box">
<a href="example/assets/full/leap.jpg" class="swipebox2" title="Leap">
<img src="example/assets/leap_thumb.jpg" alt="leap"></a>
</div>
The problem is that Google Chrome mobile only allows touch/tap on the buttons (close, next, previous) in the first gallery.. The second and third galleries, you can only swipe (none of the buttons work)... So you cant close... :(
I have tested this on all other browsers and it works fine (webkit mobile, dolphin mobile, safari pc, safari mac, IE10 pc, Opera pc, Nightly pc)... I have not made any changes to the swipebox css or js files... (wouldn't know what to change anyway)
Also, my script is:
<script type="text/javascript">
jQuery(function($) {
$(".swipebox1").swipebox();
$(".swipebox2").swipebox();
$(".swipebox3").swipebox();
});
</script>
I hope this is right!!!
I also tried:
<script type="text/javascript">
jQuery(function($) {
$(".swipebox1, .swipebox2, .swipebox3").swipebox();
});
</script>
but that just added them together, which I didn't want...
I really need someone's help on this as I am almost finished with my responsive website and this is the only thing holding me back...
thanks in advance for any help you can provide.
Try to leave class as "swipebox", I mean like this:
class="swipebox"
everywhere for each of your 3 galleries.
To run Swipebox use "rel" attribute like this:
<div class="box">
<a rel="gallery-1" href="example/assets/full/leap.jpg" class="swipebox" title="Leap">
<img src="example/assets/leap_thumb.jpg" alt="leap"></a>
</div>
<div class="box">
<a rel="gallery-2" href="example/assets/full/leap.jpg" class="swipebox" title="Leap">
<img src="example/assets/leap_thumb.jpg" alt="leap"></a>
</div>
Let us know if that works!