I'd like to add a simple text-based twitter feed to the footer of my website. From what I've read, you must generate the code for the feed through twitter, but the customization options seem extremely limited. Is there another way possible? This is the result I currently have:
http://www.charissasantos.la/mezcaleria.html
I'd like to change the background, decrease the height, remove the username photos, etc.
You can try this Javascript library, which lets you add custom CSS to the twitter embed widget. https://github.com/kevinburke/customize-twitter-1.1
You can inject your css into iframe:
resources (twitter iframe)
$(window).on('load', function() {
$('#twitter-widget-0').contents().find('head').append('<link href="http://website.com/style.css" rel="stylesheet" type="text/css" />');
});
may be this help you
Here is a sample code and demo you can use for search in twitter
http://www.codexworld.com/create-custom-twitter-widget-using-php/
you can also look into this examle may be this will full fill your requirement . http://dev.kim-maida.com/twitter/
here is demo code and code sample link. https://github.com/kmaida/twitter-timeline-php
Follow the simple steps given in this link for various kinds of timelines that can generate twitter widgets. Please follow these steps to create custom timeline widgets as well.
Related
I'm hoping this is a pretty simple question to answer. I have a page with 6 recipes on it. I'm being asked to include share buttons for each recipe and they want the shares on FB or Twitter to be formatted to use a specific image and text for each recipe. This is something we would normally handle via Open Graph metatags and the like, but that only works at the page-level.
You must use a separate URL/page for each Like/Share. But you can redirect to the main page, or just use a GET parameter. For example, each Like/Share Button can use the following URL: http://www.yourdomain.com/yourrecipepage.php?recipeid=x
The "x" being dynamic, of course. Now you can check the recipeid parameter and use different OG tags. the rest of the page will be the same. I hope you understand what i mean :)
I want to use regular share button like on this page https://twitter.com/about/resources/buttons#tweet but to add an embedded image from my site, not just link.
I know all about 1.1 api and uploading, but making an tw application and then ask visitor on my site to give permission to write on his timeline just to share one pic from my site is not likely scenario, so I think about alternatives.
I've noticed when just paste links of pic that are already uploaded on twitter into tweet, if you paste link like https://pbs.twimg.com/media/BPpk_KUCMNBXsPN.jpg that is not going to be embeded, but if you paste link like this pic.twitter.com/NuDSx1ZKwy it will be embeded. So I think if I make profile and app that will call https://upload.twitter.com/1/statuses/update_with_media.json and upload pic, and then paste link in share button I will get tweet with pic embeded. Or there is better way? I use php.
Look into twitter cards.
The trick is not in the button but rather the page you are sharing. Twitter Cards pull the image from the meta tags similar to facebook sharing.
Example:
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="#site_username">
<meta name="twitter:title" content="Top 10 Things Ever">
<meta name="twitter:description" content="Up than 200 characters.">
<meta name="twitter:creator" content="#creator_username">
<meta name="twitter:image" content="http://placekitten.com/250/250">
<meta name="twitter:domain" content="YourDomain.com">
To create a Twitter share link with a photo, you first need to tweet out the photo from your Twitter account. Once you've tweeted it out, you need to grab the pic.twitter.com link and place that inside your twitter share url.
note: You won't be able to see the pic.twitter.com url so what I do is use a separate account and hit the retweet button. A modal will pop up with the link inside.
You Twitter share link will look something like this:
Share on Twitter
You're right in thinking that, in order to share an image in this way without going down the Twitter Cards route, you need to to have tweeted the image already. As you say, it's also important that you grab the image link that's of the form pic.twitter.com/NuDSx1ZKwy
This step-by-step guide is worth checking out for anyone looking to implement a 'tweet this' link or button: http://onlinejournalismblog.com/2015/02/11/how-to-make-a-tweetable-image-in-your-blog-post/.
You can create an href link like this:
Click to tweet
You can grab the image link if it has been tweeted first.
Go to the tweet, click on options & click Embed tweet. You will find the image link in the Embed tweet.
I used this code to solve this problem.
<img src="path_to_my_image"/>
You can check the tweet-button documentation here tweet-button
Using Javascript to create a twitter button, I use Fontawesome's classes for fetching the design. Remember to add the Fontawesome script in your HTML head.
let twitter_btn = document.createElement("i")
twitter_btn.className = "fa-brands fa-twitter-square fa-xl"
twitter_btn.setAttribute("index", array_index)
element.appendChild(twitter_btn)
twitter_btn.addEventListener("click", () => {
let url = "https://twitter.com/intent/tweet?url=" + params.url +
"&text=" + params.text
window.open(url)
})
Is it possible to have a custom share image for Facebook, Google+ and Twitter?
I've already set up the open graph tags in the head of the document.
Thanks
UPDATE:
For Facebook:
<a href="http://www.facebook.com/share.php?u=url" target="_blank" ><img src="fb-img"/></a>
For Twitter:
<img src="twitter-img" />
Still looking for google+
By the way, any difference with sharer.php v/s share.php for Facebook?
I found the best solution to implement custom share button with Facebutton:
Go to facebook developers page and there you will have to read the following article which will explain you how to use meta tags (HTML) on the head of your page:
https://developers.facebook.com/docs/sharing/webmasters
Basically you need to add a Share Button on your page, right?. So, what you need to do is first of all, add the meta tags that page ask you for on the head of your page. Then everything is so easy. After facebook provides you with the code for the share button, now when you click on it, it will show you the image you specified on your meta tags. Take a look at that page and you'll see how easy is to implement it.
Twitter still i haven't implement it yet neither for google :(
I'm currently parsing twitter feeds through my rails app and wondering how it would be possible to follow links in the tweets and scrape the external content (for example, if the tweet contains a link to an article on TechCrunch, follow that link to the article and scrape the title and body content of the article). Flipboard for iPad is a perfect example of this.
I'm familiar with screen scraping using Nokogirl / Mechanize, but trying to figure out how to accomplish this in a way it could work regardless of where the link in the tweet is linking to (whether it be to TechCrunch, or Flickr, etc...).
Any thoughts / insights would be much appreciated!
Many of the major content providers provide a oembed endpoints. Take a look at the oembed_links gem. From the readme:
It allows you to easily parse text and
query configured providers for embedding information on the links
inside the text. A sample configuration file for configuring the
library has been included (oembed_links_example.yml), though you
may also configure the library programmatically (see rdocs).
If you use oembed_links in conjuction with http://oohembed.com/ you'll have dozens of content providers handled for you. You can easily write a custom provider to handle the rest.
What is the best and efficient way to add twitter to a website?
There are some scripts in the web with iframes and others don't have a caching/streaming solution (what if twitter is temp. down...). So how should I add tweets to my website the right way?
By the way I just need the last x tweets and the "x minutes ago" (I want to make a custom style).
Thanks!
How about the widget that twitter provides for this very purpose? You can customize it right there on their page, then just copy the code, and paste it into your web page. Then you're ready to go.
No PHP required -- this is all javascript/html. You don't need caching -- if twitter is down, the widget will show a message to that effect. It'll be back up at some point, and your tweets will be shown again.
EDIT: The widget twitter provides has a header and footer, and you said you don't want to show those...
I used Safari's "Web Inspector" to look at the markup that is generated by the twitter widget (Firefox's FireBug would have worked just as well for this purpose). It looks like the header area and footer area use the css classes twtr-hd and twtr-ft respectively.
So you could just add a stylesheet rule to your page to hide those areas. Something like this:
.twtr-hd, .twtr-ft {
display:none !important;
}