Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Embed a Twitter profile, not a timeline

I have been looking for a solution for embedding Twitter user profiles, but have come up empty so far. What I'm looking for is something similar to how Twitter pops up a nice profile overview when you click a username on twitter.com. I took a screencap of my profile so you can see below what I'm talking about.

enter image description here

I don't have any need for the user timeline or anything like that, just the user info, the cover photo background would be nice as well as a link to follow the person. I took a look through Twitters embed code builder but there didn't seem to be anything that really fit the bill. I am using Wordpress so a plugin solution could be viable, but if it's just a code embed that is fine as well.

like image 593
jbwharris Avatar asked Dec 05 '13 16:12

jbwharris


People also ask

Can you embed a Twitter profile?

You are able to embed entire Twitter profiles or an individual tweet.

How do I embed Twitter on Twitter?

Click the icon located within the Tweet. From the menu, select Embed Tweet. This will open publish.twitter.com where you can customize the look of the embedded Tweet by clicking set customization options. If the Tweet is a reply to another Tweet, you can check Hide Conversation to hide the original Tweet.


Video Answer


1 Answers

Here is an implementation for the button, this require some work to add the profile picture and the background picture

Icon SVG code:

  <symbol id="twitter" viewBox="0 0 512 512"><path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z" /></symbol>

SASS/CSS:

.twitter a  
  font-family: "Roboto", "Noto Sans", "Open Sans", "sans-serif"
  display: inline-flex
  color: #fff
  border-radius: 5px
  background: #1b95e0
  padding: .4em .8em
  text-decoration: none
  font-weight: bold
  text-align: left

HTML:

<div class="twitter" style="height: 35px; width: 240px;"><a target="_blank" rel="noopener noreferrer" href="https://twitter.com/LinuxHacksOrg">
<svg height="20px" width="20px" style="margin-right: 5px; fill: #fff;">
<use xlink:href="/assets/imgs/res/icons-full.svg#twitter"></use></svg>
Follow us @LinuxHacksOrg</a></div>

<style>
.twitter a {
  font-family: "Roboto", "Noto Sans", "Open Sans", "sans-serif";
  display: inline-flex;
  color: #fff;
  border-radius: 5px;
  background: #1b95e0;
  padding: .4em .8em;
  text-decoration: none;
  font-weight: bold;
  text-align: left;
}
</style>

<div class="twitter" style="height: 35px; width: 300px;"><a target="_blank" rel="noopener noreferrer" href="https://twitter.com/LinuxHacksOrg">
<svg height="20px" width="20px" style="margin-right: 5px; fill: #fff;" viewBox="0 0 512 512" preserveAspectRatio="none">
<path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z" />
</svg>
Follow us @LinuxHacksOrg</a></div>
like image 98
intika Avatar answered Sep 17 '22 14:09

intika