To let people easily share the patio11bot, we'll add a "Tweet" button to the page. You can easily add a static share button by going to https://publish.twitter.com/ and following the instructions there, but to make a dynamic tweet button is more difficult.

We'll use the same share button, but we'll dynamically add it to the page with javascript, and then we have to tell the Twitter script to reload it as a widget with: twttr.widgets.load()

Insert the script into the header: 

<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

Add a placeholder in the html:

<div id="tweet-button"></div>

In script, we build dynamic message:

document.getElementById("tweet-button").innerHTML = '<a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-show-count="false" data-size="large" data-via="chrisachard" data-text="patio11bot.com just told me:\n\n'+answer.quote+'\n\nWhat will it tell you?">Tweet</a>'

twttr.widgets.load()

[Tools] Add a Dynamic Tweet Button to a Webpage的更多相关文章

  1. Using jQuery to add a dynamic “Back To Top” floating button with smooth scroll

    Ever read a really long blog post or article and then had to scroll all the way up to the top of the ...

  2. Tweet button with a callback – How to?

    原文: http://jaspreetchahal.org/tweet-button-with-a-callback-how-to/ 两种方式:1. 原生的button <a href=&quo ...

  3. ef code first transform,add ef power tools add-in,add tangible t4 editor for enhancement.

    use ef power tools, as to .edmx file,right click at view, choose generate database from model, then ...

  4. Linux Programe/Dynamic Shared Library Entry/Exit Point && Glibc Entry Point/Function

    目录 . 引言 . C/C++运行库 . 静态Glibc && 可执行文件 入口/终止函数 . 动态Glibc && 可执行文件 入口/终止函数 . 静态Glibc & ...

  5. magento产品成功添加到购物车后跳转到不同页面 添加 add to cart 按钮

    1 添加产品到购物车成功后是跳转到购物车页面或不跳转.这个在后台可以设置 system -> configuration -> After Adding a Product Redirec ...

  6. [AngularJS] Accessible Button Events

    Often buttons need to be handled by JavaScript, and if done improperly it can lead to accessibility ...

  7. 在toolbar里动态创建多个button(ext.net)

    private void setOneMenu() { string sql = "select id,name,gids from Config where name<>'高级 ...

  8. Dynamic proxy

    import java.lang.reflect.InvocationHandler; import java.lang.reflect.Method; import java.lang.reflec ...

  9. ASP.NET 动态创建文本框 TextBox (add TextBox to page dynamically)

    下面的函数每执行一次就生成一个TextBox(其实是<input type="Text">)    var i=0;     function changeIt()   ...

随机推荐

  1. 前端读者 | 百度前端编码规范(CSS)

    本文来自:百度FEX 1 前言 CSS作为网页样式的描述语言,在百度一直有着广泛的应用.本文档的目标是使CSS代码风格保持一致,容易被理解和被维护. 虽然本文档是针对CSS设计的,但是在使用各种CSS ...

  2. 使用Gradle管理第三方依赖

    http://blog.bsdn.org/2012/01/02/%E4%BD%BF%E7%94%A8gradle%E7%AE%A1%E7%90%86%E7%AC%AC%E4%B8%89%E6%96%B ...

  3. 445. Add Two Numbers II【Medium】【两个链表求和】

    You are given two non-empty linked lists representing two non-negative integers. The most significan ...

  4. Spring Security静态资源访问

    在使用Spring Security时要求所有请求都需要授权访问,此时会定义过滤规则如下 protected void configure(HttpSecurity http) throws Exce ...

  5. ubuntu14.04下安装爬虫工具scrapy

    scrapy是目前准备要学习的爬虫框架,其在ubuntu14.04下的安装过程如下: ubuntu14.04下默认安装了2.7的python以及setuptools,若未安装,可通过下面指令安装: s ...

  6. 【Vijos 1607】【NOI 2009】植物大战僵尸

    https://vijos.org/p/1607 vijos界面好漂亮O(∩_∩)O~~ 对于一个植物x,和一个它保护的植物y,连一条边<x,y>表示x保护y,对于每个植物再向它左方的植物 ...

  7. 【BZOJ 3993】【SDOI 2015】序列统计

    http://www.lydsy.com/JudgeOnline/problem.php?id=3992 这道题好难啊. 第一眼谁都能看出来是个dp,设\(f(i,j)\)表示转移到第i位时前i位的乘 ...

  8. 【DFS】bzoj2435 [Noi2011]道路修建

    两遍DFS.第一遍统计以每个点为根的子树大小,第二遍更新答案. #include<cstdio> #include<iostream> using namespace std; ...

  9. python3-开发进阶Django-form组件中model form组件

    Django的model form组件 这是一个神奇的组件,通过名字我们可以看出来,这个组件的功能就是把model和form组合起来,先来一个简单的例子来看一下这个东西怎么用:比如我们的数据库中有这样 ...

  10. python基础之生成器,三元表达式,列表生产式

    生成器 1.什么是生成器? 在函数内但凡出现yield关键字,再调用函数就不会执行函数体代码,会返回一个值,该值称为生成器. 生成器的本质就是迭代器. 2.为什么要用生成器? 生成器是一种自定义迭代器 ...