Recent Posts

How to embed tweet button in WordPress article

2020-02-10 Tips Web WordPress

GOAL

To embed Tweet button in each WordPress articles.

Environment

WordPress 5.2.5

Method

1. Get the source code of Tweet button.

Get the source code of tweet button from https://publish.twitter.com/#

Select “Twitter Buttons”.

Customize the style of tweet button and copy the code displayed.

2. Embed the source code.

Click the Theme Editor on your WordPress Dashboard. And open content.php.

Put the code copied from https://publish.twitter.com/ on any place you want.

<h2 class="entry-title"><a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a></h2>

<a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-via="nako_new_high" data-show-count="false">Tweet</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

Then change the code to get the target source URL and the title.

<a href="https://twitter.com/share" data-url="<?php the_permalink(); ?>" data-text="<?php echo get_the_title(); ?>" class="twitter-share-button" data-via="nako_new_high" data-show-count="false">Tweet</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

php funtions to get information of the article can be searched by Documentation.

Put the link and add php functions in content-single.php and content-page.php.

3. Check the Tweet button.

4. Create Tweet card with

Install All in One SEO on your WordPress.

Open All in One SEO > Feature Manager

Activate “Social Meta” and open the page of Social Meta. Input information about thumbnail image and your twitter account.

Access the Card validator and check your card preview.

When you add new post, input information about the article and select thumbnail image in Social Setting Area of All In One SEO Pack.

Result

How to embed twitter timeline on your WordPress web site

2020-02-08 Tips Web WordPress

GOAL

To embed twitter timeline on your WordPress web site as below.

Method

Access https://publish.twitter.com/#

And input URL of your twitter home.

Choose one of the two styles. If you want to change the size, looking or language of this area, click “set customization options”.

Change the style and click “Update” button.

Copy code.

Open your WordPress Dashboard and click Appearance>Widgets.

Create Text widget and put it into any space you like.

Paste the code copied from https://publish.twitter.com/ and save the widget.

[JavaScript] Two Types Of Canvas Size.

2020-02-06 JavaScript

GOAL

To understand canvas size, canvas.width and canvas.height, and how to set the size.

2 types of canvas size.

width and height set by css that determine the size of canvas element relative to the window size
canvas.width and canvas.height are reference values that determine the criteria for the image to display

These two sizes have separate meanings and are set independently.

What is the difference between canvas.width and canvas.height?

<style type="text/css">
    #canvas-container{
        width: 800px;
        height: 500px;
        border: solid 2px;
    }
</style>
<div id="canvas-area">
    <canvas id="canvas-container" width=800 height=500></canvas>
</div>

Change the canvas element size (display size).

<style type="text/css">
    #canvas-container{
        width: 400px;
        height: 400px;
        border: solid 2px;
    }
</style>
<div id="canvas-area">
    <canvas id="canvas-container" width=800 height=500></canvas>
</div>

Change the canvas buffer size.

<style type="text/css">
    #canvas-container{
        width: 800px;
        height: 500px;
        border: solid 2px;
    }
</style>
<div id="canvas-area">
    <canvas id="canvas-container" width=250 height=600></canvas>
</div>

Nakoblog Engineering and Design for Storytelling

Recent Posts

How to embed tweet button in WordPress article

GOAL

Environment

Method

1. Get the source code of Tweet button.

2. Embed the source code.

3. Check the Tweet button.

4. Create Tweet card with

Result

How to embed twitter timeline on your WordPress web site

GOAL

Method

[JavaScript] Two Types Of Canvas Size.

GOAL

2 types of canvas size.

What is the difference between canvas.width and canvas.height?

Categories